Skip to content

Latest commit

 

History

History
38 lines (25 loc) · 1.97 KB

README.md

File metadata and controls

38 lines (25 loc) · 1.97 KB
Raw

Ambience-Base-Components Style Structure

A CSS Architecture Framework

ABCSS is a way to organize the style rules in three directories. These directories are ambience, base and components (hence the name). These directories are alphabetically ordered from the most generic to the more specific.

This architecture is heavily influenced by the SMACSS Framework and its CSS Rules Categorization.

1. Ambience

Contains definitions of project basic characteristics, such as fonts, font sizes, color palette and other variables

Basic files:

  • _colors.sass: contains the project color palette as variables, to be used throughout the code.
  • _fonts.sass: imports the project font families.
  • _typography.sass: contains variables related to typography, such as font sizes for the headings and line height.

2. Base

Contains another set of basic structures, such as: normalizes or mixins.

Basic files:

  • _normalize.sass: stylesheet used to reset native browser properties.
  • _reusables.sass: contains structures that repeats throughout the project classes.
  • _typography.sass: set style for typography, such as headings and body font size, line height and font family using variables on ambience/typography.
  • _unclassed.sass: set styles for basic html tags, those who don't usually have a class.

3. Components

This is where you'll find most of the Sass files. Contains one Sass file for each individual component on the project.

The components philosophy used here is from RSCSS.

Example files:

  • _table-article.sass: style the component table-article.
  • _form-foreign.sass: style the component form-contact.
  • _list-download.sass: style the component list-download.

Components should always have the same name of the component's class they refer to. For example: the file for the component with the class .table-article should be _table-article.scss.