Bulma チートシート – スタイル＆レイアウト編｜ProgLearn｜エンジニアのためのプログラミング情報メディア

CSS フレームワーク Bulma

みなさんこんにちは、どんぶラッコです。

この度、CSSフレームワークBulmaのチートシートを作ったので公開しておこうと思います！

といっても、レイアウトについてよく使うやつを列挙しただけですが笑

適宜リファレンスとして使ってください！

クラスの命名規則

https://bulma.io/documentation/modifiers/syntax/

They all start with is- or has-.

色

is-primary
is-link
is-info
is-success
is-warning
is-danger

大きさ

is-small
is-medium
is-large

スタイルや状態

is-outlined
is-loading
[disabled]

Float

is-clearfix
is-pulled-left
is-pulled-right

クリア系

is-marginless
is-paddingless
is-radiusless
is-shadowless

Helper クラス

is-overlay
is-clipped
is-unselectable
is-invisible
is-hidden
is-sr-only
is-relative

Display クラス (1つ)

is-block
is-flex
is-inline
is-inline-block
is-inline-flex

1つだけ表示・隠す

is-**-mobile
is-**-tablet-only
is-**-desktop-only
is-**-widescreen-only
is-hidden-mobile
is-hidden-tablet-only
is-hidden-desktop-only
is-hidden-widescreen-only

2つ以上表示・隠す

is-**-touch
is-**-tablet
is-**-desktop
is-**-widescreen
is-**-fullhd
is-hidden-touch
is-hidden-tablet
is-hidden-desktop
is-hidden-widescreen
is-hidden-fullhd

テキスト・背景の色

9色・９階調の灰色 has-text-** has-background-**

has-text-white … 白
has-text-black … 黒
has-text-light … ライト
has-text-dark … ダーク
has-text-primary … エメラルド
has-text-info … 明るい青
has-text-link … 青
has-text-success … 緑
has-text-warning … 黄
has-text-danger … 赤
has-text-black-bis … 暗い
has-text-black-ter …
has-text-grey-darker …
has-text-grey-dark …
has-text-grey …
has-text-grey-light …
has-text-grey-lighter …
has-text-white-ter …
has-text-white-bis … 明るい

Size

is-size-1 …
is-size-7
3rem から 0.5rem ずつ小さくなっていく

Alignment

has-text-centered
has-text-justified
has-text-left
has-text-right

大文字小文字

is-capitalized
is-lowercase
is-uppercase
is-italic

テキスト重み

has-text-weight-light
has-text-weight-normal
has-text-weight-medium
has-text-weight-semibold
has-text-weight-bold

Font-family

is-family-sans-serif
is-family-monospace
is-family-primary
is-family-secondary
is-family-code

Columns

Basics

columnsで囲ってから中に column を追加する

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

Sizes

他の列は自動的にスペースを埋めてくれる

is-full 4/4
is-three-quarters 3/4
is-half 2/4
is-one-quarter 1/4

is-two-thirds 2/3
is-one-third 1/3

is-four-fifths 4/5
is-three-fifths 3/5
is-two-fifths 2/5
is-one-fifths 1/5

12カラムシステム

is-1 ~ is-12

offsetを作る場合

is-offset-** <div class=”columns is-mobile”> <div class=”column is-half is-offset-one-quarter”></div> </div>

Narrow System

必要なスペースを獲得したい場合、 is-narrow を利用。

<div class="columns">
  <div class="column is-narrow">
	  <div class="box" style="width: 200px;"></div>
	</div>
	<div class="column"></div>
</div>

モバイル端末でもオンにしたい場合は is-mobile をつける。
デスクトップにもしたいなら is-desktop をつける。 <div class=”columns is-mobile”> … </div>
is-gapless で columns 間のスペースをなくす
is-multiline で複数行に適用できる <div class=”columns is-gapless　is-multiline”> … </div>

Container

<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>

.navbar
.hero
.section
.footer

Level

level: main container
- level-left for the left side
- level-right for the right side
  - level-item for each individual element

Media Object

<article class="media">
  <figure class="media-left">
  </figure>
  <div class="media-content">
    <div class="content">
    </div>
    <nav class="level is-mobile">
      <div class="level-left">
        <a class="level-item"></a>
        <a class="level-item"></a>
        <a class="level-item"></a>
      </div>
    </nav>
  </div>
  <div class="media-right">
    <button class="delete"></button>
  </div>
</article>

Hero

https://bulma.io/documentation/layout/hero/#full-height-hero

hero
- hero-head (always at the top)
- hero-body (always vertically centered)
- hero-foot (always at the bottom)

full width banner が作れる

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>

is-bold グラデーション

<section class="hero is-medium is-primary is-bold">
</section>

大きさ変えられる

is-medium
is-large
is-fullheight

navbarを併用して

is-fullheight-with-navbar

Section

body の直接の子供

<body>
  <section class="section">
    <div class="container">
    </div>
  </section>
</body>

Footer

<footer class="footer">
</footer>

Tile

<div class="tile">
  <!-- The magical tile element! -->
</div>

is-ancestor 水平にtileを並べる <div class=”tile is-ancestor”> <div class=”tile”></div> <div class=”tile”></div> </div>
is-vertical 要素を目一杯に広げる <div class=”tile is-ancestor”> <div class=”tile is-4 is-vertical is-parent”> <div class=”tile is-child box”> <p class=”title”>One</p> </div> <div class=”tile is-child box”> <p class=”title”>Two</p> </div> </div> <div class=”tile is-parent”> <div class=”tile is-child box”> <p class=”title”>Three</p> </div> </div> </div>