SassでFlexbox、レスポンシブ対応のCSSフレームワークをつくってみました!

SassでFlexbox、レスポンシブ対応のCSSフレームワークをつくってみました!

仕事で使っていたのを少しカスタマイズと修正をして、完全にオレオレフレームワークですが、公開しようかなと。

ダウンロード

対応ブラウザ

Android OS 4.1以上

iOS 6以上

IE10以上

Chrome最新

FireFox最新

Safari最新

どんなフレームワークなの?

・Sass + Gulp.js
・Flexboxでグリッドレイアウト
・レスポンシブ対応

主な特徴としては上記のとおりです。

生粋のフレームワークというよりかは、サービスやサイトを作る時の基盤のCSSとして使う感じかなと思います。なぜかというと
Sassディレクトリ構成はhiloki/flocss: CSS organization methodology.を参考にさせてもらっていたりBEMで書いています。

ガイドラインを明確に決めることで幾つものサイトを運営などする際に同じガイドラインで書けるようにしたかったので。

今後の展望

React.jsに対応させたい

5月からReact.jsの現場に移動でかつ、このフレームワークでページを作っていくことが決まってます。(やったー!!)
ということで今後はReactにも対応できるようにしていきたいですね。この辺はかなりリファクタが必要そうですし、脱jQueryを目指して改良していきたいですね。

オリジナルのロゴの作成

やっぱCSSフレームワーク作るならロゴ欲しいっすね!!今度作ります。それと合わせてDEMOページのリデザイン。暇を見つけていつかやります。

プルリクたくさん欲しい!!

公開した理由としては、プルリクをたくさんもらってもっともっといいCSSフレームワークにしたい!自分以外の人のコーディングを参考にしたい!っていうのが主な理由です。
もちろん自分でも仕事で使っているのでどんどんリファクタしていくのですが、きっともっといい書き方があると思うので勉強したいです。

ぜひ宜しくお願いします!!

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

同じカテゴリーの記事

ページの先頭へ