Core Framework v1.2.0 – Documentation

Building Blocks

Many of the Core styles, such as the background, font, and width definitions, come in finely grained, single-purpose classes that you can use as building blocks to achieve the layouts you desire.

  1. Principles
  2. Class Name Structure

Principles

The Core style set follows the principle of “object-oriented CSS”, meaning that individual classes will not style whole constructs, but rather define single aspects about them. These classes can then be combined freely with other classes to create complex modules which need not have been predefined in the CSS.

The CSS, in turn, is both generally free of repetitions and more flat, making it more maintainable and comprehensible.

Class Name Structure

Class names in the Core style set follow a simple pattern that is a combination of the aspect of an element that is being targeted (such as the font, the background, etc.), and a description of how said property is meant to be changed.

Aspect

Properties are clustered based on what general part of the element is being changed. Such aspects may be the element's font, background, borders, widths, shadows, etc.

So, if you want to change something about the font, you will want to use one of the classes that begin with the fragment font-.

Effect

Now that you have your aspect all set, you can append the effect you want to achieve.

The font, for example, can be made smaller or bigger, have its font family changed, its line height increased or decreased, and so forth.

Assuming you want to make your font really large, you could give your element the class font-xl. Or maybe you want to make it bold by adding the class font-bold.
Or you could just add both classes and make it both large and bold. I know, it's amazing.

Please see the following pages for extensive examples on how to use the building block classes.