Subtle Patternsで提供されている画像を簡単に扱えるgem subtlepatternsを作成しました。
id:ken_c_loさんが作成された”ズルいデザインテクニック”の中で紹介されていたSubtle Patternsが仕事でもプライベートでも使用していて、便利だなーと思ってたので、もっと簡単に利用出来る様gemにしました。
参考 http://d.hatena.ne.jp/ken_c_lo/20121115/1353004699
使い方
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
手書き風のモックアップ画面がさくさく作れる『Balsamiq Mockups』で日本語が使えました！
最近仕事でデザインのモックアップ画面を作成しています。
FirefoxのアドオンPencilで作成していて物凄く重いなーと思いつつこなしていたのですが、
豊富なUIライブラリが魅力のモックアップアプリ - everything might happen tomorrow - yhassy - builder by ZDNet Japan
上記の記事を読みBalsamiq Mockupsを知り、日本語が入力できる事を知りました。
日本語を使用する方法は、
ViewタブのUse System Fontsをチェックすると日本語が使用する事が出来ます！
FirefoxのアドオンPencilよりかなり軽量なので、
今度デザインのモックアップを任された際は使用してみたいと思います。
Balsamiq Mockups本家サイト(デモもあります)
Balsamiq. Rapid, effective and fun wireframing software. | Balsamiq
参考リンク(詳細な説明があります！)
手書き風のモックアップ画面がさくさく作れる『Balsamiq Mockups』 | IDEA*IDEA
[PR]Spreeの情報を集めています。
ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/
