HTML & CSS code style

Preprocessing

We gebruiken de volgende preproces tools in Webpack (Laravel Mix):

Syntax styling

We gebruiken de volgende CSS syntax voor het definieëren van styling. We hebben hier voor overerving gekozen zodat we CSS classes makkelijk kunnen terugvinden in de component structuur die we gebruiken:

.component                          /* Component */
.component__child                   /* Child */
.component__child__grandchild       /* Grandchild */
.component__child__grandchild img   /* Sub items grandchild */

.projects                           /* Specifieke naamgeving in componenten */
.project

+option('option')               /* Uitzondering op eerder gedefinieerde style */
+tweak('tar')                   /* Enkelvoudige style tweaks (bijv. `text-align right`) */

+above(1025px)                  /* Media query selector */

.js-hook                        /* JavaScript hook, voor terugvinden van JS binding */

Components

Belangrijkste onderdelen bij het aanmaken van een component:

Een voorbeeld van het gebruik van componenten:

<div class="projects">
    <div class="project">
        <h4 class="project__title">Title</h4>
        <div class="project__image-wrapper">
            <img class="project__image">
        </div>
        <div class="project__content">
            <div class="project__content__date"></div>
        </div>
    </div>
</div>

Options

HTML opmaak van uitzondering op eerder gedefinieerde style:

<div class="project --highlight"></div>

Een CSS opmaak voorbeeld:

.project
    background-color $secondary

    +option('highlight')
        background-color $primary

Tweaks

HTML opmaak van algemene tweaks te gebruiken op alle HTML elementen bijvoorbeeld:

<div class="project +pad4bottom"></div>

In het Stylus worden de selectors als volgt gedefinieërd:

+tweak('pad4top')
    padding-top 4rem
+tweak('pad4bottom')
    padding-bottom 4rem

Belangrijk om te weten is dat een tweak een bestaande css regel overschrijft.

Responsive

Om elementen voor een specifieke resolutie of range aan te passen gebruiken we de volgende selectors:

.project
    // Small smartphone screens (iPhone 5s)
    +above(321px)
        // Larger smartphone screens (iPhone 6+)
    +above(481px)
        // Smartphone landscape
    +above(769px)
        // Tablet portrait
    +above(1025px)
        // Small desktop
    +above(1281px)
        // Medium desktop
    +above(1681px)
        // Large desktop

De schermbreedte pixel waarde is als leidraad opgegeven en er mag natuurlijk van worden afgeweken. Voor specifieke situaties kun je ook +below(1025px) gebruiken.

JS Hooks

Voorbeeld van het gebruik, bij meer dan één data-selector gebruik meerdere regels:

<div class="js-map …"
     data-map-icon="url.png"
     data-map-lat="4.56"
     data-map-lon="1.23">

DOM structure

Class order

<div class="component__element +pad4top --option js-hook">

Dus eerste component classes, daarna tweaks en options en tot slot de js hook.

Code style

We gebruiken stylint om onze stylesheet te linten. Configuratie doen we met het volgende bestand:

.stylintrc toevoegen

Bestand structuur

We gebruiken de volgende bestandsstructuur voor CSS bestanden:

|-- base            : basis html elements
|-- components      : single components
|-- helpers         : helper classes
|-- includes        : reset classes
|-- settings        : variabele zoals fonts, colors, padding
`-- critical.styl   : critical css, ingeladen direct in html
`-- main.style      : required css bestanden

Base folder

Basis CSS elementen zoals header footer main.

Components folder

Componenten waarmee we templates opbouwen zoals blog, carousel en modal.

Helpers

CSS helpers die het makkelijker maken de styling te schrijven zoals: tweaks, mixins.

Settings

Alle basis configuratie die we nodig hebben in projecten zoals de definitie van fonts, colors en grid settings.

Naamgeving

CSS bestanden geven we namen in het volgende patroon: _generated.styl.

HTML5

We gebruiken voor de opmaak van templates HTML5 tags zoals: header nav footer section main. Voor meer voorbeelden kijk op: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5.