Gesso

Gesso is a Sass-based starter theme that outputs accessible HTML5 markup. It uses a mobile-first responsive approach and leverages SMACSS to organize styles as outlined in the Drupal 8 CSS architecture guidelines. This encourages a component-based approach to theming through the creation of discrete, reusable UI elements.

For a full description of this theme, view the Gesso project page. To submit bug reports or feature requests, visit the Gesso issue queue.

Requirements

This theme requires the following Drupal modules:

• HTML5 Tools: Provides HTML5 elements for use in fields and forms, updates Drupal core markup to match HTML5 standards, and streamlines CSS and JavaScript tags.

• Magic: Provides advanced CSS/JavaScript handling and includes theme development enhancements.

If you want to take advantage of Sass, Ruby is required to compile it into CSS using Compass. Check out the README within the sass directory for more information.

Recommended modules

• Blockify: Exposes a number of core Drupal elements, traditionally found in page.tpl.php, as blocks. This theme does not include these items in page.tpl.php to allow greater flexibility in where they can be placed.

• Clean Markup: Allows you to control the markup of blocks, panel regions, and panel panes via the UI.

• Modernizr: Provides deep integration with the Modernizr JS library, allowing modules and themes to register tests and load additional assets as needed.

Installation

1. Place the Gesso theme in your site’s theme directory. (e.g., sites/all/themes/gesso) Read documentation on installing themes for more information.

2. Because Gesso is a starter theme, it is not meant to be used directly. Instead, you should rename the Gesso directory or copy its contents to a new custom theme directory.

   The easiest way to accomplish this is to use Drush. Type drush gesso --help for more information.

   If you can’t use Drush, then manually replace all instances of 'gesso' within this directory with a machine-readable name of your choice, including folder names, filenames, and all occurences within files. This custom name must start with a letter and may only contain lowercase letters, numbers, and underscores.

3. Edit the .info file and update the theme name and description. You can also change the screenshot image (images/screenshot.png) shown on the Appearance admin page.

Configuration

Gesso includes several theme-specific settings for managing classes output by Drupal, which you can change at admin/appearance/settings/gesso.

Non-Drupal configuration files

• config.rb: Ruby configuration file used for Compass compilation of Sass files.

• Gemfile: Used by Bundler. Running bundle install will install the correct versions of all required dependencies.

• Gemfile.lock: Generated by Bundler after running bundle install. Lists the exact versions installed, according to the minimum requirements set in the Gemfile.

Sass dependencies

Bundler is used to manage the following dependencies and minimum required Ruby Gem versions. (Similar to Bower, but for Ruby Gems.) To learn more about installing Bundler and compiling Sass, check out README.md within the sass directory.

• Breakpoint: Easy to write media queries.

• Compass: Open-source Sass framework.

• Sass: CSS on steroids. Adds nested rules, variables, mixins, selector inheritance, and more.

• Sass Globbing: Adds glob- based imports to Sass.

• Singularity: Grid-based layout system.

Maintainers

The Gesso theme is maintained by Dan Mouyard (@dcmouyard) and Corey Lafferty (@coreylafferty).

Please use the Github issue queue: https://github.com/forumone/gesso/issues