Layout - Bulma を読んだ。 Bulma はサイトの幅を決めるコンテナー(.container)を持つ。どこでも使えるクラスだが、主に以下のクラスの子要素とし指定される。 .navbar .hero .section .footer コンテナーのサイズ $desktop、$widescreen、$fullhd とあり、それぞれブレークポイントから左右の余白(デフォルトでは 32px * 2 )を引いた数値になっている。これらの数値は 12px または 16px で割り切れる数値になっている。 左にロゴ、右にナビゲーションのように、水平方向の配置を指定するためにレベルというのも用意されている。親要素に .level、子要素に .level-left と .level-right(右両側配置をしたいときに使う。なくてもいい)、孫要素に .level-item といった構成で使う。レ
概要 Bulma というCSSフレームワークを使ったサンプルページを作りました。 Bulma は、以下の特徴を持つ CSSフレームワークです。 Flexbox をフルに活用している。 シンプルなグリッドシステム 学習が容易 カスタマイズが簡単 JavaScript は含まれていない。 Flexbox をフルに活用している Flexbox というのは、今まで難しかった「要素を横に並べる」機能を簡単に実現するための新しい CSS の仕様です。(参考:CSS Flexible Box Layout Module Level 1) このサイトでも CSS Flexible Box Layout Module のサンプルページを作りました というページで取り上げています。 Bulma はこの新しい CSS の仕様をフルに活用しているフレームワークです。 シンプルなグリッドシステム Bulma には
新しいプロダクトを作る際にnuxt.jsのデフォルトで選択できるBulmaがあったので使ってみました。 まずは公式ドキュメントを一通り読んで見る。コンセプトなどは難しいですが、流し呼んで20分ぐらいでざっと見れるので全ページ見たほうが良いです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く