デザインガイド ver. 0.1

FUTURE ARCHIVES スターターキット

モジュール
1 Based on Bootstrap & Wordpress 今よりも簡単に、美しく、スピーディに立ち上げよう。
2 Colors メインの3〜5色を決めるだけ。あとは自動配色*です。
3 Grid スマホもPCも、幅を足したらすべて“12”でした。
4 Text 美しく見ていただきたいから、ウェブフォント入れました。
5 Table レスポンシブにしたい? "table-responsive" で囲うだけ。
6 Images 画像加工も最小限に。
7 Panels / Alerts / List Group 要点・注意書きを見せる塗りと枠。
8 Button ボタン
9 Badges / Labels バッジ・ラベル
10 Modal モーダル
11 Dropdown / Collapse ドロップダウン・開閉メニュー
12 Tabs/Pills タブ
13 Pager ページャー

B

less

Based on Bootstrap & Wordpress

今よりも簡単に、美しく、スピーディに立ち上げよう。

デザインは組み合わせの妙。サービスは既に揃っています。BootstrapとWordPressを情報設計目線でカスタマイズしていきます。かんたんをもっとカンタンに、もっと美しく。ノウハウを惜しみなく詰め込んでいくスターターキットです。

Bootstrap
ブートストラップは、Twitter社のエンジニアとデザイナーによって構築されたフレームワーク。HTMLをなんとなく読める人にはより便利に、より速く開発できるように組まれています。
WordPress
ワードプレスはフォーラムや公開情報の充と、導入のしやすさ、オープンな拡張性から世界中で導入されています。無数のテーマが世界にあるのですが、コレだというのにはなかなか出会えません。


Colors カラー

メインの3〜5色を決めるだけ。あとはLESSで自動配色*

  • 現状Less環境が必要となります。多くの方が使えるよう、LessやSassをGUIで編集するアプリ開発協力者を募集しています。なお、このスターターキットの開発環境は、Bootstrapを素材に、Coda でのコーディング、 Cornerstone でのDiff監理、 Prepros でのコンパイルによって作成しています。

less

coda

Cornerstone

prepros


Grid グリッド

スマホもPCも、幅を足したらすべて“12”でした。

デバイス対応の仕組みはすでに用意されています。レスポンシブ対応のグリッドシステムによって解像度やデバイスに応じてスケーリングされます。"xs-6"ならスマホで幅50%、"sm-4"ならタブレットレイアウトで幅33%という具合です。

col-lg-12
(lg100%)
col-sm-6 col-xs-12
(sm50%, xs100%)
col-sm-6 col-xs-12
(sm50%, xs100%)
col-sm-4
(sm33%, xs100%)
col-sm-4
(sm33%, xs100%)
col-sm-4
(sm33%, xs100%)
col-sm-8 col-xs-6
(sm66%, xs50%)
col-sm-4 col-xs-6
(sm33%, xs50%)
col-sm-4 col-xs-6
(sm33%, xs50%)
col-sm-8 col-xs-6
(sm66%, xs50%)
col-sm-3 col-xs-6
(sm25%, xs50%)
col-sm-3 col-xs-6
(sm25%, xs50%)
col-sm-3 col-xs-6
(sm25%, xs50%)
col-sm-3 col-xs-6
(sm25%, xs50%)
Grid Classes
xs :X small (phones)
sm :Small (tablets, 768px and up)  
md :Medium (desktops, 992px and up)
lg :Large (large desktops, 1200px and up) 
Container-fluid(全幅レイアウト)

container-fluid col-sm-6

container-fluid col-sm-6

col-sm-4 col-sm-push-8(右へ8)

col-sm-8 .col-sm-pull-4(左へ4)


Text テキスト

美しく見ていただきたいから、ウェブフォント入れました。

GoogleとAdobeの開発したNoto Sans Japaneseを設定済です。

H1.いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやま(いろはにほへとちりぬるを)

Lead.いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん

h2. heading Secondary text

h3. heading Secondary text

h4. heading Secondary text

Link
Blank Link
PDF Link (PDF)

Highlight text.
Deleted text.
This line of text is meant to be treated.
Underlined.
Small text.
Strong text.
Italicized text.
Muted.
Attribute.
Code, Code, and Code.
ctrl + p


Coffee
black hot drink
Milk
white cold drink
Tel
0000-0000-0000
Fax
0000-0000-0000
Mail
mail@mail.com
  1. Coffee
  2. Tea
  3. Milk
  • Coffee
  • Tea
  • Milk
  • Coffee
  • Tea
  • Milk
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both                spaces and
line breaks.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Left aligned text.

Center aligned text.class="text-center"

Right aligned text.class="text-right"

This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Table テーブル

レスポンシブにしたい?"table-responsive" で囲うだけ。

Basic

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Striped

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Bordered

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Hover

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Contextual

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Images 画像

画像加工も最小限に。

"img-responsive"で囲えばフィット。Wordpress版には自動リサイズ機能が組み込み済です。

# class="img-responsive"

# class="img-responsive"

# class="img-thumbnail"

#
class="img-rounded"

#
class="img-circle"


Panels / Alerts / List Group 塗りと枠

要点を見せる塗りと枠。

Basic Well
A Basic Panel
Panel Heading
Panel Content
Panel Content

panel-group

Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content

Alerts

Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.
× Success! Indicates a successful or positive action.

List Group

  • First item
  • Second item
  • Third item
  • 12 New
  • 5 Deleted
  • 3 Warnings

Button ボタン

想定される記述パタンはすでに用意されています。

Default Primary Success Info Warning Danger

<a>, <button>, or <input> element.
Link Button

Large Medium Small XSmall Active Primary Disabled Primary Button 1

Badges / Labels

News 5
Comments 10
Updates 2

Example New

Example New

Default Label Primary Label Success Label Info Label Warning Label Danger Label

Modal

Dropdown / Collapse

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Simple collapsible
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Panel Body
  • One
  • Two
  • Three

Tabs/Pills

Pager