Skip to main content

📁 Structure Overview

Even though our starter snapshot is rather simple, a small overview of the file structure we prepared is required.

Let's start by reviewing our top level folders & files

├── []assets # Scripts & Styles source code. Everything inside will be compiled.
├── []build # Our compilation scripts launched by `npm start`
├── []data # All the content comes from JSON files inside this directory. It's similar to a database.
├── []views # Where all the layout magic happens. Our final HTML file comes from all the .twig files inside
├── []www # Webserver root directory, contains all the compiled code & everything inside will be accessible by the browser.
├── eleventy.config.cjs # 11ty config file
└── package.json # NPM imports

Javascript​

/assets/scripts/app.js is our entry point! Everything goes from here to generate /www/assets/scripts/app.js. We then use ModularJS to split our code in Modules that we can call on DOM elements in our view files.

ModularJS basics

We use this library for its ease of use, you'll get the hang of it quickly! The base JS code for a module is as follows:

/assets/scripts/modules/Example
import { module } from 'modujs';

export default class extends module {
    constructor(m) {
        super(m);

        // selectors
        this.$button = this.$('button')[0] // [0] because the `$` function return a NodeList
        this.$items = this.$('item')

        // event shortcuts
        this.events = {
            click: {
                button: 'doSomething'
            }
        }
    }

    doSomething() {
        console.log('Hello world');
    }
}
tip

Using this.events is a shortcut! This way, you don't have to handle the addEventListener and removeEventListener combo, it's all handled already!

And to call the module in our DOM, it's as simple as that:

<div data-module-example>
    <h2>Example</h2>
    
    <button data-example="button">Button</button>

    <ul>
        <li data-example="item">Item 1</li>
        <li data-example="item">Item 2</li>
    </ul>
</div>

Appart from that, we can use all the nice ES6 features we all love and not worry about browser support thanks to our building scripts!

Styles​

SCSS for better styles handling​

We will be using SCSS on this project. This preprocessor scripting language extends the capabilities of regular CSS and offers various advantages (improved readability, modularity, conditional statements, easier maintenance, etc).

Grid helper

You can toggle a grid helper to highlight the 12 cols grid with CTRL + G

Prefixes​

We use short prefixes on our classes to improve readability.
All our components start with .c- like .c-example. Then we have utility classes that start with .u- like .u-screen-reader-text.

CSS Methodology​

In combination with this, we'll follow a slightly altered BEM methodology.

How we use BEM

We use the same notion of blocks, elements and modifiers with these exceptions:

  • Blocks and elements are separated by a single _ (underscore) instead of two.
    So ❌c-block__element becomes ✅c-block_element
  • Modifiers are not prefixed by blocks and elements, we directly state them with a - prefix.
    For example: c-block_element -modifier.