Hatena::ブログ(Diary)

@camelmasaの開発日記 このページをアンテナに追加 RSSフィード

Githubで活動しています。

2012-12-11

Subtle Patternsで提供されている画像を簡単に扱えるgem subtlepatternsを作成しました。

| 03:03

id:ken_c_loさんが作成された”ズルいデザインテクニック”の中で紹介されていたSubtle Patternsが仕事でもプライベートでも使用していて、便利だなーと思ってたので、もっと簡単に利用出来る様gemにしました。

参考 http://d.hatena.ne.jp/ken_c_lo/20121115/1353004699


github

https://github.com/camelmasa/subtlepatterns


使い方

githubのREADMEに書いてありますがこちらにも記します。


Railsへのインストール方法

Gemfileに追加

gem "subtlepatterns"

コマンドを実行

bundle install

application.cssに追加

*= require subtlepatterns/prefix

CSSのクラス名にprefix(subtlepattern)が要らない場合

*= require subtlepatterns

これでインストール完了です。

使用方法

後はHTML内で指定していきます。

<body class="subtlepattern_xv">

<div class="subtlepattern_zigzag">

と指定します。

すると、background-imageにSubtle Patternsの画像が表示されます。


CSSのクラス名一覧はgithubのREADMEを参照してください。

https://github.com/camelmasa/subtlepatterns

2012-11-14

Twitter Bootstrapにcompass, Sassy Buttons, zurui-sass-railsを追加する手順。

| 00:11

今週に入ってガリガリとHTMLCSSを書く事がありました。

折角、Railsでシステムを開発しているという事もあるので、効率良くCSSを書く方法を調べてみました。

調査結果

  • Twitter Bootstrapの色味を変えるだけでそこそこのデザインが出来る。
  • SCSSよりSASSがイケてる。
  • SASSを使うならcompassを使うと効率的にSASSを扱える。
  • Sassy Buttonsを使えばTwitter Bootstrapぽいボタンの色違いが簡単に作成出来る。
  • zurui-sass-railsを使えばズルイデザインが出来る。

上記の事が分かったが、Twitter BootstrapはLESSで構築されていて、SASSやらcompassやらを同時にprecompile出来るのか分からなかったので、実際に実装してみました。


実際にやってみた

Railsのバージョンは3.2.9。

group :assetsに下記を追加

  gem 'less-rails'
  gem 'therubyracer', :platforms => :ruby
  gem 'twitter-bootstrap-rails'
  gem 'compass-rails'
  gem 'sassy-buttons'
  gem 'zurui-sass-rails'

gemインストール

bundle install

Twitter Bootstrapのインストール

rails g bootstrap:layout application fluid
rails g bootstrap:install

compassインストール

bundle exec compass init --syntax sass

Sassy Buttonsのインストール

bundle exec compass install sassy-buttons

後は適当にxxx.css.sassを作成

@import compass/utilities
@import compass/css3
@import sassy-buttons
@import zurui-sass
  
.example
  +zurui-box-inner
  height: 200px
  width: 100%
  .content, .sidebar
    padding: 20px
  .content
    +box-flex(4)
  .sidebar
    +box-flex(1)
    margin-right: 1px 

.sassy-button
  +sassy-button("simple", 5px, 1.1em, #ffd71a, #ffaa1a)

viewを作成して動作が確認出来ました。


まとめ

sprocketsの機能でapplication.css記述されていればLESS、SCSS、SASSなんでもCSSにしてくれて便利。

Twitter BootstrapのSASS版もあるが、なるべく本家のアップデートに合わせたいのでLESSで良いという考えです。



[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。

このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。

http://spreecommerce.jp/