Cirrus
Gamma 8
迅速なプロトタイピングのために設計されたコンポーネントとユーティリティ中心のSCSSフレームワーク。美しい事前に構築されたコンポーネントを使用して、次のプロジェクトとユーティリティクラスをブートストラップして最終的なデザインを磨きます。
ドキュメントをチェックしてください»
機能 /レポートバグ /例をリクエストします
Cirrusは、どのCSSにプレフィックスに依存していますか？どのセレクターがプレフィックスを必要とするかを判断するため。
IE / EDGE | Firefox | クロム | サファリ | オペラ | 電子 |
|---|---|---|---|---|---|
| IE11、エッジ | 最後の3つのバージョン、ESR | 最後の3つのバージョン | 最後の3つのバージョン | 最後の3つのバージョン | 最後の3つのバージョン |
npm install cirrus-uiyarn add cirrus-uiCDNの場合、特定のバージョンをURLに添付して、プロジェクトの一貫性を維持するための予期しない更新を回避することをお勧めします。
これらはいつでも変更される可能性があるため、 distフォルダーアーティファクトを直接参照しないでください。
< link rel =" stylesheet " href =" https://unpkg.com/cirrus-ui " > < 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
) ; 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 ,
)
)
),
);詳細については、セットアップガイドをご覧ください。
GitHubの無料オンライン開発環境であるGitPodを使用してください。
またはローカルでクローン：
$ git clone [email protected]:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watchcoreとextのファイルをビルドします。| プロジェクト | 説明 |
|---|---|
| Vue-Cirrus | 簡単な構文を持つVue.jsのCirrusコンポーネント |
| Cirrus-blocks | Cirrusで構築された美しいコンポーネントのコレクションは、コピーして貼り付けられる準備ができています。 |
| Cirrus-reset | Cirrusからの単純なCSSリセット。 |
CirrusはMITライセンスに基づいてライセンスされています。このフレームの作業が何らかの形であなたを助けたなら、あなたのウェブサイトのフッターでの帰属は大歓迎です。
私たちの寄稿ガイドを読んで、一緒にCirrusを改善してください。
すべての貢献を歓迎します。最初に寄付を読んでください。任意のアイデアをプルリクエストとして、またはgithubの問題として送信できます。コードを改善したい場合は、開発手順をチェックして楽しい時間を過ごしてください！ :)
問題を作成するときは、選択した問題タイプのテンプレートに従ってください。追加された詳細とフォーマットは、問題をより速く理解し解決するのに役立ちます。
このプロジェクトの継続的な開発に対するサポートに大いに感謝します。 ？
