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}」には、

  • BackGround & Text
  • Brand
  • Action
  • Accent

が用意されており、以下のカラー定義を利用できます。また、SNSカラーも定義されています。

カラー定義

BackGround & Text

#ffffff
Light
#eeeeee
Secondary
#cccccc
Tertiary
#666666
Primary
#333333
Dark

Brand

#f4f0dc
Light
#efbb40
Secondary
#cbb79e
Tertiary
#84705b
Primary
#3a2816
Dark

Action

#f4faf0
Light
#fffde7
Secondary
#f8e9d1
Tertiary
#fff1ed
Primary
#cc0033
Dark

Accent

#e9f5f8
Light
#8dd0dd
Secondary
#74c2ac
Tertiary
#ee7357
Primary
#51b7cb
Dark

class名の使用例

BackGround & Text
  • op-text-light
  • op-bg-primary
  • op-border-dark
Bland・Action・Accent
  • op-text-brand-light
  • op-bg-action-dark
  • op-border-accent-tertiary

SNSカラー

color-line

#00b900
rgb(0, 185, 0)

color-facebook

#3c5a99
rgb(60, 90, 153)

color-x

#0f1419
rgb(15, 20, 25)

color-instagram

#cf2e92
rgb(207, 46, 146)

color-google-plus

#dd5144
rgb(221, 81, 68)

※これより下は、過去の定義になります。利用を避けてください。

主カラー

light-brown

#cbb79e
rgb(203, 183, 158)

brown

#84705b
rgb(132, 112, 91)

dark-brown

#3a2816
rgb(58, 40, 22)

light-cream

#f4f0dc
rgb(244, 240, 220)

dark-cream

#cbb79e
rgb(203, 183, 158)

red

#ee7357
rgb(238, 115, 87)

dark-red

#cc0033
rgb(204, 0, 51)

pink

#fceae6
rgb(252, 234, 230)

light-blue

#8dd0dd
rgb(141, 208, 221)

green

#74c2ac
rgb(116, 194, 172)

yellow

#efbb40
rgb(239, 187, 64)

very-light-gray

#eeeeee
rgb(238, 238, 238)

light-gray

#cccccc
rgb(204, 204, 204)

gray

#999999
rgb(153, 153, 153)

dark-gray

#666666
rgb(102, 102, 102)

very-dark-gray

#333333
rgb(51, 51, 51)

white

#ffffff
rgb(255, 255, 255)

black

#000000
rgb(0, 0, 0)

サブカラー

color-fafafa

#fafafa
rgb(250, 250, 250)

color-f0f0f0

#f0f0f0
rgb(240, 240, 240)

color-ecedf1

#ecedf1
rgb(236, 237, 241)

color-f2f4f2

#f2f4f2
rgb(242, 244, 242)

color-fee7e7

#fee7e7
rgb(254, 231, 231)

color-fffde7

#fffde7
rgb(255, 253, 231)

color-f8e9d1

#f8e9d1
rgb(248, 233, 209)

color-a5d6a7

#a5d6a7
rgb(165, 214, 167)

color-c8e6c9

#c8e6c9
rgb(200, 230, 201)

color-f4faf0

#f4faf0
rgb(244, 250, 240)

color-3362a8

#3362a8
rgb(51, 98, 168)

color-404a72

#404a72
rgb(64, 74, 114)

color-7d93ba

#7d93ba
rgb(125, 147, 186)

color-c5c8d4

#c5c8d4
rgb(197, 200, 212)

color-ccdfef

#ccdfef
rgb(204, 223, 239)

© 2018