Blogブログ

便利なBootstrapをsassでカスタマイズしたのでその記録。 githubで作ってくれている人がいる。流石！ https://github.com/alademann/sass-bootstrap まずはインストール。 $ bower install sass-bootstrap-compass   ダウンロードされたsass-bootstrap-compass/には、examples/が入っている。 このうち適当なものを複製して使っていく。 同じくsass-bootstrap-compass/に、sass-bootstrap-dist.zipがある。 js,imgを使うので解凍し、dist/へ突っ込む。   ※ここはcssのカスタマイズのログになります。 bootstrapのsassの構成 sass-bootstrap.scss が各モジュール専用のscssファイルをimportしているよう。 ここで必要・不要なものの調整が出来ますね。   // Compass utilities @import "compass"; // Core variables and mixins @import "variables"; @import "mixins"; // Reset @import "normalize"; @import "print"; // Core CSS @import "scaffolding"; @import "type"; @import "code"; … 色の変更 インクルードされているファイルの、_variables.scssで変更が出来そう。 例えば.navbar-inverseがデフォルトでは#222222なのでこれを変えたい場合、_variables.scssで"navbar-inverse"を探してやればOK。 ※変数がわからなければ_navbar.scssを探すなど

個人でのサービスを始めるにあたって、オープンソースかつMetro UIベースのテンプレートを使おうと思ってリサーチしたところ思った以上に良さげなのをたくさん見つけたのでメモ。 １．Bootme TRO Windows8風のデザインで、素晴らしい完成度。アイコンの種類も豊富で、綺麗。 でもレスポンシブで縮めた時に少し違和感を感じた。 ２．BOOTSWATCH テーマが充実したフレームワーク。Twitter Bootstrapベースで、320pressがWordPress用のテーマも配布しているようだ。 ３．Metro-bootstrap こちらもTwitter Bootstrapベース。BOOTSWATCHよりもシンプルで、カスタムしやすそうだ。 ４．Metro UI CSS こちらはよりWindows8っぽいデザイン。使用する際にはMetro UI CSSサイトへのリンクを設置する必要があるようだ。 ５．METRO MANIA これもまた素晴らしいクオリティ。。 ただ使用にはコストが発生するようだが、一番安いものでたったの$4。クライアントへの納品には問題なさそう。 カスタマイズしての再配布や販売の場合は$300ドルらしい。 https://wrapbootstrap.com/theme/metro-mania-no.1-metro-bootstrap-theme-WB07F9G8L by http://responsivewebinc.com/ ６．SCAFFOLD コーポレートサイトなんかに良さそうな、テンプレート。 DLリンクとライセンスに関する情報はみつからなかったのだが、ソースを見る限りはやはりTwitter Bootstrapがベースにある。 by http://iweb-studio.com/ しかしクオリティの高い素材がたくさんあることに驚きました！ スキルの高い制作会社も。。 世界は広いっす。 Thanks for developers!!!