Un cadre SCSS centré sur les composants et l'utilité conçu pour le prototypage rapide. Utilisez de beaux composants pré-construits pour bootstrap votre prochain projet et cours d'utilité pour polir votre conception finale.
Découvrez les documents »
Demande la fonctionnalité / signaler un bogue / exemples
Cirrus s'appuie sur ce que CSS préfixer? Pour déterminer quels sélecteurs ont besoin de préfixes.
C'est-à-dire / bord | Incendier | Chrome | Safari | Opéra | Électron |
|---|---|---|---|---|---|
| IE11, bord | 3 dernières versions, ESR | 3 dernières versions | 3 dernières versions | 3 dernières versions | 3 dernières versions |
npm install cirrus-uiyarn add cirrus-uiPour les CDN, il est recommandé de joindre une versions spécifiques aux URL pour éviter les mises à jour inattendues pour maintenir la cohérence dans votre projet.
Veuillez ne pas référencer les artefacts dist directement car ceux-ci sont sujets à changer à tout moment.
< link rel =" stylesheet " href =" https://unpkg.com/cirrus-ui " > < link rel =" stylesheet " href =" https://www.jsdelivr.com/package/npm/cirrus-ui " >Consultez le guide de configuration pour plus d'informations.
<!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
) ; 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 ; @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 ,
)
)
),
);Consultez le guide de configuration pour plus d'informations.
Utilisez Gitpod, un environnement de développement en ligne gratuit pour GitHub.
Ou clone localement:
$ git clone [email protected]:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watchcore et ext .| Projet | Description |
|---|---|
| Vue-Cirrus | Composants cirrus pour vue.js avec syntaxe simple |
| blocs de cirrus | Une collection de beaux composants construits avec Cirrus prêts à être copiés et collés. |
| cirrus-réinitialisation | Un simple CSS réinitialisé à partir de Cirrus. |
Cirrus est autorisé en vertu de la licence du MIT. Si ce travail de cadre vous a aidé de quelque manière que ce soit, l'attribution dans le pied de page de votre site Web serait très appréciée.
Lisez notre guide contributif et améliorez les cirrus ensemble.
Nous accueillons toutes les contributions. Veuillez d'abord lire notre contribution.md. Vous pouvez soumettre toutes les idées sous forme de demandes de traction ou en tant que problèmes de github. Si vous souhaitez améliorer le code, consultez les instructions de développement et passez un bon moment! :)
Lors de la création de problèmes, veuillez suivre les modèles fournis pour le type de problème que vous avez sélectionné. Le détail et le formatage supplémentaires m'aidera à comprendre et à résoudre votre problème plus rapidement.
J'apprécierais grandement tout soutien pour le développement continu de ce projet. ?