普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作)
で、CSSでもよく出るクラスなどはまとめておいたほうが便利だなぁ・・・と思い、使えそうなものをまとめて見ました。
ちなみにレスポンシブを前提にしてます。
mobileとそれ以外をすぐに判定できる関数
|
1 2 3 |
@include mobile{ } |
いちいちメディアクエリを書くのはめんどいので上記のような処理でmobile or PCのCSSをすぐに制御できるように。
ちなみにbreakpointも変数でセットしておきましょう。
is-hidden-mobile
携帯の時は自動的にdisplay:noneになる設定です。
is-横幅判定-flex-横-縦
例えばis-tablet-flex-end-centerみたいな。
このクラスを書けばmobileの時に
|
1 2 3 |
display:flex; align-items: center; justify-content: flex-end; |
のCSSが追加されます。よく使うパターンは登録しておくと非常に便利です。単独のis-tablet-flexなども書いておくと便利かも。
ラベル+入力欄系
業務管理システムだと入力欄が非常に多く、ラベル+入力欄が非常に多いため
|
1 2 |
display:inline-block; margin-right:10px; |
などのクラスを作っておくと大量に書く時に便利かもしれません。クラス名にlabel_maring10などとしておき、5刻みあるいは10刻みで作っておくと便利かも・・・
widthを使うパターンも用意しておきましょう。
他margin-bottomを入れるパターンなども用意しておくと良いですね。
あとは画面をみて共通にパーツ化できる場面をできるだけたくさん見つけることでしょうか。そうしておくと作業が早くなるかと思います・・・
ちなみに上記のようなクラスはBulmaというCSSのフレームワークを使っていて着想を得ることが多かったです。他のCSSフレームワークを使っても同じかと思いますが・・・
