Front-end Strat­e­gy with a sprin­kling of ExpressionEngine

Publisher: TJ Fogarty

Modified: 2018-03-13

My aim in the past while has been point­ed towards front-end devel­op­ment, and explor­ing the dif­fer­ent ways in which to pro­duce a tidy result.

These exam­ples point to Expres­sio­nEngine paths, but you can cus­tomise them to any project you’re work­ing on. I’m rel­a­tive­ly new to the Expres­sio­nEngine game, and some of what I’m going to out­line will be even­tu­al­ly replaced by Niall O’Brien’s EE Foun­da­tion gen­er­a­tor, so that’s def­i­nite­ly some­thing to keep an eye on.

As with many things, we start with Gulp. This will han­dle our assets and do some nifty things such as gen­er­at­ing our crit­i­cal CSS and auto­mat­i­cal­ly inject­ing our Bow­er com­po­nents when­ev­er we update them. See below for an exam­ple setup:

This is just the stan­dard-fare Gulp set­up. We’ve got tasks for watch­ing and com­pil­ing our assets. It’s the struc­ture of these assets that I want to talk about.

Styles #

I’m using Sass (SCSS syn­tax), and I’m bor­row­ing heav­i­ly from MVC­SS for the struc­ture. It’s a sim­pli­fied ver­sion (i.e. I’ve left things out) to a point where I find it eas­i­er to manage.

A typ­i­cal fold­er struc­ture would be :

Core #

This is the foun­da­tion of the project, where we estab­lish defaults on tag-lev­el ele­ments, define vari­ables, lay­outs, mix­ins… The files in here might go as follows:

  • _base.scss — our tag-lev­el styles.
  • _config.scss — def­i­n­i­tion of our vari­ables, fonts etc…
  • _helpers.scss — mix­ins, place­hold­ers, util­i­ty classes.
  • _layout.scss — grid-type classes.
  • _reset.scss — I like to use normalize.css