railsで、オリジナルアプリを作成中のプログラミング歴3ヶ月の者です。
オリジナルアプリを作成する中で、rails6にBootstrapを入れようとするとなかなかの手間で、エラーが続き時間を食ってしまったので、方向転換しました。
参考にした記事(https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)
cssフレームワークをBULMAにしようするので、簡単に概要をまとめてみました。
BULMA
上記が公式ホームページになります。
BULMAとは？
モバイル優先のオープンソースのcssフレームワークです。
Bootstrapしかcssを知らなかった私からみた、大きな違いは、CSSだけで成立しているということです。
<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>
全体をcolumnsクラスで囲って、左から4カラム並べられるようです。
実にシンプル。
<div class="columns">
<div class="column is-four-fifths">is-four-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
上のBULMAでは、最初のカラムだけ全体を5としたときの４を大きさに指定して、残りの二つのカラムでは自動で残りの幅を二等分して配置してくれるみたいです。
これもわかりやすくて、使いやすそう。
BULMAの基本構文（修飾子）
<a class="button">
Button
</a>
クラスにボタンを渡すと、ボタンができます。
<a class="button is-primary">
Button
</a>
基本的に、BULMAは"is-"または"has-"で始まるみたいです。直感的に英語の文章みたいでわかりやすいですね。
primaryは色の指定です。
<a class="button is-small">
Button
</a>
is-[small or medium or large]で大きさの指定ができます。
上記では、buttonクラスも存在するので、小さなボタンが出来上がります。
上記で紹介したのは、BUlMAのごく一部です。
こちらの記事が、とても参考になりました！！！