Read Order

This is the read/learn order I recommend you take.

Basic Functionality

  1. Start Here
  2. Basic

Core Features

  1. Component
  2. Element
  3. Attribute
  4. Non

Transition Features

  1. Transition
  2. State
  3. Animation

Utility Features

  1. Grid
  2. Media
  3. Helpers

Power Features

  1. Variable
  2. Merge
  3. Class

API Features

  1. Javascript API

General Sections

Each feature is made up of sub-features. If a sub-feature is ordered alphabetically, disregarding General and Feature, it means the read order is of little importance. If a sub-feature is not ordered alphabetically, it means the read order is important and it should be read from top to bottom. The same goes for the examples/topics within each sub-feature. For better or worse, I apologize to the alphabetical snobs out there, but I felt this was the best option. The following is a general overview of what each sub-feature entails.

General: An overview of the feature. It includes the syntax structure, the basic premise and functionality along with other bits of helpful information.

Key: Covers the Object key syntaxes that can be used to create/implement the feature.

Object: Details how multiple instances of a feature can be grouped together to share common properties and values.

Specific Option: As the name implies, options that are specific to the feature.

Target Option: Options that target the selector and are the same across all features.

Feature: Demonstrates the use of the feature in other features.

Every example has a Description which is a formal-ish explanation of said example. Additionally, some particular examples have Notes which can range from general thoughts to helpful tidbits and everything else in-between.

Syntax & Symbols




Code Examples

Every example has an interactive code example in both Stylus and YAML, and it’s my hope that somewhere in between the description, notes, and the interactive code example you will be able to find meaningful context. The following are some helpful tidbits of information about the interactive code examples.

Helpful Tidbits