Spectre.css

Spectre.css は Yan Zhu が開発したCSSフレームワークです。このページも Spectre.css を使っています。

Spectre.css
公式サイト	https://picturepan2.github.io/spectre/
開発者	Yan Zhu
ライセンス	MIT
グリッド	12列
GitHub stars	10.7k
Twitter	@spectrecss

Spectre.css v0.5.9
モジュール	サイズ
spectre.min.css	45.5KB
spectre-exp.min.css	23.1KB
spectre-icons.min.css	8.64KB

チートシート

CDN

CDN (Contents Delivery Network) を通じて Sprectre.css を利用する HTML の基本テンプレートを次に示す。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.bg-primary

<p class="bg-primary">Primary</p>

Primary

.bg-secondary

<p class="bg-secondary">Secondary</p>

Secondary

.bg-dark

<p class="bg-dark">Dark</p>

Dark

.bg-gray

<p class="bg-gray">Gray</p>

Gray

.bg-success

<p class="bg-success">Success</p>

Success

.bg-warning

<p class="bg-warning">Warning</p>

Warning

.bg-error

<p class="bg-error">Error</p>

Error

.btn

<button class="btn">Button</button>

.btn-primary

<button class="btn btn-primary">Button</button>

.btn-success

<button class="btn btn-success">Button</button>

.btn-error

<button class="btn btn-error">Button</button>

.btn-link

<button class="btn btn-link">Link</button>

.btn-sm

<button class="btn btn-sm">Button</button>

.btn-lg

<button class="btn btn-lg">Button</button>

.btn-block

<button class="btn btn-block">Button</button>

.btn-action

<button class="btn btn-action">
  <i class="icon icon-menu"></i>
</button>

.s-circle

<button class="btn btn-action s-circle">
  <i class="icon icon-arrow-up"></i>
</button>

.loading

<button class="btn loading">Button</button>

.text-primary

<span class="text-primary">Primary</span>

Primary

.text-secondary

<span class="text-secondary">Secondary</span>

Secondary

.text-dark

<span class="text-dark">Dark</span>

Dark

.text-gray

<span class="text-gray">Gray</span>

Gray

.text-light

<p class="text-light bg-dark">Light</p>

Light

.text-success

<span class="text-success">Success</span>

Success

.text-warning

<span class="text-warning">Warning</span>

Warning

.text-error

<span class="text-error">Error</span>

Error

.container

<div class="container"> 初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。 </div>

初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。

.form-checkbox

<div class="form-group">
  <label class="form-checkbox">
    <input type="checkbox">
    <i class="form-icon"></i> Check
  </label>
</div>

Check

.hero

<div class="hero bg-primary">
  <div class="hero-body">
    <h1>Title</h1>
    <p>This is a hero example</p>
  </div>
</div>

Title

This is a hero example

.icon

Spectre.cssはアイコンを提供している。

<i class="icon icon-mail"></i>

.icon-2x

<i class="icon icon-2x icon-mail"></i>

.icon-3x

<i class="icon icon-3x icon-mail"></i>

.icon-4x

<i class="icon icon-4x icon-mail"></i>

.table

<table class="table">

Table classes
Class	Description
table	テーブルの基本クラス
table-striped	1行ごとに色を変える修飾クラス
table-hover	マウスカーソルを乗せた行の色を変える修飾クラス
table-scroll	スクロール可能にする修飾クラス
active	アクティブな行にする修飾クラス

.table-striped

<table class="table table-striped">

Table classes
Class	Description
table	テーブルの基本クラス
table-striped	1行ごとに色を変える修飾クラス
table-hover	マウスカーソルを乗せた行の色を変える修飾クラス
table-scroll	スクロール可能にする修飾クラス
active	アクティブな行にする修飾クラス

.text-center

<p class="text-center">Center aligned text</p>

Center aligned text

.text-right

<p class="text-right">Right aligend text</p>

Right aligend text

.text-bold

<p class="text-bold">Bold</p>

Bold

.text-italic

<p class="text-italic">Italic</p>

Italic

.text-muted

<p class="text-muted">Muted text</p>

Muted text

.text-large

<p class="text-large">Large text</p>

Large text

.text-small

<p class="text-small">Small text</p>

Small text

.text-tiny

<p class="text-tiny">Tiny text</p>

Tiny text