Bulma

3ステップで試す

1. 1

   Bulma 1.0.4を一時projectへ導入する

   published packageを1.0.4へ固定し、既存projectから分離した一時directoryで確認します。

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

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

   BulmaがJavaScriptなしでclassだけからbutton・section・containerをstylingする最小pageを用意します。

   printf "%s\n" '<!doctype html>' '<html><head><link rel="stylesheet" href="./node_modules/bulma/css/bulma.min.css"></head>' '<body><section class="section"><div class="container"><button class="button is-primary">Hello Bulma</button></div></section></body></html>' > index.htmlコピー
3. 3

   packageにCSS Variablesとcomponent ruleが含まれることを確認する

   v1系のCSS Variablesとcomponent classがprebuilt CSSへ含まれていることを確認します。

   grep -q -- "--bulma-primary" node_modules/bulma/css/bulma.css && grep -q ".button" node_modules/bulma/css/bulma.cssコピー

Built with

• CSS

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• modern-normalize7,417 Stars

  共通タグ 3件

  modern browserだけを対象に、base style normalizationを小さく保つ

  TypeScript
• Spectrum CSS1,290 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  Adobe Spectrumをdesign tokenと個別versioned CSS componentで実装する

  CSS
• Bootstrap174,991 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  responsive grid・utility・componentをCSS/Sassとnative JavaScriptから組み立てるfrontend framework

  MDX
• Primer CSS13,028 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  GitHubのdesign languageをSCSS moduleとutility・component classとして利用する

  SCSS
• Linaria12,350 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  CSS-in-JSのauthoring experienceを保ちつつ、styleをbuild時にstatic CSSへextractする

  TypeScript
• Panda CSS6,208 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  type-safeなstyle定義をscanし、design tokenとatomic CSSをbuild時に生成する

  Rust