Introduction
This is the official Jade CSS Documentation and Tutorial. This document is divided into sections, or Topics, gathered together into Topic Groups. A brief overview of each Topic follows.
Getting Started: Introduction
This page contains brief overviews of each of the Topics mentioned in the navigation links.
Getting Started: Conventions
This page details the conventions used throughout this document.
Getting Started: Hello World
Presenting with one of the most well-known code examples, Hello World, this page lets you dive right into using Jade CSS.
Getting Started: Styling Text
This page introduces the Jade CSS package system and covers basic text styling using the fonts package.
Getting Started: Containers and Wrappers
This page introduces the building blocks of page layout in Jade CSS, the container and wrapper classes.
Getting Started: Sized Containers
This page extends upon the lessons of the previous Topic, containers and wrappers, by introducing variations of the full container collectively known as sized containers.
Getting Started: In-Grid and Out-Grid
In Jade CSS, decorations (such as borders, marginal spacing, etc.) are handled either as in-grid or out-grid decorations. This page illustrates the differences between the two, explains the techniques used behind the scenes for each, and notes different cases where one would be preferred over the other.
Getting Started: Using Boards
This page introduces the ubiquitous complement to the container and wrapper classes, a set of classes collectively known as boards. It also introduces package options that must be set for certain packages to function properly.
Getting Started: Device Filtering
This page demonstrates various methods for filtering page components, styles, etc. for different browsers using Jade CSS's core classes and the imports package.
Special Topics: Effective Gutters
Gutters frequently appear on page layouts, aiding readability by adding whitespace between vertical columns of text. This page demonstrates the proper method for implementing gutters in Jade CSS by use of the gutters package.
Special Topics: Layer Containers
An interesting variant of the container class, the layer container allows for page designers to stack segments of the page depth-wise—a task impossible to achieve in pure Jade CSS without the use of this class. This page introduces the layer container and demonstrates its proper implementation.
Special Topics: Horizontal Shifts
The shifts package loads classes similar to the layer container class in that they are trivial yet allow for components of design impossible to implement otherwise using only Jade CSS. This page introduces the shift classes and shows an example using a shift.
Reference: Jade Core Classes
This page catalogs the Jade CSS core classes, or classes defined by Jade CSS when no packages are selected.
Reference: Packages and Options
This page catalogs the various available Jade CSS packages, their respective options, and the classes that they respectively define.
Reference: Best Practices
This page briefly covers some of the best practices for developing with Jade CSS.