Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8825

UIkit3の拡張用CSSファイル(UIkit Plus α)を公開してみた

$
0
0

最近Web開発をする際のフロント側のCSSフレームワークに、UIkit3をよく使用しています。(特に指定が無い限り)
個人的にBootstrapMaterializeなどいろいろと使ってきましたが、自分的にこれが一番使いやすかったので。(あとデザインが好き)

ただしUIkitのみで全てを賄える訳ではもちろんないので、必要に応じて独自のCSS定義を追加するのですが、そういった時には決まって、

  • そういえば以前にも同じ定義を書いたなようなと思いつつ同じ定義をまた書く
  • 以前作ったものを探してきてコピーして使用する

ということを繰り返してました。

そんな経緯から、なら 良く使うものをまとめてしまえ!と思い至り、
せっかくまとめたのなら、どれだけ需要があるのか分かりませんが、 公開してしまえ!とw
そしてUIkitがもっと普及するといいな。

というわけで公開したのが UIkit Plus αになります。
UIkit3の使用が前提となりますが、ご自由にお使いいただければと。

余談ですが、
昔は自分にもデザインはデザイナーさんの仕事だよね?と思っていた時もありました。
ただ最近はこういったCSSフレームワークの普及などにより、ある程度なら簡単にデザインが組めるようになり、開発時の線引きも曖昧に。
さすがにある程度はデザインをいじれないとマズイかなと思い、手を出したところ、、、見事にハマってしまいました。(笑)
開発するうえで、機能的な要件を満たすことは当然ですが、見栄えというのも大事ですよね。

UIkit Plus α

UIkit3と合わせて取り込むことで、少し拡張(使用できるCOMPONENTSを追加)することができます。
日頃の開発の中で今後も使いそうだなと思ったものをCOMPONENT化しています。(独断と偏見によりw)
同じくUIkitを使用する方の手助けになれば幸いです。
まだまだCOMPONENTの数は少ないですが、今後も随時COMPONENTを追加していく予定です。

使い方や追加されるCOMPONENTSの詳細は下記ページをご覧ください。
実際のデザインやサンプルコードを確認頂けます。
Document

「こんなCSS定義をよく使うんですけど」などを
GitHubのIssueに書き込んでくれれば、もしかしたら(もしかしたらですよ?)追加されるかもしれません。

UIkit Plus α で追加されるCOMPONENTS

  • Paragraph - 段落表示
  • Sub Text - サブテキスト
  • Box List - ボックスタイプのリスト
  • Border Table - 枠線タイプのテーブル
  • Titled Preformatted Text - タイトル付き整形済みテキスト
  • Side Fix Nav - 右上固定のナビゲーション
  • Floating Button - フローティングボタン
  • Margin Mini - 極小のマージン設定
  • Message Box - メッセージ表示

Viewing all articles
Browse latest Browse all 8825

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>