The goal is to use as little as possible external code as possible. PLain HTML, plain CSS, plain Javascript. In the end I decided to use Modernizer, because it is very reliable, and will enable the use of the most modern techniques, while keeping cross-browser, cross-platform and backword and forward compatibility. In short: best chance the shit just works.
Besides using as little as external code as possible, we also try to use as little as code ourselves. So there's a simple page structure, and within the page there's a simple structure to put the content in, with as much as semantic code as possible. So no endless nesting of those DIV tags.
Just NAV - MAIN - FOOTER for the page, and SECTION and ARTICLE tags inside main, for the content of
pages.
All semantic modern HTML5 tags that have a meaning, so you will not see only code but context as well
in the code.
One CSS file is added to the page. It will have the basic layout, as well as default colors and
measures.
A lot of default colors, measures and images can be changed easy.
On top of the page there's a numer of CSS properties defined, also known as CSS variables. Set all the
variables for fonts, colors, widths ect in the top of the CSS file.
You can set for colors and measures for all main elements of the page (navigation, header, main content
area, sidebars, footer.)
These custom properties will effect the whole site, so, all pages. (For individual pages you can set the custom properties to an other value if you want a special page)
Create and apply your own color schemes, background images, block layout, font settings.
Besides that, there are a number of set styles in the CSS file you can use to apply on individual HTML elements in the page. For margins, padding, width, height or special cases like creating columns or to style modules.
Lots of the CSS custom properties are connected to attribute selectors, using the data-gs- prefix. Most
of the time they are more compact then classes and we find them more intuitive then the normally used
classes.
Attribute selectors can be easy manupilated with Javascript, so we hope to get the most simple and
compact connection between HTML, CSS and Javascript this way.
HTML: Visual layout will sometimes require more -or less- HTML code. If you want a page with a sidebar, there will be needed some extra HTML code. There are different HTML templates avalable now. See Pages section.
As long as you use the templates and the CSS from the framework, you shouldn't have to correct anything
for bigger or smaller screens. It should all adapt.
We use as simple as possible Flexbox and CSS Grid properties for layout, that will support all modern browsers and devices.
Headers and normal text will adjust to screen size. They are basically set once for the whole site on any device.
Images will scale where needed (mostly set to 100% width of their container). Also it's easy to use WebP images for greatly smaller files sizes compared to regular (jpg, png or gif) images or backgrounds.
Load pages or part of pages to any part of the page you are on, without needing to reload the page. So, change content flawless.
To begin with, header with menu, and a footer are dynamically loaded in every page, so you will need just one (but can easily use more if needed).
A responsive menu is included that will change in amobile (hamburger style) menu on small devices
Any kind of stuff that makes life easier. From two-column gadget to video player.
Look at the block at the top of the page: Text on the left side, image on the right. It can be achieved bij adding an attribute selector to an article within a section: data-gs-twocol. On smaller screens, the columns will dissapear and the content will be stacked.