【Susy】Sass,Compassでグリッドレイアウトしまそ - Milk+ea
何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を代入してから使います。 $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : 0.5em; $container-style : 上から順番に 何カラム使うか。上では１２カラム。 １カラムあたりの幅はどれだけか。 カラム間のmargin(幅)はどれだけか。margin-right: 1em みたいに。 グリッド左右のpaddingはどれだけか。TwitterBootstrapだったら.rowの左右にみたい
Tokyo Middleman Meetup #1でSusyのお話をしてきた
2013年11月22日、今をときめく静的サイトジェネレータ "Middleman" について語る会ことTokyo Middleman Meetup #1が株式会社ジェニュインブルー様で開催されました。 せっかくの機会だったので、自分もお気に入りのcss frameworkであるところのSusyについてお話させていただきました。 MIDDLEMAN MEETS SUSY by kumano ayumi スライドに出ているgridのサンプルはこちら。 Middleman Meets Susy - DEMO (Source on github) 当日の様子はこんな感じでした。(@machidaさんのtweet引用しまくります) ayumikoさんの発表。 (at SonicGarden Inc.) [pic] — https://t.co/awdzESOV68 — machida (@machi
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
[Compass] 超訳 Configuration Reference
CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav
![[Compass] 超訳 Configuration Reference](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Sprite Magic Selectors | Compass Documentation
If you want to add selectors for your sprites, it's easy todo by adding _active _target or _hover to the file name, In the example below we have a sprite directory that looks like: * note you can use - in file names also ex. glossy-active.png * * my-buttons/glossy.png * my-buttons/glossy_hover.png * my-buttons/glossy_active.png * my-buttons/glossy_target.png Now in our sass file we add: @import "m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hecbuma/compass-bootstrap: Sass Port of twitter bootstrap as part of the Compass Stylesheet Framework.
Sinatra Integration
