Frontend Automation

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.


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.

Workshops for Dev Teams

Looking to optimize your dev team and streamline your internal workflows? Pantheon delivers custom workshops to help development teams master our platform and improve their internal DevOps. These tailored trainings are delivered in-person or remotely and designed just for your team!

SEE WORKSHOPS
  • ASSISTED MIGRATIONS

    We will migrate your (qualified) sites to Pantheon for free.

  • DEVOPS WORKSHOPS

    Customized trainings made to fit your team’s needs.

  • PANTHEON EXPERTS

    Learn from Pantheon ACEs, our top technical resources.

SEE WORKSHOPS

Additional Resources

Let’s get in touch

855-927-9387