Page d'accueil>Ressources de création de sites Web>Téléchargement de polices

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

Caractéristiques

Navigateurs pris en charge

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

? Installer

NPM

npm install cirrus-ui

Fil

yarn add cirrus-ui

Monnaie

Pour 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.

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

Consultez le guide de configuration pour plus d'informations.

? Usage

Page de base

 <!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 > 

Réagir

 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' ) ; 

Svelte

 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 ,
            )
        )
    ),
);

Consultez le guide de configuration pour plus d'informations.

Développement

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 watch

? Ce qui est inclus

? Projets connexes

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.

? Licence et attribution

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.

? Contributif

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.

❤️ Sponsors et bailleurs de fonds

J'apprécierais grandement tout soutien pour le développement continu de ce projet. ?

Développer
Informations supplémentaires