Neato is a theme based on the Neat grid system, incorporating Bourbon and Bitters to make grid theming with semantic markup easy and sensible.

Gulp and Bower are also included to assist in setting up for theme editing, and are required to pull in and manage assets. A Drush command and STARTER theme is included to get started right away.

This framework aims to let you determine the nuts and bolts of how your theme works and responds via the power of the Neat grid system. Columns, sizing, and stacking is declared via SASS mixins, instead of having extensive class naming schemes in the HTML, leading to a more semantic maintainable result. The goal is to provide themers with a good clean starting point and let you determine your markup and template(s).

Neato does not come bundled with any JS plugins or files, leaving it up to the developer to determine the components they wish to use instead of stacking them into the build. This makes it easier to work with your own hybrid framework, using this as a base and pulling in what you choose for UX/UI components like sliders, form validators, modals, etc.

Upon enabling the theme, you will see an example page. This is a template in the theme, and will overtake your designated front page. It is simply there to demonstrate how simple theming can be with Neat, using pre-built components for demonstration from Refills.

The Gulpfile will do the following tasks for you automatically:

  • Compile SASS to CSS
  • Clear theme cache with Drush whenever SCSS, JS, TPL, or Twig files change
  • Create SASS source maps as part of the output
  • Uglify JS files
  • Create JS source maps

Users can also override most of the default Gulpfile.js settings by providing a config.js file of their own (an example.config.js is included).

All of the assets are pulled in via Bower and the parent Neato theme references them, so you do not need to worry about them in the sub theme. By default, normalize.css is included, then your theme style. Whenever there are updates to Bourbon, Neat, or Bitters, simply run bower update to update those packages and keep rolling along.

Sites using Neato

The below sites were built on Neato, demonstrating what is capable:

Mentioned in Zivtech's "Top 5 Drupal 8 Ready Themes" and Drupal 8 Theming

Supporting organizations: 
Developed and sponsored by

Project Information