Gesso Stylesheet Primer Coat

A SASS Baselayer

Gesso is a collection of stylesheet definitions, parameters and partials packaged together to lay a baselayer for a new project. Gesso contains font stacks, a baseline typography grid, default styling for forms and tables and partials for responsive images and unique styling of certain typographic features such as all caps and ampersands.

SASS, Compass and Susy Responsive Grids

Gesso is built in the SASS CSS pre-processor language and relies on the Compass framework and Susy responsive grid to make easy work of things like non-standardized CSS3 features and nested, responsive grid patterns.

DRY Design: Inheritance and Partials

Based on the same philosophy of DRY inheritance as the original CSS Gesso baselayer, the SASS project utilizes a base stylesheet to define common variables and mixins which get inherited into a separate screen stylesheet. The screen stylesheet defines a visual language for elements to work on their own which get overriden by classes intended for global use and are in turn overriden on a case-by-case basis on specific pages or templates.

Cross-Platform Font Stacks

Gesso includes partials for several cross-platform font stacks which are designed to match up well between operating systems (Mac, Windows, Linux and Android). The font stacks include a grotesk sans font stack based on Helvetica Neue, a serif font stack based on Hoefler Text, a humanist sants font stack based on Lucida Grande, and a monospace font stack based on Menlo Regular.

Built with Django Newproj in Mind

Developed to be used with the Django Newproj project template and development environment, Gesso references specific markup conventions introduced by the template structure of Django Newproj such as the convention of wrapping form errors in a <span> of a certain class within the <label> element.

The Original: Gesso CSS Baselayer

The original Gesso CSS baselayer project is no longer actively maintained but still available on GitHub for certain light-duty projects.

Download

Gesso SASS Project

Source @ GitHub

Installation and Usage

See the Readme file for installation instructions.

Gesso CSS Project

Source @ GitHub

Installation and Usage

See the Readme file for installation instructions.