Seed

Help Scout's CSS Framework

Quick framework overview

"Build" code

aka. Sass stuff that doesn't actually get generated into the CSS

• Variables
• Functions
• Mixins
• Generators

(Order matters!)

Variables

The "config" files if you will. The variable files store all the properties that will be used throughout the framework.

Functions

Custom sass functions that take advantage of the sass maps used in variables. An example of a default sass function is lighten() or percentage().

Mixins

Helpful predefined methods that help generate CSS properties.

Generators

This are mixins that help (auto) create CSS classes. These serve a different purpose compared to mixins.

Mixins create attributes

Example:
color: black;

Generators create classes

Example:
.some-class {
  color: black;
}

"Style" code

aka. Code that actually compiles into the .css

• Base
• Components
• Objects
• Utilities

(Again, order matters!)

Base

These are the bare-bones base styles, such as html, img, headings, etc...

Components

Styling for components such as badges and buttons live here.

Objects

These are utility classes, but are used mainly for layout / composition. A great example is a grid system. Grid classes aren't components. They help arrange things on the page.

Utilities

These are helper classes with added omph to them. Most of them have !important on them, and are used to tweak + override styles.

Vendors

The vendor code currently lives in the project. Ideally, we'd want them brought in via bower install or npm install. However, this doesn't really work when the Seed framework itself is going to be bower installed.

Bourbon

http://bourbon.io/ Used to handle all vendor prefixing.

Normalize

https://necolas.github.io/normalize.css/ HTML Reset code :)