サイト制作に関するメモ書き

HOME > HTML・CSS > Frow CSSを使ってみる

Frow CSSを使ってみる

display: flex;を使ったグリッドなどが特長のCSSフレームワーク「Frow CSS」を使ってみます。

使い方

GitHubからダウンロードを行います。
ダウンロードしたファイルを解凍して、cssディレクトリ内にあるfrow.min.cssを以下のように読み込みます。

<link rel="stylesheet" href="./frow.min.css" />

これで準備完了なので、簡単に使ってみます。

HTML

<div class="frow">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

分かりやすいように.box-sampleというclassを付けて、背景色などを設定します。

CSS

.box-sample {
	margin: 5px;
	padding: 30px 10px;
	background: #999999;
}

.frowはdisplay: flex;で、子要素を横並びにします。
Frow CSSのデモページ
 

Grid System

グリッドの設定方法についてみてみます。

グリッドの分割

グリッドの分割は1,2,3,4,5,6,12のパターンが用意されています。

HTML

<h3>.col-md-1-1</h3>
<div class="frow">
  <div class="col-md-1-1">
    <div class="box-sample">.col-md-1-1</div>
  </div>
</div>

<h3>.col-md-1-2</h3>
<div class="frow">
  <div class="col-md-1-2">
    <div class="box-sample">.col-md-1-2</div>
  </div>
  <div class="col-md-1-2">
    <div class="box-sample">.col-md-1-2</div>
  </div>
</div>

<h3>.col-md-1-3</h3>
<div class="frow">
  <div class="col-md-1-3">
    <div class="box-sample">.col-md-1-3</div>
  </div>
  <div class="col-md-1-3">
    <div class="box-sample">.col-md-1-3</div>
  </div>
  <div class="col-md-1-3">
    <div class="box-sample">.col-md-1-3</div>
  </div>
</div>

<h3>.col-md-1-4</h3>
<div class="frow">
  <div class="col-md-1-4">
    <div class="box-sample">.col-md-1-4</div>
  </div>
  <div class="col-md-1-4">
    <div class="box-sample">.col-md-1-4</div>
  </div>
  <div class="col-md-1-4">
    <div class="box-sample">.col-md-1-4</div>
  </div>
  <div class="col-md-1-4">
    <div class="box-sample">.col-md-1-4</div>
  </div>
</div>

<h3>.col-md-1-5</h3>
<div class="frow">
  <div class="col-md-1-5">
    <div class="box-sample">.col-md-1-5</div>
  </div>
  <div class="col-md-1-5">
    <div class="box-sample">.col-md-1-5</div>
  </div>
  <div class="col-md-1-5">
    <div class="box-sample">.col-md-1-5</div>
  </div>
  <div class="col-md-1-5">
    <div class="box-sample">.col-md-1-5</div>
  </div>
  <div class="col-md-1-5">
    <div class="box-sample">.col-md-1-5</div>
  </div>
</div>

<h3>.col-md-1-6</h3>
<div class="frow">
  <div class="col-md-1-6">
    <div class="box-sample">.col-md-1-6</div>
  </div>
  <div class="col-md-1-6">
    <div class="box-sample">.col-md-1-6</div>
  </div>
  <div class="col-md-1-6">
    <div class="box-sample">.col-md-1-6</div>
  </div>
  <div class="col-md-1-6">
    <div class="box-sample">.col-md-1-6</div>
  </div>
  <div class="col-md-1-6">
    <div class="box-sample">.col-md-1-6</div>
  </div>
  <div class="col-md-1-6">
    <div class="box-sample">.col-md-1-6</div>
  </div>
</div>

<h3>.col-md-1-12</h3>
<div class="frow">
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
  <div class="col-md-1-12">
    <div class="box-sample">.col-md-1-12</div>
  </div>
</div>

グリッドのデモページ
 

.col-md-XX の「md」の部分を変更することで、指定したブレークポイントでグリッドのサイズを変更できます。
Frow CSSではxs,sm,md,lgの4種類が用意されています。

HTML

<div class="frow">
  <div class="col-xs-1-2 col-sm-1-1 col-md-1-2 col-lg-1-1">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-2 col-md-1-2 col-lg-1-1">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-2 col-md-1-2 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-2 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
    <div class="box-sample">sample</div>
  </div>
</div>

ブレークポイント毎でのグリッドサイズ変更のデモページ
各ブレークポイントのサイズは以下のようになっています。

xs 0px~767pxでスマートフォン向け。
sm 768px~991pxでタブレット向け。
md 992px~1199pxでPCや横長のタブレット向け。
lg 1200px~でワイドスクリーンのPC向け。

Frowに合わせて個別にブレークポイントを設定する場合、以下のように設定します。

CSS

/* XS */
@media (max-width: 767px) {
  
}

/* XS, SM */
@media (max-width: 991px) {
  
}

/* SM */
@media (min-width: 768px) and (max-width: 991px) {
  
}

/* MD */
@media (min-width: 992px) and (max-width: 1199px) {
  
}

/* MD, LG */
@media (min-width: 992px) {
  
}

/* LG */
@media (min-width: 1200px) {
  
}

 

アイテムの表示・非表示

.visible-XXで指定したブレークポイントだけ表示、.hidden-XXで指定したブレークポイントだけ非表示にできます。

HTML

<div class="frow">
  <div class="col-xs-1-4 visible-xs">
    <div class="box-sample">.visible-xs</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4 hidden-md">
    <div class="box-sample">.hidden-md</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
</div>

.visible-xsは0px~767pxで表示、hidden-mdは992px~1199pxで非表示になります。
グリッドの表示・非表示のデモページ
 

コンテナ

.frow-containerで括ることで、ブレークポイント毎でコンテンツ幅を100%ではなく、丁度よい幅になります。

HTML

<div class="frow-container">
  <div class="frow">
    <div class="col-md-1-3">
      <div class="box-sample">sample</div>
    </div>
    <div class="col-md-1-3">
      <div class="box-sample">sample</div>
    </div>
    <div class="col-md-1-3">
      <div class="box-sample">sample</div>
    </div>
  </div>
</div>

.frow-containerデモページ
 

Frow

.frowに合わせて使用できるclassをみてみます。

.gutters

アイテム間に幅30pxの間隔を空けます。

HTML

<div class="frow gutters">
  <div class="col-xs-1-3">
    <div class="box-sample">.col-xs-1-3</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">.col-xs-1-3</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">.col-xs-1-3</div>
  </div>
</div>

.guttersのデモページ
 

.row-center

水平方向の配置が中央に集める形で、垂直方向の配置が中央揃えになります。
justify-content: center; + align-items: center;です。

HTML

<div class="frow row-center">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.row-centerのデモページ
 

.row-start

水平方向の配置が始端に集める形で、垂直方向の配置が中央揃えになります。
justify-content: flex-start; + align-items: center;です。

HTML

<div class="frow row-start">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.row-startのデモページ
 

.row-end

水平方向の配置が終端に集める形で、垂直方向の配置が中央揃えになります。
justify-content: flex-end; + align-items: center;です。

HTML

<div class="frow row-end">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.row-endのデモページ
 

.row-between

水平方向の配置が均等配置(先頭と最後のアイテムは始端と終端に寄る)で、垂直方向の配置が中央揃えになります。
justify-content: space-between; + align-items: center;です。

HTML

<div class="frow row-between">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.row-betweenのデモページ
 

.row-around

水平方向の配置が均等配置(先頭と最後のアイテムは端からスペースを取る)で、垂直方向の配置が中央揃えになります。
justify-content: space-around; + align-items: center;です。

HTML

<div class="frow row-around">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.row-aroundのデモページ
 

.column-center

縦積みのグリッドになり、垂直方向の配置が始端に集める形で、水平方向の配置が中央揃えになります。
flex-direction: column; + justify-content: flex-start; + align-items: center;です。

HTML

<div class="frow column-center">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.column-centerのデモページ
 

.column-start

縦積みのグリッドになり、垂直方向の配置が始端に集める形で、水平方向の配置も始端に揃える形になります。
flex-direction: column; + justify-content: flex-start; + align-items: flex-start;です。

HTML

<div class="frow column-start">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.column-startのデモページ
 

.column-end

縦積みのグリッドになり、垂直方向の配置が始端に集める形で、水平方向の配置は終端に揃える形になります。
flex-direction: column; + justify-content: flex-start; + align-items: flex-end;です。

HTML

<div class="frow column-end">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.column-endのデモページ
 

.centered

水平方向、垂直方向共に中央揃えの配置になります。
.row-centerと違い、.frowにheight:100%;も合わせて追加されます。

HTML

<div class="frow centered">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.centeredのデモページ
 

.centered-column

.centeredの縦積みバージョンです。

HTML

<div class="frow centered-column">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.centered-columnのデモページ
 

.direction-row

flex-direction: row;で水平に並びます。

HTML

<div class="frow direction-row">
  <div class="box-sample">sample1</div>
  <div class="box-sample">sample2</div>
  <div class="box-sample">sample3</div>
</div>

.direction-rowのデモページ
 

.direction-reverse

flex-direction: row-reverse;で.direction-rowとは逆向きに並びます。

HTML

<div class="frow direction-reverse">
  <div class="box-sample">sample1</div>
  <div class="box-sample">sample2</div>
  <div class="box-sample">sample3</div>
</div>

direction-reverse.のデモページ
 

.direction-column

flex-direction: column;で垂直に並びます。

HTML

<div class="frow direction-column">
  <div class="box-sample">sample1</div>
  <div class="box-sample">sample2</div>
  <div class="box-sample">sample3</div>
</div>

.direction-columnのデモページ
 

.direction-column-reverse

flex-direction: column-reverse;で.direction-columnとは逆向きに並びます。

HTML

<div class="frow direction-column-reverse">
  <div class="box-sample">sample1</div>
  <div class="box-sample">sample2</div>
  <div class="box-sample">sample3</div>
</div>

.direction-column-reverseのデモページ
 

.justify-start

水平方向の配置を始端に集める形になります。
justify-content: flex-start;です。

HTML

<div class="frow justify-start">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.justify-startのデモページ
 

.justify-end

水平方向の配置を終端に集める形になります。
justify-content: flex-end;です。

HTML

<div class="frow justify-end">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.justify-endのデモページ
 

.justify-center

水平方向の配置を中央に集める形になります。
justify-content: center;です。

HTML

<div class="frow justify-center">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.justify-centerのデモページ
 

.justify-between

水平方向の配置を均等配置(先頭と最後のアイテムは始端と終端に寄る)にします。
justify-content: space-between;です。

HTML

<div class="frow justify-between">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.justify-betweenのデモページ
 

.justify-around

水平方向の配置を均等配置(先頭と最後のアイテムは端からスペースを取る)にします。
justify-content: space-around;です。

HTML

<div class="frow justify-around">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.justify-aroundのデモページ
 

.items-start

垂直方向の配置を始端に集める形になります。
align-items: flex-start;です。

HTML

<div class="frow items-start">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.items-startのデモページ
 

.items-end

垂直方向の配置を終端に集める形になります。
align-items: flex-end;です。

HTML

<div class="frow items-end">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.items-endのデモページ
 

.items-center

垂直方向の配置を中央に集める形になります。
align-items: center;です。

HTML

<div class="frow items-center">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.items-centerのデモページ
 

.items-stretch

各要素の垂直方向の高さを揃える形になります。
align-items: stretch;です。

HTML

<div class="frow items-stretch">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.items-stretchのデモページ
 

.items-baseline

垂直方向の配置をベースライン(テキストの1行目)を揃える形になります。
align-items: baseline;です。

HTML

<div class="frow items-baseline">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>

.items-baselineのデモページ
 

.content-start

.frowに余分なスペースがある場合に、アイテムを始端に詰めます。
align-content: flex-start;です。

HTML

<div class="frow content-start">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.content-startのデモページ
 

.content-end

.frowに余分なスペースがある場合に、アイテムを終端に詰めます。
align-content: flex-end;です。

HTML

<div class="frow content-end">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.content-endのデモページ
 

.content-center

.frowに余分なスペースがある場合に、アイテムを中央に詰めます。
align-content: center;です。

HTML

<div class="frow content-center">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.のデモページ
 

.content-between

.frowに余分なスペースがある場合に、均等配置(先頭と最後のアイテムは始端と終端に寄る)にします。
align-content: space-between;です。

HTML

<div class="frow content-between">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.content-betweenのデモページ
 

.content-around

.frowに余分なスペースがある場合に、均等配置(先頭と最後のアイテムは端からスペースを取る)にします。
align-content: space-around;です。

HTML

<div class="frow content-around">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.content-aroundのデモページ
 

.wrap

アイテムが多い場合に、1行に収めないで改行します。
flex-wrap: wrap;です。

HTML

<div class="frow wrap">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.wrapのデモページ
 

.wrap-reverse

.wrapと同じですが、並び順が逆になります。
flex-wrap: wrap-reverse;です。

HTML

<div class="frow wrap-reverse">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-3">
    <div class="box-sample">sample</div>
  </div>
</div>

.wrap-reverseのデモページ
 

.nowrap

アイテムが多い場合に、改行しないで1行に収めます。
flex-wrap: nowrap;です。

HTML

<div class="frow nowrap">
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
  <div class="col-xs-1-4">
    <div class="box-sample">sample</div>
  </div>
</div>

.nowrapのデモページ
 

.inline

.frowがインライン要素になります。
display: inline-flex;です。

HTML

<span>inline element</span>
<div class="frow inline">
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
  <div class="box-sample">sample</div>
</div>
<span>inline element</span>

.inlineのデモページ
 

Form

Form関連で使用できるレイアウトをみてみます。

HTML

<label>
  Name
  <input type="text" placeholder="Placeholder Text">
</label>

<label>
  Zipcode
  <input type="tel" maxlength="5">
</label>

<label class="column-center">
  Label pattern2
  <input type="text">
</label>

<label class="row-start">
  Label pattern3
  <input type="text">
</label>

<label>
  Dropdown
  <select>
    <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </optgroup>
  </select>
</label>

<label class="row-start">
  <input type="checkbox">
  Option 1
</label>
<label class="row-start">
  <input type="checkbox">
  Option 2
</label>
<label class="row-start">
  <input type="checkbox" disabled>
  Option 3
</label>

<label class="row-start">
  <input type="radio" name="group-one" checked>
  Option 1
</label>
<label class="row-start">
  <input type="radio" name="group-one">
  Option 2
</label>
<label class="row-start">
  <input type="radio" name="group-one" disabled>
  Option 3
</label>

<label>
  File
  <input type="file">
</label>

<label>
  Range
  <input type="range">
</label>

<label>
  textarea
  <textarea></textarea>
</label>

<div class="frow justify-around">
  <button class="col-xs-3-10">Regular</button>
  <button class="col-xs-3-10" disabled>Disabled</button>
  <a type="button" class="col-xs-3-10">Anchor</a>
</div>

Formのデモページ
 

カスタマイズする場合はclassを別途付与して上書きすればOKです。

HTML

<label>
  Name
  <input type="text" placeholder="Placeholder Text" class="input-custom">
</label>

<label>
  Dropdown
  <select class="select-custom">
    <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </optgroup>
  </select>
</label>

<div class="frow justify-around">
  <button class="col-xs-3-10 btn-custom">Regular</button>
</div>

CSS

.input-custom {
	border-bottom-color: #E74C3C;
}
.select-custom {
	color: #ffffff;
	background-color: #E74C3C;
}
.btn-custom {
	border-color: #E74C3C;
	color: #ffffff;
	background-color: #E74C3C;
}

Formのカスタマイズのデモページ
 

その他

GridとForm以外で用意されているclassをみてみます。

Clickable/Not-Clickable

要素をクリッカブルにしたり、リンクを非クリッカブルにします。
onclick属性のついている要素は自動でクリッカブルになります。

HTML

<span class="clickable">clickable</span>
<span onclick="">onclick</span>
<a href="http://frowcss.com" class="not-clickable">not-clickable</a>

Clickable/Not-Clickableのデモページ
 

Full Height

高さを100%にします。
画面いっぱいの高さにしたい場合、htmlとbodyにも.height-100を指定します。

HTML

<html class="height-100">
<body class="height-100">
<div class="height-100"></div>
</body>
</html>

Full Heightのデモページ
 

Full Width

幅を100%にします。

HTML

<div class="width-100">Full Width</div>

Full Widthのデモページ
 

Drop Shadow

ドロップ車道を追加します。
明るい背景用と暗い背景用の2種類が用意されています。

HTML

<div class="frow">
  <div class="shadow-sample card-shadow">.card-shadow</div>
</div>
<div class="frow">
  <div class="shadow-sample dark-card-shadow">.dark-card-shadow</div>
</div>

Drop Shadowのデモページ
 

Text Transform

テキストの大文字・小文字を変換します。

HTML

<div class="uppercase">Hello world</div>
<div class="lowercase">Hello world</div>
<div class="capitalize">Hello world</div>

Text Transformのデモページ
 

Clearfix

Frow内ではdisplay: flex;を使用していますが、float用にclearfixも用意されています。

HTML

<div class="clearfix">
  <div style="float: left;">float text</div>
</div>
<p>After float</p>

Clearfixのデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP