先日配布用にUPしたWelcart対応のレスポンシブテーマですが、自分のサイト用に刷り合わせする課程で、CSSフレームワークを入れ替える暴挙に出てしまい、再び夜な夜な作業をしておりました。で、やっと配布用は完成なのでここの更新です。
シンプルなSCSSのフレームワーク【Base】
恐らくウチのお客様方にとっては相変わらずなんのこっちゃ？？なネタですが、HPを構築するのに便利なのがCSSフレームワークと呼ばれるモノたちです。
世の中素晴らしい方々が沢山いらっしゃって、CSSのフレームワークを配布していらっしゃいます。当然ライセンス的なものはあるので要チェックですがとても便利です。
王道はBootstrapでしょうし、いつも参考させて頂いてるMamekko様推しのファンデーションもとても使いやすかったです。
で、初期はファンデーションベースで作ったのですが、やりたい事があったのと、SASS(SCSS)で書きたくて違うフレームワークを使いました。
ちなみにファンデーションも当然SCSSを公開しているので当然第一候補だったのですが… ファイル数ハンパねーー!!って事でやめたワケです(汗)
で辿りつたのが【Base】でした。
最小限のファイル数が良いBase
少しでもHPいじったり、ブログいじったりした事がある人ならご存知と思うCSSですが、最近ではSCSSとかSASSとかLESSとかいって複数のファイルでプログラム的に構成して最後に普通のCSSファイルに返すってやり方になってきつつあるようです。覚えるのに一苦労でしたし、別に今まで通りのCSSの書き方でも問題ないのですが、１度SCSSを使えば便利さに驚くほどです。
ただ、ファンデーションやゴリゴリCSSを出力している方々のSCSSファイルはかなり色々セッティングされててファイル数ハンパないんですよねー。触りたいトコロ見つけるのに一苦労。ファンデーションの場合はファイルってより行の捜索って感じでした。
そんな中で出会ったのがとってもシンプルなSASSで構成してるフレームワークのBaseです。ファイル数は１０個くらいですかね？数えてないけど、そんなもんです。必要最低限って感じで、SCSS触りたての僕にはピッタリでした。
シンプルなのでSASSの構造も理解しやすくて、SASSを覚えたいって人にはピッタリな気がします。
CSS設定も最低限
最初から設定してある要素も最低限です。コレ、僕にとってはとても都合が良くて、無駄なCSSを吐かなくて済むんですよね。どうせ細かくCSS刻むわけですから最低限のほうが良い気がします。
多分フレームワークで一番必要なのってグリット機能ですよね。それは全然問題無しです。ファンデーションのようにブロックグリットが無いので自分で作る必要はありますが、結構簡単でした。
今回のテーマ改変は、ほぼ普通のCSSで書いた後にSASSで書いてるのであまりSASSの良さを活用していませんが、ほんの僅かにミックスイン使ってます。あれば便利ですね。
ブレイクポイント毎にファイルも分けてあるのでとても見やすい。きっとゴリゴリ書く場合はもっとファイルを細分化させるのでしょうが、ウチ程度ならBaseのファイル数くらいで十分な気がしました。
ついでにSASSで書くと、SASSに見やすいCSSを書いているので最終出力の従来のCSSはminファイル化して出力しちゃいますので軽量にしつつも後のメンテもやりやすい。なので、配布テーマもminファイルでcss出していますので、テーマ直下のCSSファイルは空っぽにしてあります。SASSで触りたい人はSASSのほうで改変すれば良いし、SASSが分からなければテーマ直下CSSに書けば上書きされるって感じです。
まとめ
SASSを触ってみてWEBの進化を大きく感じました。たかが１行のSASSが数行のCSSとして出力出来るワケですし、cssで簡単な演算までやってしまうのですから… 凄いです。その内、ディープな使い方じゃなくて、簡単な使い方くらいは書くかも知れません。
ディープな使い方はプロな方々が詳しく書いてます。
そして、自分ではまだまだヒヨッコでディープでは無いと思っていますが、親しい方々から『何処を目指してるの？？』と言われる機会が増えてしまった自分にも驚きです。多少、web系企業で働いてみたいとも思っていますが… 多少でも無いかも知れないけど(笑)
ではでは そんなこんなで再構築したサンプルサイトです。 ご興味があれば、落として使ってみて下さい。結構凝り性なので、商売に必要な出力は色々組んでいます。サンプルサイトはコチラ＞＞ riffles
なんべんも書きますが、無償で自分のスキルアップが主な目的なのでエラー吐いてる事もあります… その時はご勘弁下さい。サポートはしませんが、ご連絡いただければエラーの修正は可能な限り早くやります。ではでは。