Front-end Strategy with a sprinkling of ExpressionEngine
Author: TJ Fogarty
Publisher: TJ Fogarty
My aim in the past while has been pointed towards front-end development, and exploring the different ways in which to produce a tidy result.
These examples point to ExpressionEngine paths, but you can customise them to any project you’re working on. I’m relatively new to the ExpressionEngine game, and some of what I’m going to outline will be eventually replaced by Niall O’Brien’s EE Foundation generator, so that’s definitely something to keep an eye on.
As with many things, we start with Gulp. This will handle our assets and do some nifty things such as generating our critical CSS and automatically injecting our Bower components whenever we update them. See below for an example setup:
This is just the standard-fare Gulp setup. We’ve got tasks for watching and compiling our assets. It’s the structure of these assets that I want to talk about.
I’m using Sass (SCSS syntax), and I’m borrowing heavily from MVCSS for the structure. It’s a simplified version (i.e. I’ve left things out) to a point where I find it easier to manage.
A typical folder structure would be :
This is the foundation of the project, where we establish defaults on tag-level elements, define variables, layouts, mixins… The files in here might go as follows:
- _base.scss — our tag-level styles.
- _config.scss — definition of our variables, fonts etc…
- _helpers.scss — mixins, placeholders, utility classes.
- _layout.scss — grid-type classes.
- _reset.scss — I like to use normalize.css