Descarga roobie - Descarga del código fuente roobie

roobie

Datos del sitio web

1.0.0

Descargar

roobie

Una colección de clases de CSS para que sigas escribiendo lógica empresarial en tu HTML. Cree fácilmente aplicaciones web y móviles fáciles de mantener con cientos de clases CSS prediseñadas al alcance de su mano. Nunca más vuelvas a escribir clases CSS repetitivas con relleno, margen, etc. En su lugar, prefiera las clases CSS de utilidad que sean reutilizables. Esto hace que los archivos HTML sean más grandes, pero reduce la limpieza de código y el código perdido al eliminar contenido. Controle todas sus variables CSS desde temas centralizados para lograr coherencia en todas sus aplicaciones web y cambie de tema fácilmente. Aumentar la mantenibilidad y la velocidad de desarrollo.

Módulos

Temas: utilice nuestros temas prediseñados o bifurque nuestra plantilla y cree los suyos propios.
Diseño: cree diseños simples y responsivos con los asistentes CSS de Flexbox.
Utilidades: utilidades CSS para mantenerte donde perteneces, escribiendo lógica de negocios en tu HTML.
Animaciones: una variedad de animaciones para ofrecer contenido limpio y dinámico.
Componentes: componentes web fáciles de usar creados con CSS y JavaScript.
Manipulación (Próximamente)
Íconos (Próximamente)

Ejemplos

Contenedor de 100% de ancho con un diseño de caja flexible de fila centrada. Cada uno de los elementos secundarios tiene un tamaño de fuente diferente.

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 >

Contenedor de 100% de ancho con un diseño de fila flexible. Los elementos secundarios tienen un margen de intensidad 2 horizontalmente. Cada uno de los elementos secundarios tiene 2 rellenos de intensidad.

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 >

Contenedor de 33% de ancho. Cada uno de los elementos secundarios tiene un margen vertical diferente (superior e inferior). El último niño tiene un borde izquierdo de intensidad 2 con intensidad azul 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 >

Contenedor de 50 % de ancho con un diseño de caja flexible de columna final centrada verticalmente y horizontalmente. Cada uno de los elementos secundarios tiene un peso de fuente diferente.

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 >

Fragmento de variables del tema.

[ 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...*/
}