Neato - A Neat/Bourbon-Based Theme Framework for Drupal
I've been curious, recently, about the evolution of front-end grid systems and the increasing popularity of some of the newer examples like Neat and Bourbon. Front-end frameworks are pre-created software systems that allow for easier, more standards-compliant web design using CSS. Most of theseframeworks contain at least a grid - a column system to facilitate the distribution of different elements according to the established design.
Through my research around the web and in various tech communities over the last 6 months I've discovered that front-end developers are trending away from using large frameworks like Zurb's Foundation or Twitter's Bootstrap. The core of the argument revolves around developers only wanting a solid base grid system without all the extraneous, bloat features that never get used.
Enter Neat, a great grid system foundation, written in a concise, semantic manner - utilizing natural language principles, thus making the code much more readable and understandable. It focuses on doing one thing well - providing a flexible CSS framework that works on a variety of screen resolutions. The makers of Neat have also created an optional standalone SASS mixin library, Bourbon. Together, they provide a powerful set of tools for creating semantic responsive markup & style, in addition to enabling the flexibility to mix in supplementary libraries and components for slideshows, accordions, modals, and other nifty UI goodies. In short, Neat provides only what you need, the rest is up to you.
Velir's front-end team began standardizing their stack on Neat and Bourbon in 2014. Despite being one of the lead maintainers on the Drupal Zurb Foundation theme, I was soon convinced that Neat is the way to move forward given the importance of fast prototyping and freedom in using desired components. I have used Foundation on dozens of projects yet cannot recall the number of times the included plugins were used to their fullest extent - we usually ended up having to employ various external libraries to solve specific UI issues. Hence, it was easy to see why it is preferred to start small and add on, instead of starting large and removing or ignoring large swaths of the framework.
A natural next step was to create a Neat-based theme stack in Drupal that would allow a smooth transition of prototypes to the CMS and enable the use of all the same functionality with minimal changes. I began working on the Neato theme when I joined Velir. I gathered feedback on what tools and features front-end developers were using and how they were using them. I started out by incorporating a set of Gulp tasks to make theme development easier and provided bonus features like cache clearing and utilization of BrowserSync, so that these tedious tasks are handled behind the scenes. Simple tasks such as clearing Drupal CSS/JS caches when SASS and JS are compiled and minified are an added efficiency bonus (and as Drupal themers know, something we always forget to do ourselves!).
The theme provides better device resolution support and greatly increases the efficiency in getting projects off the ground. The end result is a pure implementation that focuses more heavily on how you can use the theme as opposed to how you have to use it. After being out in the wild for two months, the Neato theme has been downloaded over 875 times. It comes in both Drupal 7 and Drupal 8 flavors, a Drush task to quickly generate a subtheme, an example page-front template to demonstrate what is possible with the theme, and a ready to go Gulp workflow. It is barebones and meant to act as a catalyst for building hybrid stack themes for projects (or inspire new themes based on it) and the recent popularity around these new frameworks makes it a great starting point for developers looking for a new toolset in Drupal.
The theme can be reviewed and downloaded here: Neato theme on Drupal.org. I'd love to hear feedback on the tool or help out with any questions on using it, so feel free to get in touch via the comments below!