roobie Télécharger - roobie Téléchargement du code source

roobie

Données du site Web

1.0.0

Télécharger

roobie

Une collection de classes CSS pour vous permettre d'écrire une logique métier dans votre HTML. Créez facilement des applications Web et mobiles maintenables avec des centaines de classes CSS prédéfinies à portée de main. N'écrivez plus jamais de classes CSS passe-partout avec remplissage, marge, etc. Privilégiez plutôt les classes CSS utilitaires réutilisables. Cela rend les fichiers HTML plus gros, mais réduit le nettoyage du code et le code parasite lors de la suppression du contenu. Contrôlez toutes vos variables CSS à partir de thèmes centralisés pour assurer la cohérence dans toutes vos applications Web et changez facilement de thème. Augmentez la maintenabilité et la vitesse de développement.

Modules

Thèmes : utilisez nos thèmes prédéfinis ou créez notre modèle et créez le vôtre.
Mise en page : créez des mises en page simples et réactives avec les assistants CSS flexbox.
Utilitaires : utilitaires CSS pour vous garder là où vous appartenez, en écrivant une logique métier dans votre HTML.
Animations : une variété d'animations pour fournir un contenu clair et dynamique.
Composants : composants Web faciles à utiliser construits avec CSS et JavaScript.
Manipulation (à venir)
Icônes (à venir)

Exemples

Conteneur de 100 % de largeur avec une disposition flexbox en rangées centrées. Les éléments enfants ont chacun une taille de police différente.

roobie roobie roobie </div>">

 < div class =" div row center " >
    < span class =" fnts1 " > roobie </ span >
    < span class =" fnts2 " > roobie </ span >
    < span class =" fnts3 " > roobie </ span >
</ div >

Conteneur de 100 % de largeur avec une disposition flexbox en rangées. Les éléments enfants ont une marge de 2 intensités horizontalement. Les éléments enfants ont chacun 2 rembourrages d'intensité.

roobie roobie roobie </div>">

 < div class =" div row row-spacer2 " >
    < span class =" pad2 " > roobie </ span >
    < span class =" pad2 " > roobie </ span >
    < span class =" pad2 " > roobie </ span >
</ div >

Conteneur de 33% de largeur. Les éléments enfants ont chacun une marge verticale différente (haut et bas). Le dernier enfant a une bordure gauche d'intensité 2 avec une intensité bleue de 2.

roobie roobie roobie </div>">

 < div class =" div33 " >
    < span class =" mrgv1 " > roobie </ span >
    < span class =" mrgv2 " > roobie </ span >
    < span class =" mrgv3 bdrl2 bdr-blue2 " > roobie </ span >
</ div >

Conteneur d'une largeur de 50 % avec une disposition de boîte flexible en colonne centrée verticalement et horizontalement. Les éléments enfants ont chacun une épaisseur de police différente.

roobie roobie roobie </div>">

 < div class =" div50 col aln-center jst-end " >
    < span class =" fntw1 " > roobie </ span >
    < span class =" fntw2 " > roobie </ span >
    < span class =" fntw3 " > roobie </ span >
</ div >

Extrait de variables de thème.

[ theme = "light" ] {
    /*Base*/
    --primary : rgb ( 21 , 206 , 166 );
    --secondary : var ( --bg4 );
    /*Status*/
    --success : rgba ( 81 , 190 , 73 , 0.7 );
    --warning : rgba ( 235 , 119 , 42 , .7 );
    --danger : rgba ( 248 , 62 , 52 , .7 );
    --info : rgba ( 152 , 217 , 243 , .7 );
    /*Shade 1*/
    --white : rgb ( 240 , 240 , 240 );
    --black : rgb ( 20 , 20 , 20 );
    --grey : rgb ( 199 , 199 , 199 );
    --red : rgb ( 167 , 32 , 32 );
    --orange : rgb ( 243 , 162 , 11 );
    --yellow : rgb ( 221 , 221 , 25 );
    --green : rgb ( 19 , 172 , 82 );
    --blue : rgb ( 23 , 23 , 192 );
    --indigo : rgb ( 117 , 13 , 117 );
    --violet : rgb ( 184 , 88 , 184 );
    /*Shade 2*/
    --white2 : rgba ( 240 , 240 , 240 , .7 );
    --black2 : rgba ( 20 , 20 , 20 , .7 );
    --grey2 : rgba ( 199 , 199 , 199 , .7 );
    /*More shades omitted...*/
    /*Text*/
    --t1 : rgb ( 20 , 20 , 20 );
    --t2 : rgb ( 35 , 35 , 35 );
    --t3 : rgb ( 50 , 50 , 50 );
    --t4 : rgb ( 65 , 65 , 65 );
    --t5 : rgb ( 80 , 80 , 80 );
    --t6 : rgb ( 95 , 95 , 95 );
    /*Background*/
    --bg1 : rgb ( 240 , 240 , 240 );
    --bg2 : rgb ( 230 , 230 , 230 );
    --bg3 : rgb ( 220 , 220 , 220 );
    --bg4 : rgb ( 210 , 210 , 210 );
    --bg5 : rgb ( 200 , 200 , 200 );
    --bg6 : rgb ( 190 , 190 , 190 );
    /*And many more...*/
}