Module colour schemes are defined via maps, located in _variables.scss

$themes: (
  mist: (
    header: #DCFAC0,
    text:   #00968B,
    border: #85C79C
  ),
  spring: (
    header: #F4FAC7,
    text:   #C2454E,
    border: #FFB158
  ),
  // ...
);

Module elements are defined and located in _theme_module.scss

@mixin themed-header($theme-name) {
  h1 {
    color: map-get(map-get($themes, $theme-name), header);
  }
}

1. Accordion
2. Tabs
3. Accordion to Tabs
4. Slideshow
5. Carousel
6. Alerts

The base of the framework should work of a config file for main variables and styles.
Such as:

Colors
Color Themes/Schemes
Fonts
Typography
Links

This then be powered by mixins/functions for output.

It may be too opinionated but it may be plausible to config objects in a similar manner. e.g. buttons.

https://github.com/filamentgroup/criticalcss

https://github.com/bendc/frontend-guidelines

http://editorconfig.org/

The aim is to change this to a _config.scss partial - hopefully we can achieve this

              _            _                   
             | |          | |                  
  _ __   __ _| | _____  __| |___  __ _ ___ ___ 
 | '_ \ / _` | |/ / _ \/ _` / __|/ _` / __/ __|
 | | | | (_| |   <  __/ (_| \__ \ (_| \__ \__ \
 |_| |_|\__,_|_|\_\___|\__,_|___/\__,_|___/___/

Global

Using the BEM methodology for naming conventions and SMACSS methodology combined to form an easy to read and understand class naming system.

.block__element--modifier 

Or we could be using BEVM

block__element--variation -modifier

Chainable Modifiers

Chainable modifiers are denoted by a leading hyphen -, a namespace and a descriptor for the modification.

JavaScript / jQuery

JS Hooks are prefixed with js- and do not have any styles. Their whole purpose is to be used in JavaScript to target elements in the DOM.

Layouts

Layouts use the prefix l- these classes should never have visual styling to applied at root.

class names:

.l-flip
.l-stacked
.l-split
.l-bleed
.l-grid
.l-hero
.l-panel
.l-reverse
.l-order

States

States use the prefix is- these classes are used to change a state of an element.

class names:

.is-active
.is-hidden
.is-disabled

State Directions

State direction use the same prefix is- and have a set of key names for chaining to the Layout helper e.g. l-hero is-center.

class names:

.is-top
.is-right
.is-left // default
.is-bottom
.is-centered

.is-top-right
.is-top-left
.is-centered-right // default
.is-centered-left // default
.is-bottom-right
.is-bottom-left

Sizing

Size use the prefix -size- followed by the size name e.g -size-medium

class names:

.-size-tiny
.-size-xsmall
.-size-small
.-size-medium
.-size-large
.-size-xlarge
.-size-hero

Alerts

Alerts use the prefix alert these classes are used to style a state of an element.

class names:

.alert
.-type-success
.-type-info
.-type-warning
.-type-danger

// SCSS

.alert {

    &.-type-success {
        // add styles here
    }
}

Positioning Elements

Food for thought as in naming locations on a page?
Gantry

C5

typography

Google Tag manager JS hook

.js-gatm-calltoaction

Maybe over the top but could look into: https://github.com/corysimmons/lost

Scaffold ( subject to change over the course of the build out )
Build Out ( base, patterns, components etc )
Review
Compile ( collate into framework)
Review
Finesse ( config and tools )
Review
Test
Document ( collate documentation and normalise )

We need a naked component template to follow.

E.g. html, sass, readme with stucture to follow, and perhaps examples/demo?

https://www.gitbook.com/