Cirrus
Gamma 8
Un marco SCSS centrado en componentes y utilidad diseñado para prototipos rápidos. Use hermosos componentes preconstruidos para arrancar su próximo proyecto y clases de utilidad para pulir su diseño final.
Mira los documentos »
Solicitar característica / Informe un error / ejemplos
¿Cirrus se basa en qué CSS prefijo? Para determinar qué selectores necesitan prefijos.
Es decir / borde | Firefox | Cromo | Safari | Ópera | Electrón |
|---|---|---|---|---|---|
| IE11, borde | Últimas 3 versiones, ESR | Últimas 3 versiones | Últimas 3 versiones | Últimas 3 versiones | Últimas 3 versiones |
npm install cirrus-uiyarn add cirrus-uiPara los CDN, se recomienda adjuntar versiones específicas a las URL para evitar actualizaciones inesperadas para mantener la consistencia en su proyecto.
No haga referencia a los artefactos de la carpeta dist directamente, ya que están sujetos a cambios en cualquier momento.
< link rel =" stylesheet " href =" https://unpkg.com/cirrus-ui " > < link rel =" stylesheet " href =" https://www.jsdelivr.com/package/npm/cirrus-ui " >Consulte la guía de configuración para obtener más información.
<!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 ,
)
)
),
);Consulte la guía de configuración para obtener más información.
Use GitPod, un entorno de desarrollo en línea gratuito para GitHub.
O clon localmente:
$ git clone [email protected]:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watchcore y ext .| Proyecto | Descripción |
|---|---|
| grirus vue | Componentes Cirrus para Vue.js con sintaxis directa |
| bloques de cirro | Una colección de hermosos componentes construidos con cirros listos para ser copiados y pegados. |
| resumen de cirro | Un simple reinicio de CSS de Cirrus. |
Cirrus tiene licencia bajo la licencia MIT. Si este trabajo de cuadro lo ha ayudado de alguna manera, la atribución en el pie de página de su sitio web sería muy apreciada.
Lea nuestra guía contribuyente y mejore los cirros juntos.
Agradecemos todas las contribuciones. Lea nuestro contribuyente. MD primero. Puede enviar cualquier idea como solicitudes de extracción o como problemas de GitHub. Si desea mejorar el código, ¡consulte las instrucciones de desarrollo y diviértase! :)
Al crear problemas, siga las plantillas proporcionadas para el tipo de problema que seleccionó. El detalle y el formato adicionales me ayudarán a comprender y resolver su problema más rápido.
Apreciaría mucho cualquier apoyo para el desarrollo continuo de este proyecto. ?
