تنزيل roobie - تنزيل رمز مصدر roobie

roobie

بيانات الموقع

1.0.0

تنزيل

roobie

مجموعة من فئات CSS لتساعدك على كتابة منطق الأعمال في HTML الخاص بك. أنشئ بسهولة تطبيقات الويب والهواتف المحمولة القابلة للصيانة باستخدام مئات من فئات CSS المعدة مسبقًا في متناول يدك. لا تكتب أبدًا فئات CSS نمطية تحتوي على الحشو والهامش وما إلى ذلك مرة أخرى. بدلاً من ذلك، قم بتفضيل فئات CSS المساعدة التي يمكن إعادة استخدامها. وهذا يجعل ملفات HTML أكبر حجمًا، ولكنه يقلل من تنظيف التعليمات البرمجية والتعليمات البرمجية الضالة عند إزالة المحتوى. تحكم في جميع متغيرات CSS الخاصة بك من السمات المركزية لتحقيق الاتساق عبر تطبيقات الويب الخاصة بك وتبديل السمات بسهولة. زيادة قابلية الصيانة وسرعة التطوير.

وحدات

السمات: استخدم السمات المعدة مسبقًا أو قم بتكوين القالب الخاص بنا وقم بإنشاء القالب الخاص بك.
التخطيط: قم بإنشاء تخطيطات بسيطة وسريعة الاستجابة باستخدام مساعدي flexbox CSS.
الأدوات المساعدة: أدوات CSS المساعدة لإبقائك في المكان الذي تنتمي إليه، وكتابة منطق الأعمال بتنسيق HTML الخاص بك.
الرسوم المتحركة: مجموعة متنوعة من الرسوم المتحركة لتقديم محتوى نظيف وديناميكي.
المكونات: مكونات ويب سهلة الاستخدام تم إنشاؤها باستخدام CSS وJavaScript.
التلاعب (قريبا)
أيقونات (قريبا)

أمثلة

حاوية بعرض 100% مع تخطيط flexbox للصف الأوسط. العناصر الفرعية لكل منها حجم خط مختلف.

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 أفقيًا. يحتوي كل عنصر فرعي على حشوتين من الكثافة.

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% مع تخطيط flexbox للعمود في المنتصف رأسيًا والأفقي. لكل من العناصر الفرعية وزن خط مختلف.

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