الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

إطار SCSS المتمحور حول المكون والمكون مصمم للنماذج الأولية السريعة. استخدم مكونات جميلة تم تصميمها مسبقًا لتمهيد فصول المشروع والمكافحة التالية لتلميع تصميمك النهائي.
تحقق من المستندات »

طلب الميزة / الإبلاغ عن خطأ / أمثلة

سمات

المتصفحات المدعومة

يعتمد Cirrus على أي CSS للبادئة؟ لتحديد المحددات التي تحتاج البادئات.


أي / الحافة
Firefox
الكروم
سفاري
الأوبرا
الإلكترون
IE11 ، الحافة آخر 3 إصدارات ، ESR آخر 3 إصدارات آخر 3 إصدارات آخر 3 إصدارات آخر 3 إصدارات

؟ ثَبَّتَ

NPM 

npm install cirrus-ui

غزل 

yarn add cirrus-ui

CDN

بالنسبة إلى CDNS ، يوصى بإرفاق إصدارات محددة بعنوان URL لتجنب تحديثات غير متوقعة للحفاظ على الاتساق في مشروعك.

يرجى عدم الرجوع إلى القطع الأثرية المجلد dist مباشرة لأنها عرضة للتغيير في أي وقت.

UNPKG 
 < link rel =" stylesheet " href =" https://unpkg.com/cirrus-ui " >
JSDelivr 
 < link rel =" stylesheet " href =" https://www.jsdelivr.com/package/npm/cirrus-ui " >

تحقق من دليل الإعداد لمزيد من المعلومات.

؟ الاستخدام

الصفحة الأساسية 

 <!DOCTYPE html >
< html >
  < head >
    < title > Hello World </ title >
    < meta name =" viewport " content =" width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0 " />
    < meta charset =" UTF-8 " />
    < meta http-equiv =" X-UA-Compatible " content =" IE=edge; " />
    < link href =" https://unpkg.com/cirrus-ui " type =" text/css " rel =" stylesheet " />
    < link href =" https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700 " rel =" stylesheet " />
    < link href =" https://fonts.googleapis.com/css?family=Montserrat:400,700 " rel =" stylesheet " />
  </ head >
  < body >
    < h1 > Hello World </ h1 >
  </ body >
</ html >

رد فعل 

 import { StrictMode } from "react" ;
import ReactDOM from "react-dom" ;

import App from "./App" ;

import 'cirrus-ui' ; // You can import it here if you want

const rootElement = document . getElementById ( "root" ) ;
ReactDOM . render (
    < StrictMode >
        < App />
    </ StrictMode > ,
    rootElement
) ;

Vue 

 import Vue from 'vue' ;
import App from './App.vue' ;

import 'cirrus-ui' ;

Vue . config . productionTip = false ;

new Vue ( {
    render : ( h ) => h ( App ) ,
} ) . $mount ( '#app' ) ;

ممشوق 

 import App from "./App.svelte" ;
import "cirrus-ui" ;

const app = new App ( {
    target : document . body
} ) ;

export default app ;

Sass/SCSS 

 @use " node_modules/cirrus-ui/src/cirrus-ext " as * with (
    $config : (
        excludes: (
            ABSOLUTES,
        ),
        opacity : null, // Disable default opacity classes
        extend: (
            // Add your own
            opacity : (
                25 : .25 ,
                50 : .5 ,
                75 : .75 ,
            )
        )
    ),
);

تحقق من دليل الإعداد لمزيد من المعلومات.

تطوير

استخدم Gitpod ، وهي بيئة Dev مجانية على الإنترنت لـ GitHub.

أو استنساخ محليًا: 

$ git clone [email protected]:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watch

؟ ما هو مدرج

؟ المشاريع ذات الصلة

مشروع وصف
Vue-Cirrus مكونات cirrus لـ Vue.js مع بناء جملة مباشرة
حانات تسيرس مجموعة من المكونات الجميلة المصممة مع cirrus جاهزة لنسخها ولصقها.
cirrus-reset إعادة ضبط CSS بسيطة من cirrus.

؟ الترخيص والإسناد

تم ترخيص Cirrus بموجب ترخيص MIT. إذا ساعدك هذا العمل في الإطار بأي شكل من الأشكال ، فإن الإسناد في تذييل موقع الويب الخاص بك سيكون موضع تقدير كبير.

؟ المساهمة

اقرأ دليلنا المساهم وتحسين cirrus معًا.

نرحب بجميع المساهمات. يرجى قراءة المساهمة لدينا. يمكنك تقديم أي أفكار كطلبات سحب أو كمسائل github. إذا كنت ترغب في تحسين التعليمات البرمجية ، تحقق من تعليمات التطوير وقضاء وقت ممتع! سائدا

عند إنشاء مشكلات ، يرجى اتباع القوالب المقدمة لنوع المشكلة الذي حددته. سوف تساعدني التفاصيل والتنسيق المضافة على فهم مشكلتك وحلها بشكل أسرع.

❤ الرعاة والمؤيدين

سأكون ممتنًا بشكل كبير أي دعم لاستمرار التطوير لهذا المشروع. ؟

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل