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

まず 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

http://kouto-swiss.io/