Skip to main content

Drupal Theming

Reusable style guide components using field formatters and twig embed

by Jack Taranto /

At PNX, style guide driven development is our bag. It’s what we love: building a living document that provides awesome reference for all our front end components. And Drupal 8, with its use of Twig, complements this methodology perfectly. The ability to create a single component, and then embed that component and its markup throughout a Drupal site in a variety of different ways without having to use any tricks or hacks is a thing of beauty.

Read the full post

Performance improvements with Drupal 8 Libraries

by Rikki Bochow /

For a long time I’ve been compiling my Sass into a single CSS file - styles.css, but recently, with our component based design/frontend process and Drupal 8’s lovely Library system I’ve been wondering if the single file was still a good idea. Looking at the amount of unused CSS loading into any given page was a little bit painful.

Read the full post

Building a layout system for Paragraphs

by Rikki Bochow /

A recent Drupal 8 project of ours had some great requirements around it’s landing pages, aimed at reusing existing components in a range of layouts and combinations. Paragraphs quickly established itself as the site-building tool of choice and Flexbox always wins for me as the CSS grid/layout approach, so we looked at how the two could be combined to give the client the flexibility they needed, without over-complicating the editor experience.

Read the full post

Base themes without the bloat

by Rikki Bochow /

Base themes in Drupal are incredibly useful but often add bloat to the finished sub-theme when care isn’t taken to remove unnecessary css files, or files that are 5% used and 95% overridden. When porting aGov to Drupal 8 we took the opportunity to improve how it’s theme inheritance is managed, making it easier to create trim, lightweight sub-themes.

Read the full post

Skinning HTML emails with Drupal using an existing front-end

by Sam Becker /

A requirement that comes up from time to time is being able to use content stored in Drupal and produce rich HTML emails. In a lot of cases the design of these emails matches the design of the existing, already implemented front-end website.

In a recent project, we explored ways of creating HTML email’s which wouldn’t require us to start from scratch and would also evolve as the website’s look and feel did. Our design goals were thus:

  • Use the existing website’s CSS to skin the emails.
  • Use existing Drupal site-building tools to construct the markup for these emails.
  • Allow admins to easily create and preview HTML emails.
Read the full post

So many ways to hide

by Rikki Bochow /

Generally speaking hiding content goes alongside a bit of javascript that unhides the content under certain circumstances (think hamburger menu). Sometimes the content improves accessibility but is considered visual noise (says the designer). So as the developer you have a lot of ways to approach this.

Read the full post

Getting started with front-end automation: An intro to npm

by john.albin /

At PreviousNext this past year, we have started using a style-guide-centric approach that matches our Agile development practices. We write our styles and markup as components and then use automation to build, test, and add them to a style guide.

Since we are a Drupal shop, you might expect that all our automation is done with PHP, but we’ve found, on the front-end side, the best tools are written in Node.js. Grunt, Gulp, Yeoman, Bower, Eslint and more are all written in Node.js and installed and distributed with its package manager, npm.

Read the full post

Automated style guides with KSS-node

by john.albin /

During PreviousNext’s weekly developers meeting I recently gave a lightning talk about how to use kss-node to auto-generate a website style guide. If you’ve even tangentially followed front-end development, you’ll find that this is yet-another blog post describing “project A implementing technology B with hip, new language/framework C.”

But kss-node is really cool and useful, especially if you understand how it fits into the larger picture of the new web development process. Fortunately, my previous post provides that big picture, so if you’d like to understand how Agile is turning web development inside-out and how style-guide-driven development is the new website development workflow, please go read that first. Then head back here for the screencast to get you started with kss-node.

Read the full post

Pagination