roobie Unduh - unduh kode sumber roobie

roobie

Data situs web

1.0.0

Unduh

roobie

Kumpulan kelas CSS untuk membuat Anda terus menulis logika bisnis dalam HTML Anda. Bangun aplikasi web & seluler yang mudah dikelola dengan 100-an kelas CSS siap pakai di ujung jari Anda. Jangan pernah lagi menulis kelas CSS boilerplate dengan padding, margin, dll. Sebaliknya, pilihlah kelas CSS utilitas yang dapat digunakan kembali. Hal ini membuat file HTML lebih besar, namun mengurangi pembersihan kode dan kode tersesat saat menghapus konten. Kontrol semua variabel CSS Anda dari tema terpusat untuk konsistensi di seluruh aplikasi web Anda dan ganti tema dengan mudah. Meningkatkan pemeliharaan dan kecepatan pengembangan.

Modul

Tema: Gunakan tema bawaan kami atau buat sendiri templat kami.
Tata Letak: Buat tata letak yang sederhana dan responsif dengan bantuan CSS flexbox.
Utilitas: Utilitas CSS untuk menjaga Anda tetap berada di tempat Anda berada, menulis logika bisnis dalam HTML Anda.
Animasi: Berbagai animasi untuk menghadirkan konten yang bersih dan dinamis.
Komponen: Komponen web yang mudah digunakan yang dibuat dengan CSS & JavaScript.
Manipulasi (Segera hadir)
Ikon (Segera hadir)

Contoh

Kontainer lebar 100% dengan tata letak flexbox baris tengah. Masing-masing elemen anak memiliki ukuran font yang berbeda.

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 >

Kontainer lebar 100% dengan tata letak baris flexbox. Elemen anak memiliki margin intensitas 2 secara horizontal. Elemen turunan masing-masing memiliki 2 bantalan intensitas.

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 >

wadah dengan lebar 33%. Masing-masing elemen anak memiliki margin vertikal yang berbeda (atas dan bawah). Anak terakhir mempunyai intensitas batas kiri 2 dengan intensitas biru 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 >

Wadah dengan lebar 50% dengan tata letak kolom flexbox yang terpusat secara vertikal dan ujung horizontal. Masing-masing elemen anak memiliki bobot font yang berbeda.

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 >

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