Bulma チートシート – スタイル＆レイアウト編

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>