Box

Detail
Basic
Flexbox
Outline
Separate
Link
Angle
Variables
Mixins
Sources

Detail

Block や Flexbox を使った汎用レイアウトを作る CSS。

Basic

.box セレクターを使用します。余白を作る場合は Padding を付与。配下にはエレメントやコンポーネント、または入れ子で Box を配置します。

Attached

Background Light

Outline

children

<div class="box is-bg-light is-outline is-padding-md">children</div>

Selector	Description
`.box`	ボックスレイアウトに使うセレクター。

Modifier	Description
`.is-bg, .is-bg-light`	`.box` に付与すると白背景が追加されます。

Flexbox

children

<div class="box is-flex is-middle is-bg-light is-outline is-padding-md">
  <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
  <div class="box">children</div>
</div>

Modifier	Description
`.is-flex`	`.box` に付与すると `display: flex;` に変化します。
`.is-inline-flex`	`.box` に付与すると `display: inline-flex;` に変化します。
`.is-nowrap`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が折り返さなくなります。
`.is-baseline`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素がテキストベースラインで並びます。
`.is-middle`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が天地中央寄せで並びます。
`.is-bottom`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が下寄せで並びます。
`.is-center`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が左右中央寄せで並びます。
`.is-right`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が右寄せで並びます。
`.is-between`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が等間隔で並びます。
`.is-around`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が余白を含めた等間隔で並びます。
`.is-reverse`	`.box.is-flex` または `.box.is-inline-flex` に付与すると子要素が折り返した時に右から並びます。

Outline

Modifier	Description
`.is-outline`	`.box` に付与すると `border` が追加されます。
`.is-outline-top`	`.box` に付与すると `border-top` が追加されます。
`.is-outline-right`	`.box` に付与すると `border-right` が追加されます。
`.is-outline-bottom`	`.box` に付与すると `border-bottom` が追加されます。
`.is-outline-left`	`.box` に付与すると `border-left` が追加されます。

Separate

None

All

Parent & Child

children 1
children 2
children 3

<ul class="box is-outline is-bg-light is-separate">
  <li>
    <div class="box is-flex is-middle is-padding-left-md">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-padding-vertical-md is-0">children 1</div>
    </div>
  </li>
  <li>
    <div class="box is-flex is-middle is-padding-left-md">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-padding-vertical-md is-0">children 2</div>
    </div>
  </li>
  <li>
    <div class="box is-flex is-middle is-padding-left-md">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-padding-vertical-md is-0">children 3</div>
    </div>
  </li>
</ul>

Modifier	Description
`.is-separate`	`.box` に付与すると、直下にある最後の要素以外に `border-bottom` が追加されます。
`.is-separate-parent`	`.box` に付与すると、直下にある最後の要素以外を `.is-separate-child` の対象にします。
`.is-separate-child`	`.box.is-separate-parent` 内で使うと、付与した要素に `border-bottom` が追加されます。

Link

Disabled

External Link

<ul class="box is-outline is-bg-light is-separate-parent">
  <li>
    <a class="box is-link is-flex is-middle is-padding-left-md" href="#">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-separate-child is-padding-vertical-md is-0">children 1</div>
    </a>
  </li>
  <li>
    <a class="box is-link is-flex is-middle is-padding-left-md" href="#">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-separate-child is-padding-vertical-md is-0">children 2</div>
    </a>
  </li>
  <li>
    <a class="box is-link is-flex is-middle is-padding-left-md" href="#">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-separate-child is-padding-vertical-md is-0">children 3</div>
    </a>
  </li>
</ul>

Modifier	Description
`.is-link`	`.box` に付与するとリンク装飾を追加します。
`.is-disabled`	`.box` に付与するとリンクを無効化します。

Angle

<ul class="box is-outline is-bg-light is-separate-parent">
  <li>
    <a class="box is-link is-flex is-middle is-padding-left-md" href="#">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-separate-child is-angle-right is-padding-right-xxl is-padding-vertical-md is-0">children 1</div>
    </a>
  </li>
  <li>
    <a class="box is-link is-flex is-middle is-padding-left-md" href="#">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-separate-child is-angle-right is-padding-right-xxl is-padding-vertical-md is-0">children 2</div>
    </a>
  </li>
  <li>
    <a class="box is-link is-flex is-middle is-padding-left-md" href="#">
      <i aria-hidden="true" class="fas fa-archive is-margin-right-md is-lg"></i>
      <div class="box is-separate-child is-angle-right is-padding-right-xxl is-padding-vertical-md is-0">children 3</div>
    </a>
  </li>
</ul>

Modifier	Description
`.is-angle-right`	`.box` に付与すると右に角マークが追加されます。
`.is-angle-left`	`.box` に付与すると左に角マークが追加されます。
`.is-angle-up`	`.box.is-angle-right` または `.box.is-angle-left` に付与すると角マークが上を向きます。
`.is-angle-down`	`.box.is-angle-right` または `.box.is-angle-left` に付与すると角マークが下を向きます。

Warning

Angle には余白の調整が含まれていませんので、.box に is-padding-right-xxl などで余白を追加する工夫が必要です。

Variables

CSS Variables

false

true

Name

Default Value

Compiled Value

Name
$selector-box
Default Value
.box
Compiled Value
.box
Name
$modifier-box-flex
Default Value
.is-flex
Compiled Value
.is-flex
Name
$modifier-box-inline-flex
Default Value
.is-inline-flex
Compiled Value
.is-inline-flex
Name
$modifier-box-nowrap
Default Value
.is-nowrap
Compiled Value
.is-nowrap
Name
$modifier-box-baseline
Default Value
.is-baseline
Compiled Value
.is-baseline
Name
$modifier-box-middle
Default Value
.is-middle
Compiled Value
.is-middle
Name
$modifier-box-bottom
Default Value
.is-bottom
Compiled Value
.is-bottom
Name
$modifier-box-center
Default Value
.is-center
Compiled Value
.is-center
Name
$modifier-box-right
Default Value
.is-right
Compiled Value
.is-right
Name
$modifier-box-between
Default Value
.is-between
Compiled Value
.is-between
Name
$modifier-box-around
Default Value
.is-around
Compiled Value
.is-around
Name
$modifier-box-reverse
Default Value
.is-reverse
Compiled Value
.is-reverse
Name
$modifier-box-bg
Default Value
.is-bg
Compiled Value
.is-bg
Name
$modifier-box-bg-light
Default Value
.is-bg-light
Compiled Value
.is-bg-light
Name
$modifier-box-outline
Default Value
.is-outline
Compiled Value
.is-outline
Name
$modifier-box-outline-top
Default Value
.is-outline-top
Compiled Value
.is-outline-top
Name
$modifier-box-outline-right
Default Value
.is-outline-right
Compiled Value
.is-outline-right
Name
$modifier-box-outline-bottom
Default Value
.is-outline-bottom
Compiled Value
.is-outline-bottom
Name
$modifier-box-outline-left
Default Value
.is-outline-left
Compiled Value
.is-outline-left
Name
$modifier-box-separate
Default Value
.is-separate
Compiled Value
.is-separate
Name
$modifier-box-separate-parent
Default Value
.is-separate-parent
Compiled Value
.is-separate-parent
Name
$modifier-box-separate-child
Default Value
.is-separate-child
Compiled Value
.is-separate-child
Name
$modifier-box-disabled
Default Value
.is-disabled
Compiled Value
.is-disabled
Name
$modifier-box-link
Default Value
.is-link
Compiled Value
.is-link
Name
$modifier-box-angle-right
Default Value
.is-angle-right
Compiled Value
.is-angle-right
Name
$modifier-box-angle-left
Default Value
.is-angle-left
Compiled Value
.is-angle-left
Name
$modifier-box-angle-up
Default Value
.is-angle-up
Compiled Value
.is-angle-up
Name
$modifier-box-angle-down
Default Value
.is-angle-down
Compiled Value
.is-angle-down
Name
$box-background-color
Default Value
$convert-background-1
Compiled Value
white
Name
$box-border-width
Default Value
$global-border-width
Compiled Value
1px
Name
$box-border-color
Default Value
$convert-border
Compiled Value
#d1d8dc
Name
$box-link-hover-background-color
Default Value
$convert-background-3
Compiled Value
whitesmoke
Name
$box-link-transition
Default Value
$global-transition
Compiled Value
ease-out 0.12s
Name
$box-angle-size
Default Value
0.5em
Compiled Value
0.5em
Name
$box-angle-border-width
Default Value
$global-border-width * 2
Compiled Value
2px
Name
$box-angle-border-color
Default Value
$convert-border-1
Compiled Value
rgba(0, 0, 0, 0.26)

Mixins

musubii-style-box()
musubii-style-box-bg-light()
musubii-style-box-disabled()
musubii-style-box-flex()
musubii-style-box-inline-flex()
musubii-style-box-wrap()
musubii-style-box-baseline()
musubii-style-box-middle()
musubii-style-box-bottom()
musubii-style-box-center()
musubii-style-box-right()
musubii-style-box-between()
musubii-style-box-around()
musubii-style-box-reverse()
musubii-style-box-outline()
musubii-style-box-outline-top()
musubii-style-box-outline-right()
musubii-style-box-outline-bottom()
musubii-style-box-outline-left()
musubii-style-box-separate()
musubii-style-box-separate-parent()
musubii-style-box-link()
musubii-style-box-angle()
musubii-style-box-angle-right()
musubii-style-box-angle-left()
musubii-style-box-angle-up()
musubii-style-box-angle-down()

Sources

Document: Box / MUSUBii - GitHub Repository Source (MDX)
SCSS: Box / MUSUBii - GitHub Repository Source (SCSS)

Box

#Table of Contents

#Detail

#Basic

#Flexbox

#Outline

#Separate

#Link

#Angle

#Variables

#Mixins

#Sources

Table of Contents

Detail

Basic

Flexbox

Outline

Separate

Link

Angle

Variables

Mixins

Sources