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
ModuleSize
spectre.min.css 45.5KB
spectre-exp.min.css 23.1KB
spectre-icons.min.css 8.64KB

チートシート

  • はじめに
  • CDN

CDN

<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>

<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>

.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

Input text
<div class="form-group">
  <label class="form-label" for="id">ID</label>
  <input class="form-input" type="text" id="id" placeholder="ID">
</div>