Introduciton

Escala is frontend framework designed for medium to large sized web applications following this convention similar, but more pleasant to write, to BEM and written in SASS. Escala is based on flexbox and dual styles - separated styles for mobile (small viewports) and for desktop (large viewports). This doesn't mean Escala is not responsive.

Install

Escala is available as the escala package on npm.

Add it to your projects with npm:

npm install --save escala

or yarn:

yarn add escala

Minimum setup

Somewhere in your project, you should create 2 files - one for desktop and one for mobile, like so:

app/
    styles/
        desktop.sass
        mobile.sass

These two files should be pretty similar inside at start, let's look at desktop.sass

// desktop.scss

// First declare project specific variables to customize Escala.
// NOTE: always define variables before importing Escala, order matter.
$color-primary: #f80;
$color-border: #e0e0e0;
$fontFamily: "Roboto";
$baseline: 2.5rem;

// Import Escala.
@import "~uol-frontend-framework/src/styles/web.scss";

// Rest of your styles
.applepie {
    background: yellow;
}

Next create desktop.html and mobile.html. Placement of those files doesn't matter.

app/
    styles/
        desktop.sass
        mobile.sass
    public/
        styles/
            desktop.css
            mobile.css
        desktop.html // <link rel="stylesheet" href="styles/desktop.css">
        mobile.html // <link rel="stylesheet" href="styes/mobile.css">

The last step is the most complicated of all and totally up to you - figure out how to load desktop.html or mobile.html based on educated server guess.

Recommended setup

Recommended setup involve same steps as minimum setup, so if you skipped ahead, you should start with that.

There are two main ways how to structure any project. Grouping by file type (e.g. MVC structure) or by feature. I'll show examples of how setup Escala for both and it's entirely up to you which one you choose.

By file type

app/
    styles/
        abstracts/
            mobile/
                _index.scss // exports all from folder
                _functions.scss // @import "../common/functions";
                _variables.scss // @import "../common/variables";
            common/
                _functions.scss
                _variables.scss
            desktop/
                _index.scss // exports all from folder
                _functions.scss // @import "../common/functions";
                _variables.scss // @import "../common/variables";
        base/
            mobile/
                _index.scss // exports all from folder
                _grid.scss // @import "../common/grid";
            common/
                _grid.scss
            desktop/
                _index.scss // exports all from folder
                _grid.scss // @import "../common/grid";
                _utilities.scss
        components/
            mobile/
            common/
            desktop/
        pages/
            mobile/
            common/
            desktop/
        vendor/
        mobile.scss
        desktop.scss

By feature

app/
    styles/
        mobile/
            homepage/
                 _index.scss // exports all from folder
                 _component.scss
            dashboard/
                 _index.scss // exports all from folder
                 _chart.scss
            common/
                 _index.scss // exports all from folder
                 _globalComponent.scss
            _functions.scss
            _variables.scss
            _index.scss // exports all from folder
        desktop/
             // similar to mobile
        common/
             // shared between mobile and desktop