chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2015/03/12

[CSS]最低限のスタイルだけ設定したミニマルなレスポンシブフレームワーク「SkyBlue」

12カラムのグリッドシステムを採用した、レスポンシブフレームワーク「SkyBlue」をご紹介いたします。
最低限のスタイルを設定したミニマルなフレームワークです。
対応ブラウザはChrome,Safari,Firefox,IE9以上となっております。
ライセンスはMITライセンスです。

ミニマルなレスポンシブフレームワーク

フレームワークで有名といえばTwitter社が開発した「Bootstrap」ですが、

最近のBootstrapは肥大化しており、カスタマイズする際には中々大変になってきました。

今回ご紹介するレスポンシブフレームワーク「SkyBlue」はなるべくスタイル設定は少なくしたミニマルなフレームワークです。

css-framework-skyblue1

12カラムのグリッドシステムを導入し、幅の設定は%で指定しレスポンシブに対応させているようです。

css-framework-skyblue2

タブレット表示時

css-framework-skyblue3

スマートフォン表示時

スタイルを設定しているのは、

  • pタグ
  • h1-h6の見出し
  • ul,olのリスト形式
  • 引用のBlockquote
  • HTMLなどのソース表示などのcodeタグ
  • Table
  • Form
  • ボタンやフォントアイコン等
  • margin/paddingの汎用クラス

またCSSに関してはSassで制作されています。

対応ブラウザに関して記述はなかったのですが、今後の開発予定として

IE9以上のチェックボックスのスタイリングとなっていましたので、対応ブラウザはIE9以上としているようです。

ライセンスはMITライセンスです。

SkyBlue

GitHub

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加