ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSフレームワークを使うと見た目が整ったWebサイトを素早く構築できます。ただ、あまり多機能なフレームワークを選ぶとカスタマイズがしづらくなり、フレームワークの雰囲気に引きずられてしまいます。

素早さと自由さのバランスが大事なのですが、今回紹介するOpen Styleは割とシンプルで、仰々しい機能が多くないのが特徴と言えるかも知れません。

Open Styleの使い方

今回はスクリーンショット多めで紹介します。

背景色。基本はオレンジ、緑、青、黒の4色です。ここはカスタマイズできるでしょう。
背景色。基本はオレンジ、緑、青、黒の4色です。ここはカスタマイズできるでしょう。

テキストカラーとフォントサイズ。
テキストカラーとフォントサイズ。

グリッド。7分割というのが特徴かも。
グリッド。7分割というのが特徴かも。

間を空けたり寄せることができます。
間を空けたり寄せることができます。

テキストの配置も自由です。
テキストの配置も自由です。

ボタン。
ボタン。

フォーム。こちらは最低限。
フォーム。こちらは最低限。

カード型表示。
カード型表示。

背景に画像を当てる表示。パララックスエフェクトにも対応しています。
背景に画像を当てる表示。パララックスエフェクトにも対応しています。

カバー表示。動画も使えます。
カバー表示。動画も使えます。

フラッシュ。ナビゲーションバー。
フラッシュ。ナビゲーションバー。

画像のサークル、角丸表示。
画像のサークル、角丸表示。

Open Styleは機能は多くないので使うのはさほど難しくなさそうです。またカスタマイズすることもできるでしょう。Webサイトを作る際のベースに使ってみてはいかがでしょうか。

Open StyleはCSS製、MIT Licenseのオープンソース・ソフトウェアです。

Open Style | Another lightweight open source CSS framework

hongyanh/open-style

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2