User interface design for web applications has advanced rapidly in recent years. New JavaScript-based frameworks are increasingly being used as the presentation layer in conjunction with the content administration and database APIs that Drupal and WordPress provide. This “headless” architecture accesses data from the content management system and builds the page on the client site (e.g. the web browser) rather than having the Drupal or WordPress site’s theme layer build the page. This can provide a faster user experience, and web frameworks such as Angular and Ember have gained popularity for flexibility and ease of use by front-end developers and designers.
Since modern frontend development is very different than backend code and database programming, different toolsets and development process are needed to help keep frontend developers working productively. These tools incorporate code testing, optimization, and deployment, and have evolved separately from typical Drupal or WordPress backend PHP development tools. Pantheon strives to integrate smoothly with the tools that help developers work efficiently.
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 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 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.
