Frontend Tools

Build tools are commonly used to package CSS and Javascript in to bundles. These bundles means that only one or two payloads of data need to be downloaded by a browser.

Task Runners

• Gulp
• Webpack
• Grunt
• Compass

We primarily use Gulp in conjunction with NodeSass to compile source SCSS stylesheets in to browser compatible CSS payloads.

Whilst Compass does this out of the box, the compile times are terrible and we recommend against using it in favour of using NodeSASS with a Compass shim.

Stylesheets (CSS)

There are a few different pre-processed variants of CSS: We primarily use Scss for Magento 1 and other projects and Less for Magento 2.

• Scss (Sass)
• Less
• Stylus
• PostCSS

Stylesheet Frameworks

We rarely start from scratch when working with stylesheets, here is a list of some of the frameworks we work with day to day.

When working with Bootstrap, do not use the grid column classes directly, write your own classes that use the mixins.

• Bootstrap 3.x
• RWD (Magento 1)
• Bootstrap 4.x

Whilst you can easily grab the frameworks by downloading directly from their site, it is strongly recommended you do not do this if possible. Use npm or yarn to get bootstrap as a dependency and pull it in that way.

We use the package managers mentioned above to allow the frameworks to be updated (like with Composer for PHP), it also stops us editing the files directly in node_modules.

Javascript

There are different versions and flavours of Javascript, to maintain backwards compatibility all non ES5 javascript is compiled/transpiled to ES5

• ES6/7 Javascript
• Typescript
• VueJs Components

Javascript Frameworks

JS frameworks appear every other day but we have boiled our favourites down to a select few that have remained present and stable.

• VueJS 2.x
• React
• KnockoutJS (for Magento 2)