最近Web開発をする際のフロント側のCSSフレームワークに、UIkit3 をよく使用しています。(特に指定が無い限り)
個人的にBootstrapやMaterializeなどいろいろと使ってきましたが、自分的にこれが一番使いやすかったので。(あとデザインが好き)
ただしUIkitのみで全てを賄える訳ではもちろんないので、必要に応じて独自のCSS定義を追加するのですが、そういった時には決まって、
- そういえば以前にも同じ定義を書いたなようなと思いつつ同じ定義をまた書く
- 以前作ったものを探してきてコピーして使用する
ということを繰り返してました。
そんな経緯から、なら 良く使うものをまとめてしまえ！ と思い至り、
せっかくまとめたのなら、どれだけ需要があるのか分かりませんが、 公開してしまえ！ とｗ
そしてUIkitがもっと普及するといいな。
というわけで公開したのが UIkit Plus α になります。
UIkit3の使用が前提となりますが、ご自由にお使いいただければと。
余談ですが、
昔は自分にもデザインはデザイナーさんの仕事だよね？と思っていた時もありました。
ただ最近はこういったCSSフレームワークの普及などにより、ある程度なら簡単にデザインが組めるようになり、開発時の線引きも曖昧に。
さすがにある程度はデザインをいじれないとマズイかなと思い、手を出したところ、、、見事にハマってしまいました。(笑)
開発するうえで、機能的な要件を満たすことは当然ですが、見栄えというのも大事ですよね。
UIkit Plus α
UIkit3と合わせて取り込むことで、少し拡張(使用できるCOMPONENTSを追加)することができます。
日頃の開発の中で今後も使いそうだなと思ったものをCOMPONENT化しています。(独断と偏見によりｗ)
同じくUIkitを使用する方の手助けになれば幸いです。
まだまだCOMPONENTの数は少ないですが、今後も随時COMPONENTを追加していく予定です。
使い方や追加されるCOMPONENTSの詳細は下記ページをご覧ください。
実際のデザインやサンプルコードを確認頂けます。
Document
「こんなCSS定義をよく使うんですけど」などを
GitHubのIssueに書き込んでくれれば、もしかしたら(もしかしたらですよ？)追加されるかもしれません。
UIkit Plus α で追加されるCOMPONENTS
Paragraph - 段落表示
h1～h6の先頭にシンボルを表示します。
Sub Text - サブテキスト
h1～h6にサブテキストを表示します。
Box List - ボックスタイプのリスト
枠線で囲うタイプのリスト表示です。
リンクとして設定することもできます。
Border Table - 枠線タイプのテーブル
シンプルな枠線タイプのテーブルです。
Titled Preformatted Text - タイトル付き整形済みテキスト
ソースの表示などに適した整形済みテキストです。
左上にタイトルを付けることができます。
Side Fix Nav - 右上固定のナビゲーション
右上に固定表示するナビゲーションです。
Floating Button - フローティングボタン
フローティングの丸ボタンです。
Margin Mini - 極小のマージン設定
本家UIkitの.uk-margin-smallよりも、さらに小さいマージンを設定します。
Message Box - メッセージ表示
シンプルなメッセージ表示です。
Movable Label Input - ラベルが動くインプットボックス
プレースホルダ的な表示(通常時)から、ラベルが上部に移動する(フォーカス時)タイプのインプットボックスです。
Infinite Scroll - 無限スクロール
最後までスクロールした際に自動で続きのデータを読み込むことで、最終データまでの無限スクロールを実現します。