Röcssti-Builder, to build your CSS

To automate calculation of some points (as vertical rythm) without using pre-processors versions of Röcssti, you may use this tool below. This will allow you to download a CSS with some work already done.

General

Language of CSS file:

Default font size: pixels

Default line-height:

Prefix for classes:

Activate RTL option

Activate hyphens

Activate reset on html

Activate reset on input/button/textarea/etc.

Activate fixes pour Internet Explorer (fallbacks table-layout, etc.).

Main breakpoints

Tablet breakpoint: pixels

Mobile breakpoint: pixels

Tiny mobile breakpoint: pixels

Typography

Type of vertical rythm:

Units for typo:

Font stack:

Titles

Enter values in pixels, they will be computed into the chosen unit.

Size of level 1 headings h1: pixels

Size of level 2 headings h2: pixels

Size of level 3 headings h3: pixels

Size of level 4 headings h4: pixels

Size of level 5 headings h5: pixels

Size of level 6 headings h6: pixels

Other classes

Size of .smaller class: pixels

Size of .small class: pixels

Size of .big class: pixels

Size of .bigger class: pixels

Size of .biggest class: pixels

Colors

body background color:

body color:

Link color:

Link color (hover, focus):

Alert color (.alert class):

Main colors

Name of class color #1:
(generates .color-<color name> and .bg-<color name>)

Color 1 value:

Name of class color #2:
(generates .color-<color name> and .bg-<color name>)

Color 2 value:

Name of class color #3:
(generates .color-<color name> and .bg-<color name>)

Color 3 value:

Name of class color #4:
(generates .color-<color name> and .bg-<color name>)

Color 4 value:

Name of class color #5:
(generates .color-<color name> and .bg-<color name>)

Color 5 value:

Layout (floats)

Activate classes clearleft/clearright

Activate class clearhidden

Activate class clearfix

Other

Color of hr tag:

Height of hr tag: pixels

Size of the border of input tags: pixels

Default with of input/select/textarea: pixels

Border color of input:

Background color of .button class:

Text color of .button class:

Responsive (helpers)

Generate classes ontablet-alignleft/alignright/aligncenter

Generate classes onmobile-alignleft/alignright/aligncenter

Desktop

Generate margin: margin-top margin-right margin-bottom margin-left margin

margin values:
(coma-separated, ex.: 0,0.5,1,2)

Generate padding: padding-top padding-right padding-bottom padding-left padding

padding values:
(coma-separated, ex.: 0,0.5,1,2)

Tablets

Generate margin: margin-top margin-right margin-bottom margin-left margin

margin values:
(coma-separated, ex.: 0,0.5,1,2)

Generate padding: padding-top padding-right padding-bottom padding-left padding

padding values:
(coma-separated, ex.: 0,0.5,1,2)

Mobile

Generate margin: margin-top margin-right margin-bottom margin-left margin

margin values:
(coma-separated, ex.: 0,0.5,1,2)

Generate padding: padding-top padding-right padding-bottom padding-left padding

padding values:
(coma-separated, ex.: 0,0.5,1,2)