bga-style

Styles to jumpstart your BGA page, built in SCSS, modeled after Inverted Triangle CSS (ITCSS).

Using in your project

// Load BGA fonts
@import url('https://use.typekit.net/mqd7hhp.css');

// Load BGA styles
@import '~bga-style/scss/main';

// Or, resolving from properties sass or style in package.json
@import '~bga-style';

Developing

yarn dev

Structure

ITCSS is a methodology developed by Harry Roberts that models our project as an upside-down triangle of increasing specificity.

Each layer is organized into its own subdirectory (e.g. layers/settings) with a hack-ish index file (e.g. layers/settings/_.scss) and a README.

1. Settings — Global settings

2. Tools — Global mixins and functions

3. Generic — High-level styles (e.g. CSS resets, global box-sizing)

4. Elements — Bare, unclassed HTML elements (e.g. p, h1)

5. Objects — Generic class-based selectors (e.g. .wrapper, layout classes)

6. Components — Class-based selectors styling specific UI components (e.g. .pullquote)

7. Trumps — Explicit rules, usually !important (e.g. .text-center)