Utility classes – "u-name" (i.e. u-bgcolor, u-tile...)

– "Global" classes that can be added as a combo class to any element to apply its styling.
– Meant for basic, repeated layout elements.
– pre-set with styling for all breakpoints.

Combo classes – "cc-name" (i.e. cc-primary...)

– pre-made combo classes for some utility classes, prepared for variants of the same class
– usually for size, color or layout variations

Repeated divs – page-wrap, sect, cont...

– divs that are not meant for building styling, but are reused throughout the page (like section or container divs), simple name connected with "-" is used. For their combo classes, keep the "cc-name" naming.

Custom divs

– for specialised, one-time use divs, keep naming in format "pagename"-"sectionname"-"name". For example: "home-hero-illutration-wrap" or "about-contact-form-infographics"

Body (no class)

Any styling changes to body should be done on Body (All pages), not on a new body class.

Styling of a Body tag through new body css class should only be done when major design changes are done on the WHOLE page. Otherwise, changes should be made on Section elements.

‍page-wrap

Div for all page content, right under the BODY tag. Allows easy "whole-page" copy/paste. Carries no formatting.

code (optional)

Any code embeds should be kept here before the header and "u-main" divs.

header

Div containing the main top navigation. Should contain both desktop and mobile navigation, all dropdowns, modals, etc. has to be set to "Header" tag.

main

Has the page content. Tag needs to be set to "Main" to correctly structure the page divs.

sect

Section tag (set to "Section") is the main tag used for structuring content on the page. Has a pre-set side paddings to make sure content does not ever "touch" the side of the screen.

cont

container is the div that defines the max width of the content. combo classes serve tu set the max width.

Content itself

The website page goes inside the container.

footer

Div containing the footer. Set to "Footer".

‍

Sizes for Paddings, Margins and Text are fluid, computed dynamically for any screen size, so that the shift in layout is minimized.

‍

We have sizes defined as a values in Variables (listed below) and these variables are linked in a Utility classes (listed below). This way we can either attach the variable when we are styling a new class, or simply add a utility class, whenever we build a generic element.

‍

The system is based on the fluid type sizing in S2 framework.

‍

The sizes can be easily caluclated with this calculator.

‍

There are a clamp() values for variables for spacings and for text sizes (described in sections below)

When starting a new project

1/ Copy paste the whole styleguide (the "stylguide-wrapper" div on this page) to a new "Styleguide" page int he new project.

2/ Define size variables

When starting a new project, the variables for sizes need to be defined. Please keep the naming so that the links are not broken.

3/ Create color variables and link them in classes

Define variables for colors – primary, secondary, backgrouns, typography etc. and link them to the classes

4/ Style global tags:

Body (All pages), All H1-6 Headings, All paragraphs.

Keep the colors and font sizes, set "All headings" and "All paragraphs" top margin to 0 and Bot margins to set values.

‍

How to use utility, combo and custom classes

Generally, the utility classes, their combo classes and pre-made components should cover most basic layouts, elements and their mobile breakpoints. For example basic 2,3 column layouts, layout text on left image on right, tile grids, headings, button rows etc.

For more specialised sections (i.e. Hero sections, unique one-time layouts..) it is recomended to create either a new combo class (i.e. "sect cc-home-hero") or a completely new custom-named div (i.e. "home-hero-illustration-wrap").

‍

‍