まず npm で kouto swiss インストールします。今回は Grunt を利用するので一緒にインストールします。
$ npm install kouto-swiss grunt grunt-contrib-stylus --save-dev
Gruntfile.js に stylus 用の設定を書きます。options の use に kouto-swiss を指定します。
module.exports = function (grunt) {
grunt.initConfig({
stylus: {
compile: {
options: {
paths: ['stylus'],
urlfunc: 'embedurl',
use: [
require('kouto-swiss')
]
},
files: {
'css/style.css': ['stylus/base.styl', 'stylus/layout.styl']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.registerTask('default', ['stylus']);
};
stylus/base.styl を作成して、kouto-swiss をインポートします。
@import "kouto-swiss"
ここから kouto-swiss を使ってみます。まずは、CSSをリセットします。
meyer-reset()
Eric Meyer 氏の Reset CSSが出力されます。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
kouto swiss は、デフォルト設定では caniuse のデータを使ってベンダープレフィックスの必要有無を設定してくれます。設定はバージョン情報をグローバル変数を変更するだけです。
サービスが IE 10 以降がサポート対象なので、kouto swiss の推奨プレフィックス情報から IE だけ変更します。
ks-support-ie = 10
ks-support-firefox = 25
ks-support-chrome = 20
ks-support-safari = 5
ks-support-opera = 15
ks-support-ios-safari = 5
ks-support-opera-mini = false
ks-support-android-browser = false
ks-support-blackberry-browser = false
ks-support-opera-mobile = false
ks-support-android-chrome = false
ks-support-android-firefox = false
ks-support-ie-mobile = false
linear-gradient を使って、ベンダープレフィックスの設定を試してみます。
.title
background-image linear-gradient( to top right, #ffffff, #cccccc)
次は、よく使う clearfix を使ってみます。（Nicolas Gallagher 氏の micro clearfix がベース）
.clearfix
clearfix()
三角形を描画するときは下記を使います。
.triangle
triangle( up, 30px, #00f)
デザインにグリッドシステムを簡単に適用できます。固定サイズで 12 のグリッドを作成します。
body
gs( "fixed", 12, 40px, 10px )
次に グリッド 4 つ分のカラムを設定します。
.col4
col(4)
3つ並べてみます。
ほかにも便利な機能がたくさんあります。今まで Sass + Bourbon にお世話になってきましたが、Stylus を使うときは kouto swiss が便利そうです。
kouto swiss - A complete CSS framework for Stylus