Röcssti-Builder, pour construire votre CSS

Afin d’automatiser le calcul de certains points comme le rythme vertical sans recourir aux versions avec pré-processeurs de Röcssti, vous pouvez utiliser cet outil ci-dessous. Cela vous permettra de télécharger une CSS déjà préparée aux petits oignons.

Général

Langue du fichier CSS :

Taille de fonte par défaut : pixels

Line-height par défaut :

Préfixe des classes :

Activer le RTL

Activer la césure

Activer le reset sur html

Activer le reset sur input/button/textarea/etc.

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

Breakpoints principaux

Breakpoint tablettes : pixels

Breakpoint mobiles : pixels

Breakpoint « petits » mobiles : pixels

Typographie

Type de rythme vertical :

Unités pour la typo :

Font stack :

Titres

Rentrez les valeurs en pixels, elles seront calculées dans l’unité choisie.

Taille des titres de niveau 1 h1 : pixels

Taille des titres de niveau 2 h2 : pixels

Taille des titres de niveau 3 h3 : pixels

Taille des titres de niveau 4 h4 : pixels

Taille des titres de niveau 5 h5 : pixels

Taille des titres de niveau 6 h6 : pixels

Autres classes

Taille de la classe .smaller : pixels

Taille de la classe .small : pixels

Taille de la classe .big : pixels

Taille de la classe .bigger : pixels

Taille de la classe .biggest : pixels

Couleurs

Couleur de fond du body :

Couleur du body :

Couleur des liens :

Couleur des liens (survol) :

Couleur d’alerte (classe .alert) :

Couleurs principales

Nom de la classe 1 :
(génèrera .color-<nom de la couleur> et .bg-<nom de la couleur>)

Valeur 1 :

Nom de la classe 2 :
(génèrera .color-<nom de la couleur> et .bg-<nom de la couleur>)

Valeur 2 :

Nom de la classe 3 :
(génèrera .color-<nom de la couleur> et .bg-<nom de la couleur>)

Valeur 3 :

Nom de la classe 4 :
(génèrera .color-<nom de la couleur> et .bg-<nom de la couleur>)

Valeur 4 :

Nom de la classe 5 :
(génèrera .color-<nom de la couleur> et .bg-<nom de la couleur>)

Valeur 5 :

Layout (flottants)

Activer les classes clearleft/clearright

Activer la classe clearhidden

Activer la classe clearfix

Autres

Couleur de la balise hr :

Épaisseur de la balise hr : pixels

Épaisseur de la bordure des input : pixels

Largeur par défaut des input/select/textarea : pixels

Couleur de la bordure des input :

Couleur de fond de la classe .button :

Couleur du texte de la classe .button :

Responsive (helpers)

Générer les classes ontablet-alignleft/alignright/aligncenter

Générer les classes onmobile-alignleft/alignright/aligncenter

Desktop

Générer les margin : margin-top margin-right margin-bottom margin-left margin

Valeurs de margin :
(séparées par des virgules, ex. : 0,0.5,1,2)

Générer les padding : padding-top padding-right padding-bottom padding-left padding

Valeurs de padding :
(séparées par des virgules, ex. : 0,0.5,1,2)

Tablets

Générer les margin : margin-top margin-right margin-bottom margin-left margin

Valeurs de margin :
(séparées par des virgules, ex. : 0,0.5,1,2)

Générer les padding : padding-top padding-right padding-bottom padding-left padding

Valeurs de padding :
(séparées par des virgules, ex. : 0,0.5,1,2)

Mobile

Générer les margin : margin-top margin-right margin-bottom margin-left margin

Valeurs de margin :
(séparées par des virgules, ex. : 0,0.5,1,2)

Générer les padding : padding-top padding-right padding-bottom padding-left padding

Valeurs de padding :
(séparées par des virgules, ex. : 0,0.5,1,2)