オリジナルCSSフレームワーク?っぽいのをgithubに上げてみた

書いてる時点で超眠いので中身は後日・・・w

マークアップしてる大抵の方は、自分が最初に使うであろうスタイルや、毎回使用しているクラスとかがあるかと思います。
それは各々、スニペット化してたりとか、テンプレート化してたりするのではないでしょうか。

で、私もそろそろそういう感じなことしたいなーと考えて、githubにあげちゃおうということにしました。
スニペットだと結構忘れたり、作りすぎていっちゃうとかあるので、、、。

gitで管理しとけば別プロジェクトにgitのsubmoduleとして突っ込んどけば色々楽が出来ます。(特にmixinとか)
git関連のお話はまた今度。

今回公開した「Type-Zero」というCSS

Type-Zero | github

ハッキリ言って、現時点では未完成ですw フレームワークとは呼べません。完全に自分専用。

mixin周りがゴチャゴチャしてたので、ちゃんと整理できたらコミットしときます。

あくまでまだ自分用にしか考えてないので、ホントにフレームワークと呼べるレベルになったら色々考えようかなぁと。

Type-Zero について

Sass+Compassで作ってあります。最近ホントに「compass」のお世話になっております。PCサイトも基本「Compass」。ベンダープレフィックス書き忘れしやすいですからね。

ちなみに使い方は「config.rb」がある場所で「compass watch」しとけばいいです。

こんなんですが、結構実用に耐えます。

名前の由来はこれを作ったキッカケなプロジェクト名とか、ポートフォリオサイト名がそういやzeroだったな的なw

日本語だと『零式!』

バハムートの方か!?それともなんとか朱雀の方か!?どちらにせよF◯やw

あくまでどのサイトでも使える普遍的なものだけを残した形なので、本来サイトの特徴に当たるようなデザイン関係のスタイルは載ってないです。本来のスタイルは「_layout.scss」に記入してる感じですね。

「_common.scss」がこれの要なわけですが、見れば分かるこの適当感w

適当とは言い切れないというか、「OOCSS」を意識してパーツ化してクラスを作っています。なので、一発ネタ的な部分にはオブジェクト的に当てはめていきます。

OOCSSってなんぞや

OOCSSについては高津戸さんのこちらの記事を見てもらえれば超分かりやすいです。

OOCSSとSass

OOCSSについて話しだすと長い記事が書けてしまうので、これも置いといて・・・。

githubを有効活用していく

普段プロジェクトでgitばっか触ってるので抵抗ないのですが、gitとかバージョン管理の経験が浅い人ってまだ結構いると思います。

使い出すと本当に便利なので、こんな感じでオレオレテンプレートをgit管理してみるところから始めてみてはどうでしょうか?最近の採用ではgithubを見せることも普通になってきました。

採用側としては評価する為にコードが見られれば良い話なのですが、gitが扱えるかどうかもついでに分かりますし、githubを知ってる知らないは結構重要なことなんでないかと。(エンジニアで知らないのはちょっと困りますがw)

githubはWebエンジニアばかりが使っているイメージは確かにあります。しかし、自分みたいなマークアップがメインな人でもこんな感じに有効活用手段は見つけられるので、色々やってみてはいかがでしょうか。

Type-Zeroの解説とか書きたいことはたくさんありますが、今回はこのへんで。