ハマログ

株式会社イーツー・インフォの社員ブログ

CSSフレームワークGumby

こんにちは。S.Iですヽ(´▽`)/

突然ですが現在CSSフレームワークGumbyと今流行のSASS(サッス)を利用して開発しています。
と言いつつ sassやCSSフレームワークとか、ちょっと二の足踏んじゃうな…って感じなど素人な私です。

CSSフレームワークとは
CSSの知識やデザインセンスがなくても、htmlソースにフレームワークに沿った記述をするだけで、カンタンにカッコイイWebサイトが作成できるツール。

SASSとは
Webページのレイアウトや修飾情報の指定に用いられるCSS(Cascading Style Sheet)を記述するための言語(メタ言語)の一つ。また、同言語で記述したファイルをCSSファイルへ変換するソフトウェア。

Gumbyってガンビーって読むんですね。グンビーっていってました。はずかしーーー( ´艸`)ムププ
さぁ、まずはインストールしてみましょう。

SassコンパイラPreprossをインストール。

Prepross

Gumbyをダウンロード。解凍して保存。

Gumby

Preprosにプロジェクトを設定し右上の+から選択できます。

Preprosプロジェクト

プロジェクトフォルダ内の ui.html を開きます。
Gumbyは親切なことに全UIパターンを ui.html の中に収めてくれているので、カスタマイズする際はこのファイルを見ながら進めると便利。

index index2

プロジェクト内のindex.htmlを編集し、左下の「open project~」を実行。

open project

わーー、かっこいいヽ(´▽`)/
index3
おしゃれなボタンやアイコンがいっぱい。

prepros01

この笑顔にも癒されま~す(*゚▽゚*)

  S.I   2013年12月14日


関連記事

redmine wiki の pdf を shell で download する

背景 あるプロジェクトで仕様をredmine wikiに書きました そのwiki…

AWS CDKでインフラ構築したので、CDKの概要や魅力を紹介

つい先月、私が関わっている案件でインフラリプレースをし、無事完了しました。そのと…

AWSに設置したphpMyAdminにBasic認証を設定/特定のIPアドレスによる制限

AWSで、ELB→EC2の環境にphpMyAdminを設置しました。 yumコマ…


← 前の投稿

次の投稿 →