ImmobilienScout24

core.css v0.3.0 – Documentation

OOCSS Classes

  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 a whole construct, but rather define a single aspect of it. They can then be combined freely with other classes to create complex modules which do not need to be 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 a breakdown of all available OOCSS classes.