A styleguide driven approach to building a custom less library.

• Comprehensive Easily readable
• Coherent Max level of factorization
• Modest The right amount of utilities
• Responsive Breakpoints for main devices

• Utility classes: .u-class
• Components: .component, .otherComponent, .component-subcomponent
• Variations: .component--variation, .component--otherVariation
• States: .component.is-state, .component.has-state
• Responsive: .breakpoint_class, .onlyBreakpoint_class
• Javascript only: .js-javascriptOnly

Note: it is possible for components to solely exist in a variegated form.

Use of Normalize.css.

It is recommanded to define a color palette at the very beginning of the configuration. Use of numbers to describe the colors of the palette and their variations.

@palette-1, @palette-1-1, @palette-1-2, @palette-2-1, @palette-3

For convenience, when the palette is defined, it is recommanded to define custom color helpers using the palette elements.

@color-primary: @palette-a, @color-primary--hover: @palette-a--dark, @color-white: @palette-e--light

.h--1 to .h--6

Define the behavior of buttons

Categories:

• Default
• Alternative
• Danger
• Simple
• Icon
• Disabled

.gen-btn(primary, @palette-a, @palette-a--light) outputs .btn--primary with main color @palette-a and alternative color @palette-a--light.

Define the behavior of svg font icons

Define different spacing methods. They should exist only with their size variations.

Possible choices:

• .space--* (default, 4 sides)
• .spaceX--* (horizontal sides)
• .spaceY--* (vertical sides)
• .spaceTop--*, .spaceBottom--*, .spaceLeft--* or .spaceRight--*

.space--1, .spaceBottom--3, .spaceX--5

Define a responsive grid system. It should exist only with its size variations. Based on the utility class width.

A set of utility classes.

Categories:

• Generic (clearfix, relative, absolute, ...)
• Background
• Display
• Float
• Text
• Width base 100 (.u-width20) and width base 12 (.u-width4b12)
• Z-Index
• Palette

.gen-paletteUtil(a) outputs .u-paletteTextA { color: ... } and .u-paletteBackgroundA { background-color: ... }.

• Spaces: 1 (min) to 5 (max)
• Grids: 1 (min) to 12 (max)
• Headings: 1 (max) to 6 (min)
• Buttons: small (min) to big (max)
• Form elements: small (min) to big (max)

.spaceX--1, .h--2, .btn--small, .grid--4

*default

Should have responsive sizes:

• Spaces
• Grids
• Containers
• Utilities: float, display

.md_spaceY, .onlySm_grid--1, .md_container, .onlyLg_u-floatLeft, .xl_u-hide

todo

The idea of this project is not to be used 'as is', it should be forked and turned into a living, customised tool.

npm install && bower install

grunt

The styleguide is available at the address http://localhost:9001/.