Cirrus
Gamma 8
Uma estrutura SCSS centrada no componente e utilidade projetada para prototipagem rápida. Use belos componentes pré-construídos para inicializar seu próximo projeto e aulas de utilitário para polir seu design final.
Confira os documentos »
Solicitar recurso / relatório um bug / exemplos
Cirrus conta com o que o CSS prefixo? Para determinar quais seletores precisam de prefixos.
Ou seja, Edge | Firefox | Cromo | Safári | Ópera | Elétron |
|---|---|---|---|---|---|
| IE11, Edge | Últimas 3 versões, ESR | Últimas 3 versões | Últimas 3 versões | Últimas 3 versões | Últimas 3 versões |
npm install cirrus-uiyarn add cirrus-uiPara CDNs, é recomendável anexar versões específicas aos URLs para evitar atualizações inesperadas para manter a consistência em seu projeto.
Por favor, não faça referência aos artefatos da pasta dist diretamente, pois estes estão sujeitos a alterações a qualquer momento.
< link rel =" stylesheet " href =" https://unpkg.com/cirrus-ui " > < link rel =" stylesheet " href =" https://www.jsdelivr.com/package/npm/cirrus-ui " >Confira o guia de configuração para obter mais informações.
<!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 ,
)
)
),
);Confira o guia de configuração para obter mais informações.
Use GitPod, um ambiente de desenvolvimento online gratuito para o Github.
Ou clone localmente:
$ git clone [email protected]:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watchcore e ext .| Projeto | Descrição |
|---|---|
| Vue-Cirrus | Componentes Cirrus para Vue.js com sintaxe direta |
| Cirros-Blocks | Uma coleção de belos componentes construídos com Cirrus prontos para serem copiados e colados. |
| Cirros-reset | Uma redefinição simples de CSS do Cirrus. |
O Cirrus é licenciado sob a licença do MIT. Se esse trabalho de quadro o ajudou de alguma forma, a atribuição no rodapé do seu site seria muito apreciada.
Leia nosso guia contribuinte e melhore o Cirrus juntos.
Congratulamo -nos com todas as contribuições. Por favor, leia nosso contribuindo.md primeiro. Você pode enviar quaisquer idéias como solicitações de tração ou como problemas do GitHub. Se você quiser melhorar o código, confira as instruções de desenvolvimento e se divirta! :)
Ao criar problemas, siga os modelos fornecidos para o tipo de problema selecionado. Os detalhes e a formatação adicionais me ajudarão a entender e resolver seu problema mais rapidamente.
Eu apreciaria muito qualquer apoio ao desenvolvimento contínuo deste projeto. ?
