Primer CSS

3ステップで試す

1. 1

   Primer CSS 22.3.0を一時projectへ導入する

   review対象releaseを固定し、既存projectから分離した一時directoryで確認します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/primer-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @primer/css@22.3.0コピー
2. 2

   prebuilt CSSを読み込む最小HTMLを作る

   Primer CSSのprebuilt stylesheetと代表的なbutton classを使う最小構成を用意します。

   printf "%s\n" '<!doctype html>' '<html><head><link rel="stylesheet" href="./node_modules/@primer/css/dist/primer.css"></head>' '<body><button class="btn btn-primary">Primary</button></body></html>' > index.htmlコピー
3. 3

   button component ruleが含まれることを確認する

   packageのdist CSSにPrimerのbutton classが含まれていることを確認します。

   grep -q ".btn-primary" node_modules/@primer/css/dist/primer.css && grep -q ".btn" node_modules/@primer/css/dist/primer.cssコピー

Built with

• SCSS

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• normalize.css53,505 Stars

  共通タグ 3件

  browserのuseful defaultを残しながら、default styleの差異と既知bugを補正する

  CSS
• PostCSS28,974 Stars

  共通タグ 3件

  CSSをASTへ変換し、JavaScript pluginでbuild時のstyle処理を組み立てる

  TypeScript
• Autoprefixer22,211 Stars

  共通タグ 3件

  BrowserslistとCan I Use dataから必要なvendor prefixだけを自動生成する

  JavaScript
• Less17,025 Stars

  共通タグ 3件

  変数・mixin・nestingを使うstylesheetをlesscで通常のCSSへcompileする

  JavaScript
• Stylelint11,526 Stars

  共通タグ 3件

  CSSのerrorとconventionを100以上のrule・plugin・shareable configで継続的に検査する

  JavaScript
• Stylus11,333 Stars

  共通タグ 3件

  indented syntaxと通常のCSS styleを同じcompilerで扱うexpressiveなstylesheet language

  JavaScript