[B! webdesign][compass] demiflare168のブックマーク

【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はどれだけか。Twitter Bootstrapだったら.rowの左右にみたい

demiflare168 2013/12/09

リンク

Bookcasey — Harsh Compass Extension

Harsh Color-stop Gradients Compass extension for randomly generated CSS3 gradients with harsh color stops—like magical diamonds. Install the Gem Source on Github Read the Docs @include harsh() @include harsh(white, rgb(200,50,50), .95) @include harsh(random, white, .05) @include harsh($transparency: .95) @include harsh(#FF0000 blue rgb(50,200,50)) @include harsh($angle: top) @include harsh($angle:

demiflare168 2013/11/22

リンク

「Compass」、基礎から応用まで！ | 株式会社LIG

こんにちは、デザイナーの王です。今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。全くの初心者でも問題ありません！はじめに結論を言うと、CompassでCSSを書くと早い！見やすい！メンテしやすい！コード量がぐっと減る！一度使い出したら最後、もう元には戻れない！一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとはでは「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

demiflare168 2013/11/17

リンク

Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、デザイナーのサリーです。最近買った漫画は「ウメハラ – To live is to game -」です。さて、王くんのおかげで Sass + Compass を使えるようになりました。わーい！王くんのブラボーな記事はこちら↓ CSSの常識が変わる！「Compass」、基礎から応用まで！ Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。今回はconfig.rbの基本的な編集方法についてまとめてみました。 config.rb のデフォルトの記述 config.rbの中身は何もいじらないとこんな感じになっていると思います。（Codekitなどで吐き出すとCodekitのデフォルトの設定が入るので、またちょっと違います） # Require any additional compass plugin