Stylus 用の Bourbon ライクな CSS フレームワーク kouto swiss を使ってみる

まず npm で kouto swiss インストールします。今回は Grunt を利用するので一緒にインストールします。

```zsh
$ npm install kouto-swiss grunt grunt-contrib-stylus --save-dev
```

`Gruntfile.js` に stylus 用の設定を書きます。`options` の `use` に **kouto-swiss** を指定します。

```js
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/)が出力されます。

```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](http://caniuse.com/) のデータを使ってベンダープレフィックスの必要有無を設定してくれます。設定はバージョン情報をグローバル変数を変更するだけです。

サービスが 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](http://nicolasgallagher.com/micro-clearfix-hack/) がベース）

```
.clearfix
  clearfix()
```

三角形を描画するときは下記を使います。

```
.triangle
  triangle( up, 30px, #00f)
```

![sc.min.png](https://qiita-image-store.s3.amazonaws.com/0/49600/d082fc0e-7576-07a4-e811-a12f5079ab4d.png)

デザインにグリッドシステムを簡単に適用できます。固定サイズで 12 のグリッドを作成します。

```
body
  gs( "fixed", 12, 40px, 10px )
```

次に グリッド 4 つ分のカラムを設定します。

```
.col4
  col(4)
```

3つ並べてみます。

![sc1.min.png](https://qiita-image-store.s3.amazonaws.com/0/49600/1ac9269e-6eb4-0880-c8fd-ee8b22f3daa1.png)

ほかにも便利な機能がたくさんあります。今まで Sass + Bourbon にお世話になってきましたが、Stylus を使うときは kouto swiss が便利そうです。

---

**kouto swiss - A complete CSS framework for Stylus**

[http://kouto-swiss.io/](http://kouto-swiss.io/)