Sass3.3の@at-rootで親のルールを指定する | inkdesign
Sass3.3の@at-rootで親のルールを指定する Published on Feb 16, 2014 先日登壇したCSS Nite LP, Disk 32のセッションで紹介されていたSassのMixinをSass3.3の@at-rootで少し手を加えてみる、という話。 紹介されていたのは、天地左右中央に絶対配置するテクニックのMixin。 @mixin trbl($width: null, $height: null) { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: $width; height: $height; margin: auto; } .tbrl { @include trbl(100px,50px); } .tbrl { position: absolute; top: 0; bott
BEMの命名規則は賢い | inkdesign
BEMおよびその命名派生としてのMindBEMdingで使われるfoo__barやfoo--barというようなハイフン、アンダースコアを重ねた命名はキモいし冗長だと嫌われがちだ。僕自身も初見ではそのように思っていた。しかしこれは本当に良いアイデアだと思うし、実務でも僕は採用している。 CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということだ。ワードを明確に区切ることによって、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でこの珍妙な命名は優秀だ。 プロジェクトに関わる開発者が多いほど、その書き方にブレは生じる。もちろんコーディング規約なり、スタイルガイドなりであらかじめルールを共有しておけば
CSSの汎用クラスのつかいどころ | inkdesign
OOCSSをはじめとするCSS設計におけるモジュール指向のアプローチの話になると、下記のような単一プロパティで定義されたルールを組み合わせたものを指す、というような説明がされる場合がある。 .size1of4 { width: 25%; } .mrs { margin-right: 10px; } .font-small { font-size: 10px; } .text-left { text-align: left; } これらはUtilityとか、Helperとか、汎用クラスというように呼ばれ、あれば何かと便利なルールだ。 どういうときに便利かというのは、唐突なデザイン変更要求などに、都度そのためのルールを定義するよりも、これらの汎用クラスの組み合わせで対応できるということが挙げられるだろう。 <div class="mts text-center"> <img src="ban
ひし型のサムネイルをCSSでつくる | inkdesign
毎年12月に著名なWeb（+α）界隈の方々で綴られるアドベントカレンダーメディア、24 waysが2013年版でデザインが変わっていた。 その記事ページになどに使われている著者のサムネイルがひし形になっているが、それはひし形に加工されている画像を使っているわけではないようだ。 調べてみればなんてことない方法だが、なるほど、ってことで解説してみる。結論を先にいえば、transformプロパティを使う、ということだ。 <div class="diamond"> <img src="http://placecage.com/450/450" alt="Cage" /> </div> HTMLの方はシンプル。<img>とそれを包括する要素をtransformで変形させていく。 とりあえずサンプルはみんな大好きニコラス・ケイジで。 そしてCSSは下記のようにする。 .diamond { overfl
CSSプリプロセッサでスタイルガイド - inkdesign
07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイルガイドとはなにか スタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品（コンポーネント）をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。 具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。 MailChimp Design P
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSプリプロセッサでスタイルガイド | inkdesign
