This template comes with a Page Starter Template, which contains the fundamental structure for a page: a Global Component that can be used to store custom code, a page wrapper that holds the header — which holds the Nav Component — the sections, and the Footer Component.

Naming Convention

The naming convention applied in this template is known as BEM. Classes are named in lowercase, and the elements are usually related to each other when you see a "__" after a name.

Imagine a section called events. Now, imagine this section has a grid with events items inside.

• The section is named "events".
• The grid is named "events__grid", and the items are named "events__item".

As you can see, the "__grid" means that the grid belongs to the "events". Note: it's okay to have classes that don't belong to a "parent class".

• If the grid inside the events section is used in other sections and pages, this grid could be name individually, something like "grid-4-column".

You might see elements with combo classes applied, and in this case, the "extra classes" start with "--". Let's say you need to change the color of a text in a particular element:

• This is a large text, so it was named "text-large", and was initially set to be black.
• You need this "text-large" to be red, so you just need to add a new class name "--cX", and change the color accordingly: see the color naming below.

Variables

We use variables to set colors and paddings. The "color 01" is named "c1" and is given its RGBA value, and when you see a "c1-75", that means this is the "color 01 with 75% opacity."

Paddings are named from the smallest to the largest: "pd-01", "pd-02", "pd-03", and so on. It's important to note that all values are set to REMs, which is a best practice for accessibility.

Style Guide

The Style Guide sets both colors and fonts, including the Rich Text Element. Headings and texts get their names based on size:

• H1 = heading-huge
• H2 = heading-xlarge
• H3 = heading-large
• H4 = heading-medium
• H5 = heading-small
• H6 = heading-tiny
• text-large, text-regular, text-small, and so on...

It's important to note that the most important thing for headings is choosing the right Tag. Sometimes, you don't want an H1 to be the biggest, so you select the H1 tag and add the class "heading-medium", for example: The class name overrides the tag's initial size.

Hidden Elements

Some elements are hidden by default which is done by setting them to "display none". The best example of that is the menu navigation, named "menu". This element is found inside the Navigation Component.

To edit the menu, you must set the "menu" to a "flexbox", and then make the changes as needed. Once changes are done, you MUST set the menu to its initial layout, in this case, "none".