Frontend Automation

Sass

Cascading Style Sheets (CSS) began as a simple, yet powerful way to style documents in a cascading format, where specific settings, such as font size or color, could be defined at a high level and sub-sections could inherit these styles or easily override them when needed. As websites grew more complex and increasingly needed to be rendered on various different devices, CSS style sheets became large and unwieldy.

Syntactically Awesome Style Sheets (Sass) emerged as a solution to this complexity. Sass makes CSS writing more programmatic in nature, adding inheritance, variables, and other features. Sass uses the Ruby language to compile Sass files to CSS files which browser readable.

Developers on Pantheon can use local Sass libraries to compile the preprocessed css files and deploy these files to Pantheon, or use Sass helper apps such as Scout or Koala. An alternate solution is Kalabox, a local development environment which provides deep integration with Pantheon and offers a local environment that mimics Pantheon’s distributed infrastructure.

Grunt

Grunt is a task runner for frontend development. It automates frontend tasks such as running tests, minifying files, and Sass/CSS preprocessing. It uses Node.js, and has a large community and many available plugins.

Grunt is installed on Kalabox, a local development solution which Pantheon recommends. Task files can be build to test and minify CSS, for example, which can be pushed directly to Pantheon from Kalabox’s command line interface.

Gulp

Gulp is a task runner for frontend development, similar to Grunt, with a slightly more “code-like” syntax. Frontend tasks such as lint tests, minification, and CSS file preprocessing can be created for each project and thousands of plugins exist to extend Gulp. Like Grunt, it also uses Node.js.

Gulp is installed on Kalabox, Pantheon’s recommended local development solution. Files output from Gulp can be pushed directly to Pantheon via Git.