roobie ดาวน์โหลด - roobie ดาวน์โหลดซอร์สโค้ด

roobie

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

roobie

คอลเลกชันของคลาส CSS เพื่อให้คุณเขียนตรรกะทางธุรกิจใน HTML ของคุณ สร้างแอปพลิเคชันบนเว็บและมือถือที่บำรุงรักษาได้ง่ายด้วยคลาส CSS ที่สร้างไว้ล่วงหน้ากว่า 100 คลาสเพียงปลายนิ้วสัมผัส ไม่ต้องเขียนคลาส CSS สำเร็จรูปที่มีช่องว่างภายใน ระยะขอบ ฯลฯ อีกเลย แทนที่จะสนับสนุนคลาส CSS ยูทิลิตี้ที่สามารถนำมาใช้ซ้ำได้ สิ่งนี้ทำให้ไฟล์ HTML มีขนาดใหญ่ขึ้น แต่ลดการล้างโค้ดและโค้ดที่หลงทางเมื่อลบเนื้อหา ควบคุมตัวแปร CSS ทั้งหมดของคุณจากธีมแบบรวมศูนย์เพื่อความสอดคล้องทั่วทั้งเว็บแอปของคุณและสลับธีมได้อย่างง่ายดาย เพิ่มความเร็วในการบำรุงรักษาและการพัฒนา

โมดูล

ธีม: ใช้ธีมที่สร้างไว้ล่วงหน้าหรือแยกเทมเพลตของเราและสร้างธีมของคุณเอง
เค้าโครง: สร้างเค้าโครงที่เรียบง่ายและตอบสนองด้วยตัวช่วย flexbox CSS
ยูทิลิตี้: ยูทิลิตี้ CSS เพื่อให้คุณอยู่ในที่ที่คุณอยู่ โดยเขียนตรรกะทางธุรกิจใน HTML ของคุณ
แอนิเมชั่น: แอนิเมชั่นที่หลากหลายเพื่อนำเสนอเนื้อหาที่สะอาดตาและมีชีวิตชีวา
ส่วนประกอบ: ส่วนประกอบของเว็บที่ใช้งานง่ายที่สร้างด้วย CSS และ JavaScript
การจัดการ (เร็ว ๆ นี้)
ไอคอน (เร็วๆ นี้)

ตัวอย่าง

คอนเทนเนอร์ความกว้าง 100% พร้อมเค้าโครงเฟล็กบ็อกซ์แถวกึ่งกลาง องค์ประกอบย่อยแต่ละองค์ประกอบมีขนาดตัวอักษรที่แตกต่างกัน

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 >

คอนเทนเนอร์ความกว้าง 100% พร้อมเค้าโครง Flexbox แถว องค์ประกอบลูกมีระยะขอบความเข้ม 2 ในแนวนอน องค์ประกอบย่อยแต่ละองค์ประกอบมีการเสริมความเข้ม 2 ระดับ

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 >

คอนเทนเนอร์กว้าง 33% องค์ประกอบย่อยแต่ละองค์ประกอบมีระยะขอบแนวตั้งที่แตกต่างกัน (บนและล่าง) ลูกสุดท้ายมีความเข้มของขอบด้านซ้าย 2 และความเข้มของสีน้ำเงิน 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 >

คอนเทนเนอร์ความกว้าง 50% พร้อมเค้าโครงเฟล็กบ็อกซ์คอลัมน์ท้ายแนวตั้งตรงกลางและแนวนอน องค์ประกอบย่อยแต่ละองค์ประกอบมีน้ำหนักแบบอักษรที่แตกต่างกัน

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 >

ตัวอย่างตัวแปรธีม

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