tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceとPure

PureというCSSフレームワークを試してみました。

Pure
http://purecss.io/

まずは検証時のコードです。


上がVisualforceページ、下がHTMLファイルで検証してみたときのコードです。


Visualforceページですがうまくいきませんでした...。ヘッダーや標準Styleを無効にしても正常に表示できませんでした。


そこでVFではない普通のHTMLファイルで検証してみたところ次のように正常に表示することができました。

f:id:tyoshikawa1106:20130809015750p:plain


一行リンクを読みこませるだけで行ける予定だったのですが、VFだとなぜか動作せず...。仕方がないので下記ページから必要なCSSファイルを集めて静的リソースにアップする方法で検証してみました。

GitHub
https://github.com/yui/pure/


このときの検証時のコードはこんな感じです。


静的リソースの読み込みは別ファイルを用意してIncludeする方法にしてあります。
これで次のように表示されることを確認できました。


f:id:tyoshikawa1106:20130809020337p:plain


試しに表示してみたページですが中々良い感じです。もっと上手く使う方法がありそうですが、ひとまず動かしてみることができたのでとりあえずは良かったです。


他にもいろいろなCSSフレームワークが提供されているのでもっと試してみようと思います。まだ上手く使えなかったのですがWindows8風のスタイルを適用させるフレームワークがすごく気になっています。とりあえず今回はここまでになります。