Our Photo CSS FrameWorkとは

主にWEBページのコンテンツ内で利用される、ボタン・見出し・フォーム要素・表組みなどの装飾に特化したCSSコンポーネントを提供するための枠組みで、WEBページのコンテンツ開発をある一定のメンバー以上でも効率的に進められることを目的としたフレームワーク。

できること

  • ピュアなCSSで定義されたCSSコンポーネントの利用
  • フォントアイコンを利用したアイコンセットの利用

できないこと

  • WEBサイト固有になりがちなレイアウトを構成するCSS定義
  • CSSとJavaScript を交えたリッチなUI表現

接尾辞

スタイルを定義するときに、PC版やSP版で個別に定義するための接尾辞「-pc」と「-sp」は、下記の接尾辞に移行することを推奨します。

接尾辞 横 幅 想定端末 備 考
-xs ~ 479px 狭いスマホ 従来の「-sp」の横幅をカバー
-sm 480px ~ 767px 一般的なスマホ・タブレット 従来の「-sp」の横幅をカバー
-md 768px ~ パソコン 従来の「-pc」の横幅をカバー
-sp ~ 667px 狭い・一般的なスマホ
-pc 668px ~ パソコン

色見本

HTMLタグに振るclass名「op-bg-{color}」や「op-text-{color}」等で定義される「{color}」には、主カラー・サブカラー・SNSカラーが用意されており、以下のカラー定義を利用できます。

主カラー

light-brown

brown

dark-brown

light-cream

dark-cream

red

dark-red

pink

light-blue

green

yellow

very-light-gray

light-gray

gray

dark-gray

very-dark-gray

white

black

サブカラー

color-fafafa

color-f0f0f0

color-fee7e7

color-fffde7

color-a5d6a7

color-c8e6c9

color-f4faf0

SNSカラー

color-line

color-facebook

color-twitter

color-instagram

color-google-plus

© 2018