Modern Tooling

CSS Preprocessors

As you're working locally you can use any CSS Preprocessor you'd like (such as Sass, or Less) to output to the site.css.twig file.

Sass SCSS

Example:

sass --watch --sourcemap site.scss:site.css.twig

For the most part, all your SCSS should just be piped to the site.css file.

But using REC twig / theme variables in your scss can seem a little strange, but can be done like so:

Using SCSS's #{} syntax, we can input variable tags in and have them outputed into a syntax ready to be read by REC's twig template parser

#header {
    background-color: #{'{{ theme.colour.header_footer }}'};
}
@media screen and (min-width: 48em) {
    #header {
        background-image: url(#{'{{ theme.header_background_image }}'});
        background-repeat: #{'{{ theme.header_background_image_repeat }}'};
    }
    #header .layout-inner {
        height: #{'{{ theme.header_height }}'}px;
    }
}

Which compiles to:

#header {
    background-color: {{ theme.colour.header_footer }};
}
@media screen and (min-width: 48em) {
    #header {
        background-image: url({{ theme.header_background_image }});
        background-repeat: {{ theme.header_background_image_repeat }};
    }
    #header .layout-inner {
        height: {{ theme.header_height }}px;
    }
}

Which can be then be run normally in REC.

Compiling to JS

Same concept as the above with css, just output the site.js.twig file.

Browserify

Example:

watchify site.js -o site.js.twig -d

Coffeescript

Example:

watchify -d -t coffeeify site.coffee -o site.js.twig

Other build tools

Makefiles, gulp or grunt etc. Remember, you're working locally, so like the above examples with SCSS, just output to the relevant files and it should all work as expected.

Responsive frameworks

Our base responsive template uses Pure.css base (which in turn uses normalize.css) and grids which provides a namespaced responsive grid.

But you can just as easily import any other framework into your project such as:

You may need to watch out for cases where core classes we use, are the same named as in the framework, in which case, an option you could go with is to import the framework with SCSS or Less, and include it into a namespace, as shown here.