The EuroCMS Themes

EuroCMS has a variety of themes available, which in turn also have a variety of template.

A theme is basically a css and js file, and the template is the (HTML) structuring of your website, may it be a parallax template, or a CV template.

Currently the default theme is Skeleton, based on the Skeleton.css.

W3schools has multiple, from w3schools.com, they have a long list of templates.

Design palettes

TODO: Find out how professional website designers name and structure their design, and incorporate that in ECMS

1. Primary color

2. Secondary color

3. Light and dark variants

• https://www.w3schools.com/colors/colors_picker.asp

• https://www.w3schools.com/html/html_colors.asp

• https://www.w3schools.com/colors/

• https://www.w3schools.com/colors/colors_names.asp

• https://www.w3schools.com/colors/colors_brands.asp

The css directory containts styling in the following categories

• Grid

• Base Styles

• Typography

• Links

• Buttons

• Forms

• Lists

• Code

• Tables

• Spacing

• Utilities

• Clearing

• Media Queries

Coloring

- primary color
- secondary color
- accent-color

Borders

- border-style
- border-color
- border-radius
- border-imageg

Images

--

$_SERVER

For the theme builder, there are php constant available. Theses constant are usually everything in the $_SERVER. See https://www.php.net/manual/en/reserved.variables.server.php for a list of variables available.

Due note, that these change depending on your server configuration. Give it a proper read, so that you don't come across surprises.

browscap

Next, we also have browscap data in php constant available. The data is prefix, with browscap_ , this because, names likes browser and version are to generic.

There is not a builtin function to handle this. Reason is that, at the time of writing, there are 48 different browscap data, to write a function, to check if a `Firefox.css` file exists, 48 time, would severally impact the performance of EuroCMS. So, the Theme developer has the option to use and not use any of the data.

Here is a list of examples on how you can use the browscap data.

# Let's say you have specific css files per browser, you can use the `browscap_browser` constant, to create something like this.
$browser = constant('browscap_browser');
# Firefox

echo file_get_contents("css/$browser/$browser.css");
# example: css/Firefox/Firefox.css

# Or, if you have specific css code, for a specific version of a browser, you can do the following:
$browser_version = constant('browscap_version');
echo file_get_contents("css/$browser/$browser_version.css");
# example: css/Firefox/100.0.css

# You can also build an if statement.
# For example, if your theme does not support IE, you can build this:
if($browser == 'IE') {
	die("<p><strong>$browser</strong> is not supported!</p>");
}
# What this does is: If the browser is IE(Internet Explorer), exit the script with a warning message.


# IF you don't like "if" statements, you can also do the same as with the css code above, like so:

require_once "inc/$browser/$browser.php";
# example: inc/IE/IE.php
# In the $browser.php, any browser specific code can be set.


# Here are some full example, using multiple variables
$platform = constant('browscap_platform');
# Ubuntu

$renderingengine_name = constant('browscap_renderingengine_name');
# Gecko

# We are loading js, css and PHP code, specific to the platform, browser and browser version.
echo file_get_contents("css/$platform/$browser-$browser_version.css");
# example: css/Ubuntu/Firefox-100.0.css

echo file_get_contents("css/$platform/$renderingengine_name.css");
# example: css/Ubuntu/Gecko.css

echo file_get_contents("js/$platform/$browser-$browser_version.js");
# example: js/Ubuntu/Firefox-100.0.js


require "inc/$platform/$browser-$browser_version.php";
# example: inc/Ubuntu/Firefox-100.0.php


# Here is a boolean example:
if($ismobiledevice) {
	echo file_get_contents("css/ismobiledevice.css");
}

# You can also use the constants as css class name
# Or, generate specific js code using the constants


# Or you can generate CSS styling inline, like so:

echo ".$platform .$browser {color: #FFFFFF;}";
# example: .Ubuntu .Firefox {color: #FFFFFF;}


echo "<div class=\"$platform $browser\">Your OS and browser styling</div>"
# example: <div class="Ubuntu Firefox">Your OS and browser styling</div>

The browscap data contains string and boolean values. Please view http://browscap.org/ua-lookup for an example output of the data, and also check the wiki page, for detailed examples on the data https://github.com/browscap/browscap/wiki

Main characteristic

• To extend the front end experience.

• Depending on the main theme, it can be fully modifiable.

JS Package manger

• NPM?

https://www.npmjs.com/package/api

• YARN?

• Parcel?

• jamjs?

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management

Permissions

Think about this!

Reference

• https://w3schools.com/

• http://getskeleton.com/