Bulmaをカスタマイズ前提でちょっと触ってみる

CSS

はじめに

Bulma*1というCSSフレームワークがあります。
カスタマイズ前提でちょっと触ってみました。

環境

  • Windows 10 Pro
  • Node.js v11.15.0
  • Bulma 0.7.4
  • node-sass 4.12.0

カスタマイズの基本について理解する

Customizeから始める

Customizeから一つ選んで始めることにします。
今回はWith node-sassを選びました。

bulma-startから始めるのもありなのですが今回は勉強目的なので、一から作っていくっぽさがあるCustomizeから選びました。

6. Add your own Bulma stylesを理解する

With node-sassの手順1～5までは特筆することはありません。
そのままやっていきます。

問題は6. Add your own Bulma stylesです。
ここがカスタマイズを行う手順なのですが、3. Create a Sass fileのSass fileと6. Add your own Bulma stylesのSass fileが全く違うため、真面目に読解する必要があります。

以下に6. Add your own Bulma stylesのSass fileを引用します。

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/form.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";

以下のカスタマイズをしているため、3. Create a Sass fileと比べて6. Add your own Bulma stylesのSass fileは長くなってます。

  • Variablesで解説されている変数の定義(Sass fileのコメントの"Set your brand colors, Update Bulma's global variables", "Update some of Bulma's component variables"の部分)
    (ちなみにコメントの"Import a Google Font"の部分は、Nunitoフォントを使うための布石)
  • Bulmaに含まれるCSSのうち使う部分だけの取り込み(Sass fileのコメントの"Import only what you need from Bulma"の部分)

Variablesで解説されている変数の定義だけしたい場合

@import で"../node_modules/bulma/bulma.sass"を読み込むSass fileにすればOKです。
以下に例を示します。

@charset "utf-8";
$family-sans-serif: Helvetica, "Arial", "Hiragino Kaku Gothic ProN",'ヒラギノ角ゴ ProN W3', Meiryo, "メイリオ", sans-serif;
@import "../node_modules/bulma/bulma.sass";

' `import "../node_modules/bulma/bulma.sass"; 'を、変数の定義より後に記載するのが注意点です。
Sassの仕様上はあたりまえなのですが、私は知らなくてハマってました。

さいごに

これで、あとはVariablesのページを理解すれば、カスタマイズが可能になりました。
私はまだ理解していませんが、そんなに数多くないしどうにかカスタマイズできるようになる…、かな？

*1:Bulmaが何なのかは、CSSフレームワーク BULMA チュートリアル① - Qiitaにわかりやすく説明されています。理解するための記事としてお勧めです。