Technical details

CSS architecture

The Standards CSS is built using the Sass preprocessor. This documentation and the Standards npm package are compiled with node-sass.

For maximum compatibility in your project, use node-sass 4.3.0 or higher.

Spacing units are defined as rem or em units so they scale appropriately with text size. These values are defined in the /sass/utils/_variables.scss partial. These spacing units help maintain a consistent visual flow and should be used as much as possible. Pixels values are only used for detail work.

You can use the following variables in your sass files to maintain consistent spacing.

$spacing-none: 0;
$spacing-extra-small: .25rem;
$spacing-small: .5rem;
$spacing-medium: 1rem;
$spacing-large: 2rem;
$spacing-extra: 4rem;
$spacing-extra-large: 6rem;
$spacing-extra-extra-large: 10rem;

Customization

The Standards CSS is intentionally opinionated. Using the Standards in your project means you are committing to a specific aesthetic. As such, theming is not currently available.

Class names

Any of the class names in the Foundation 6 documentation are also available for use in the Standards.

Other useful classes


Top