主にステマブログ

ガチャメーカーについてのブログです。つれづれなるままにひぐらし

railsでsemantic uiを使ってみる

f:id:ylang365:20140228164023j:plain

semantic uiを試してみたのでメモ

Introduction | Semantic UI

 

semantic uiについて

semantic uiは、ひとことでいうとcssフレームワークでbootstrapみたいなもの。

rails用のgemもあるよ。(うれしいことに?sass)

doabit/semantic-ui-sass · GitHub

ちなみにMITライセンスです。

 

bootstrapしゅうを消すために、頑張ってみたけどなかなかうまくいかなかったので

semanticを試してみた。

 

f:id:ylang365:20140228165051j:plain

semantics のintroductionページ。

「Lose the Hieroglyphics!」

bootstrapをひきあいにして、semantics使えばこんなに自然にかけるよ!

といいたい様子。

 

semantic uiを導入したサイト

サンプルとして、実際にsemantic uiを使って構築したサイトを載せておきます。

 ラベルとかメニューとか、雰囲気こんなかんじ。

Rankfeed | 雑学・エンタメ・恋愛・アニメなどなど、あなたの知りたい!にランキングで答えるサイト

 

railsに導入する

なにはともあれ、gemfileを編集。

gem 'semantic-ui-sass', '~> 0.13.0.0'

で、bundle install。

 

application.css.scssでインポート

@import "semantic-ui";

以上

bootstrapと違って、therubyracerは不要。 

 

gridシステム

semanticsのgridシステムは、基本的にbootstrapと同じ。

だけど、デフォルトで16分割になっている。

bootstrapは12分割だけど、@grid-columnsのパラメータで変更できる。

 

gridの指定仕方が独特で、数字じゃなくて文字で指定する。

<div class="four wide column">

たとえば、3-13の2カラムレイアウトにしたかったらだったら threeと

さーてぃーんになる。数字の方がわかりよい気がするな・・

 

form

f:id:ylang365:20140228171428j:plain

フォームは結構かわいい。

bootstrapと比較して全体的に小回りな印象。

 

そのた

アイコンとか、メニュー(nav)はbootstrapより充実していると思う。

 

つかってみた所感

semantic uiもよくできているけど、semntic使って、逆にbootstrapの

網羅性はすごいなと感じた。

bootstrapはカスタマイズしにくい印象があるけど、cssフレームワークとして

必要なものはひととおり全部はいってますよ。てかんじ。

 

bootstrapだと、ボタンだろうがリンクだろうがclass属性つけることで

無理やりスタイルが適用できたけど、semnticはちょっと硬派で、

基本的にdivのclassで指定していく。なのでbootstrapより少しタグが増える・・

 

bootstrapで、オリジナル色を出したければ、railsでもless版を使用して、

テンプレートを使用するのがよいと思う。sassだと利用できるテンプレートが

(探せばあるのかもしれないけど)少なくて幅が広がらない。

 

ちなみに、bootstrapはrails用のsass版が公式ページからダウンロードできるように

なっていましたね。今後もsassでサポートが続くのかな?

 

おまけ

いまは、semanticのたらんとこをbootstrapから部分的に引用している。共存

たとえば、semanticはレスポンシブにしたければ、自分でメディアクエリーの

指定を書かないといけない。(bootstrapはvariable等で定義されてる)

 

bootstrap-sassをgemでいれても競合しないのかもしれないが、

なんか気持ちわるかったので、bootstrapのsassをダウンロードして、

vendor/assetsにjsとscssを置いて、インポートした。

  

owari