twitter-bootstrap / Drkcore

HTML5 ★ BOILERPLATEを読んでみた

Wed, 20 Mar 2013 07:09:56 +0919

14th Knock!のセッションでHTML5 Boilerplate読みをやるよーっていう案内を見て、そういえば僕もH5BPの中身を読んだことなかったわーということで読んでみた。

もともとInitiailzr経由でbootstrapを使い始めたのだけど、その際にH5BPかbootstarpのどちらかを選択するみたいな印象を受けたので、両者は同じようなフレームワークなのかぁと勝手に理解してたんだけど、改めて読んでみたら全然違った。

H5BPはhtml5のボイラープレートとレスポンシブ・ウェブデザインのためのcssがちょっと含まれている。一方でtwitter-bootstrapはgridシステムとかUIを備えたcssのフレームワークって感じで、実は補完する関係なのね。Initiailzrでbootstrapのセットをダウンロードするときについてくるindex.htmlのスケルトンはH5BP由来だった。

ソース読むのが手っ取り早かったけど、H5BPのドキュメントもよかった。特にExtend and customise HTML5 Boilerplateはメタデータとかマイクロフォーマットが完結にまとまっていた。

興味があれば

14th Knock!は2013年4月19日（金）19:30〜21:30だそうです

14th Knock!

Sphinxのテーマにtwitter bootstrapを使う

Sun, 03 Feb 2013 16:42:08 +0919

pipできるようになってた。

sudo pip install sphinx_bootstrap_theme

で使えるようになる。

あまりCSSをいじる気がなければこれでいいかなと思うが、弄りたい場合にはこっちのやり方のほうがいいかな。

あとで何かで使ってみようっと。

Hakyll+bootstrapでGithub Pagesをつくった

Sun, 09 Dec 2012 10:48:22 +0919

次回の三島Haskell無名の関数の会は懇親会を鈴木屋@三島でやることが決定しているので、前回のホルモン画像を使ってみた。

使ったもの

Shizudevつくる会でbootstrapの勉強会をやりたいなーと思っているんだけど誰か興味ある人いないじゃろか？

bootstap用の配色ツールを使ってみた(PaintStrapとLavish)

Sat, 08 Dec 2012 11:56:31 +0919

BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介で二つ紹介されてたので、両方触ってみた。

Paintstrap

PaintStrapはAdobe kulerとCOLORloversの配色を取り込んでbootstrapに設定してくれる。

が、kulerがいまいち使えないというか、気に入ったパターンをアプライするとごちゃごちゃした感じになるので「えーこんなの使えねーじゃん」と最初は結構悩んだ。

どういうパターンを選択するのがよいかということになるわけだが、kulerを使った誰にでもできそうなWeb配色を参考にした。というわけで、同系色の濃淡+アクセントカラーというパターンを選ぶとうまくいくことが多いかなと。

natureとかいい感じ

kulerだと7:2.5:0.5とか色の面積比で見ることができないので、面積力がなくてバランスが掴めない場合にはCOLORloversの比率付きで出ているパレットを使ったほうが全体のイメージが掴みやすいかもしれない。それから色で検索できるので個人的にはこっちを使うほうが楽かなと思う。lavish(後述)でつくったセットが気に入らない場合に色で検索できる。

Lavish

写真からbootstrapの配色を決定しくれるサービスなのでお手軽。自分の写真から配色つくれば、オリジナルの写真をherounitにでも設定すれば素敵になるし。

写真もアクセントカラーの効いてるヤツを選ぶといいみたい(こういうのとか)

Flickrで良さげなのをみつけてアプライするのもいいと思う。

ただ、どうしてもボケた感じになってしまうので、似たような配色をCOLORloversで探してみることは多いかも。あとはFlickr使うとオリジナルの写真を貼付けにくいので、自分のPhotostockの中から使うのがいいかな。

配色の管理

つくったlessは自分用twitter bootstrapを管理するでmy_variablesを配色名にちなんだ名前のファイルにしてヘッダーにオリジナルの画像のURLがlavishとかパターンのurlでもつけておけばいいかなと思う。

こんな感じで使ってみようと思う。

ウェブ配色コーディネートカタログ
坂本邦夫
技術評論社 / 2604円 ( 2011-02-23 )

Blogのデザインを変えた

Sun, 02 Dec 2012 11:20:41 +0919

RSSへのリンクが切れてたり、横長のアドセンスが邪魔だったので、ちょっとデザインを変更した。

Nexus7では快適に、iPhoneではまぁまぁ快適に読めるようになった。

twitter bootsrapを使っていて分からなかったところがあったのでメモっておく

marginの設定が効かない(例えばプロフィール画像とか)ので、画像と文字がくっついてしまって困っている

レスポンシブデザインのサイトにGoogleAdsense放り込むとめんどくさいよね

Sun, 18 Nov 2012 05:04:49 +0919

今、728x90の横長のやつを張り付けているんだけど、スマホで表示させると邪魔だ。動的に大きさを変更するのは規約違反らしいので、横長よくないじゃんと。まぁサーバー側でチェックしてサイズ変えてもいいんだけどいちいち面倒くさい（というかbootstrap使う必要ないじゃん的な）。

2カラムにしてサイドバーの方に320x320くらいのレクタングルを貼り付けておくのが良いかなと思ったのでTwitter Bootstrap: Build A Stunning Two Column Blogを見てた。

というわけで2カラムのデザインでヨサゲなやつを参考にしてなんか作ろうかなと思ってwordpressのテーマを漁っている。

bootstrap関係

less-css-modeを入れた

Wed, 26 Sep 2012 20:10:57 +0919

最近Twitter-Bootstrapを使っているのでEmacsのLESSモードが欲しくなった。

less-css-mode

site-lispでgit cloneしたら

(setq load-path (cons "~/.emacs.d/site-lisp/less-css-mode" load-path))
(setq exec-path (cons (expand-file-name "~/.nvm/v0.8.0/bin") exec-path))
(require 'less-css-mode)

Flymakeも走るので快適だ。

自分用twitter bootstrapを管理する

Tue, 11 Sep 2012 14:44:40 +0919

ウェブ業界なんかだとデザイナーさんがいるので、「デザインがーーーーー」みたいなのはクリティカルな問題にはならないのかもしれないが、製薬系の研究所とかだと、研究所内のシステム構築のためにデザイナーを雇うとかまずあり得ないので、しょっちょう悩みます。

特に、イントラでウェブサービスやろうとか思ったらjQuery使って見ためを良くしたりとかユーザビリティとか考えて使いやすくしたりといったフロントエンドのスキルは必須。

つまり、モックを使ってできるだけ早く70点のユーザーインターフェイスを作るスキルが超重要なわけだ。

しかも、twitter bootstrapを使おうと思ったら、頻繁なバージョンアップに対応しないといけないわけで。

GitHub対応

GitHubハンズオンやったので、その時の@ishisakaの資料を参考にすればいいと思います。

とりあえず、本家からforkしたらcloneして、upstreamを設定します。

git clone git@github.com:kzfm/bootstrap.git
cd bootstrap/
git remote add upstream https://github.com/twitter/bootstrap.git
git fetch upstream
git merge upstream/master

これで最後のニ行を叩けば常に本家の更新に追随できるようになります。

設定を変更

Twitter Bootstrap Customization Best Practicesの後半を参考に、bootstrap.lessとvariavles.cssをコピーして自分用の設定ファイルを用意する。my_bootstrap.lessとmy_variavles.lessにした。Makefileのbootstrap.lessもmy_bootstrap.lessに変えておく。

こうしておけば本家のファイル群を変更する必要がないので、いつでも

git fetch upstream
git merge upstream/master

すれば、本家の更新に対応できる。

コンパイルしたい場合には

$ make bootstrap
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
recess --compile ./less/my_bootstrap.less > bootstrap/css/bootstrap.css
recess --compress ./less/my_bootstrap.less > bootstrap/css/bootstrap.min.css
recess --compile ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
recess --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css
...
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

bootstrapディレクトリ以下にコンパイルされる。

その先

あとは、Twitter Bootstrap＋その他で「本当に」イケてるモックを作る手順なんかを参考にしながらいい感じの自分用モックを量産すればいいと思うのだが、そういうのをもくもくとやるといい気がしませんか？

というか、やることにしたので興味があれば参加するといいと思います。プレゼンしたいひとも歓迎。

静岡デベロッパーズつくる会#6 (Mock! Mock!)

ATND 静岡デベロッパーズつくる会#6

だらだらと作ってもよし、黙々と作ってもよしのつくる会です。前回同様、好きな時間に来て好きな時間に帰ってかまいません。

今回はMock! Mock!とモックをモクモクいじる回にしてみました。みんなで一緒にtwitter bootstrapをいじりましょう。

レスポンシブ・ウェブデザイン標準ガイドあらゆるデバイスに対応するウェブデザインの手法
こもりまさあき
エムディエヌコーポレーション / 2625円 ( 2012-05-25 )

Twitter Bootstrap Customization Best Practices

Tue, 07 Aug 2012 05:57:59 +0919

最近Twitter Bootstrapばかりいじっているので、カスタマイズのやりかたが非常にきになって仕方がない。LESS覚えないといけないけど、それはあんまり問題じゃなくて、アップデートに柔軟に対応できるような構成にしておくのが重要だったりする。

できるだけカスタマイズ性をあげつつ、一方で更新に対応するため、bootstrap自身はできるだけ触らないようにするにはどうしたらいいか探してたら、sofに2つほどやり方載っていた

Twitter Bootstrap Customization Best Practices

add-on.lessをbootstrap.lessの途中に挟み込む方法

変数の設定とミックスインの設定をした後に独自の定義を施したlessを読み込んで上書きする。

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

bootstrap.lessに手を入れちゃうので、更新するたびにこの一行を書きなおす可能性があるかも。あんまり気にならないのかもしれないが。

bootstrapには触らない方法

bootstrapは適当なディレクトリ(この場合はbootstrap)においておいて、bootstrap.lessとvariables.lessをコピーしてくる。bootstrap.lessはtheme.lessに名前を変える。

/Website            
       theme.less
       variables.less
       /bootstrap

variables.lessは好き放題変更を加える。theme.lessの方は変更を加えたvaliables.lessをimportするようにして、残りはbootstrap/*.lessをimportするように修正を加える。

こうしておけば、bootstrap以下は常に安全に更新できる。

特にgit cloneしたtwitter-bootstrapの場合、git pullで安全に更新することができるのでこっちのほうがいいかもしれない。

今度つくるサイトはこの方法でやってみる。