홈페이지>웹사이트 구축 리소스>글꼴 다운로드

빠른 프로토 타이핑을 위해 설계된 구성 요소 및 유틸리티 중심 SCSS 프레임 워크. 아름다운 사전 제작 된 구성 요소를 사용하여 다음 프로젝트 및 유틸리티 클래스를 부트 스트랩하여 최종 디자인을 연마하십시오.
문서를 확인하십시오»

기능을 요청 / 버그 / 예제를보고합니다

특징

지원되는 브라우저

Cirrus는 어떤 CSS 접두사에 의존합니까? 어떤 선택기가 접두사가 필요한지 결정합니다.


IE / 엣지

파이어 폭스

크롬

원정 여행

오페라

전자
IE11, 가장자리 마지막 3 가지 버전, ESR 마지막 3 버전 마지막 3 버전 마지막 3 버전 마지막 3 버전

? 설치하다

NPM

npm install cirrus-ui

방사

yarn add cirrus-ui

cdn

CDN의 경우 프로젝트의 일관성을 유지하기 위해 예기치 않은 업데이트를 피하기 위해 특정 버전을 URL에 첨부하는 것이 좋습니다.

dist Folder Artifacts를 직접 참조하지 마십시오. 언제든지 변경 될 수 있습니다.

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

자세한 내용은 설정 안내서를 확인하십시오.

개발

GitHub의 무료 온라인 개발 환경 인 GitPod를 사용하십시오.

또는 현지에서 복제 :

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

? 포함 된 내용

? 관련 프로젝트

프로젝트 설명
vue-cirrus 간단한 구문이있는 vue.js 용 Cirrus 구성 요소
Cirrus-Blocks 복사 및 붙여 넣을 준비가 된 Cirrus로 제작 된 아름다운 구성 요소 모음.
Cirrus-Reset 간단한 CSS는 Cirrus에서 재설정됩니다.

? 라이센스 및 속성

Cirrus는 MIT 라이센스에 따라 라이센스가 부여됩니다. 이 프레임 작업이 어떤 식 으로든 도움이된다면 웹 사이트의 바닥 글의 속성에 감사드립니다.

? 기여

기고 가이드를 읽고 Cirrus를 함께 개선하십시오.

우리는 모든 기여를 환영합니다. 우리의 기고금 .md를 먼저 읽으십시오. 풀 요청 또는 GitHub 문제로 아이디어를 제출할 수 있습니다. 코드를 개선하려면 개발 지침을 확인하고 즐거운 시간을 보내십시오! :)

문제를 만들 때 선택한 문제 유형에 제공된 템플릿을 따르십시오. 추가 세부 사항과 서식을 통해 문제를 더 빨리 이해하고 해결하는 데 도움이됩니다.

❤️ 후원자와 후원자

이 프로젝트의 지속적인 개발에 대한 지원에 크게 감사드립니다. ?

확장하다
추가 정보