Neato

Please note, that the Neat grid is no longer maintained and that this Drupal theme is only minimally maintained.

Neato is a lightweight Drupal base theme that lets you create a sub-theme based on Bourbon (a collection of Sass mixins), Neat (a semantic grid framework) and Bitters (a scaffold for Bourbon projects).

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 front-enders a good clean starting point and let you determine your markup and templates.

Tools included

• Neat: Provides a lightweight and flexible Sass grid that won't pollute your markup with tons of classes.
• Bourbon: Provides a library of Sass mixins and functions that are designed to make you a more efficient style sheet author.
• Bitters: Provides a basic set of pre-defined styles and Sass variables to be modified and extended to meet your design and brand requirements.
• Normalize: Provides a modern, HTML5-ready alternative to CSS resets.
• BrowserSync: Provides a live reload process to inject CSS changes literally upon typing into your browser. No manual page reload required.

Neato does not come bundled with any other 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.

Requirements

• npm: via installer or via package manager
• Gulp: npm install gulp-cli -g
• PHP 5.4+

Installation

See the README.txt for an installation guide. After enabling your newly created sub-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.

Usage

The Gulpfile will do the following tasks for you automatically:

• Compile Sass to CSS
• Clear theme cache with Drush whenever *.scss, *.js, *.tpl.php or *.html.twig files change
• Create CSS 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).

Sites using Neato

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

• PNCB
• Primary Health Care Performance Initiative
• Intermodal
• Intermodal Expo
• UIIA
• Velir

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