Spectre.cssの使い方

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="/">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="/css/">CSS</a>
  </li>
  <li class="breadcrumb-item">
    <a href="/css/spectre/">Spectre.css</a>
  </li>
</ul>

• Home
• CSS
• Spectre.css

<span class="text-primary">Primary</span>
<span class="text-secondary">Secondary</span>
<span class="text-dark">Dark</span>
<span class="text-gray">Gray</span>
<span class="text-light">Light</span>
<span class="text-success">Success</span>
<span class="text-warning">Warning</span>
<span class="text-error">Error</span>

Primary Secondary Dark Gray Light Success Warning Error

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

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

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

<div class="form-group">
  <label class="form-label">Gender</label>
  <label class="form-label">
    <input type="radio" name="gender" checked>
    <i class="form-icon"></i> Male
  </label>
  <label class="form-label">
    <input type="radio" name="gender">
    <i class="form-icon"></i> Female
  </label>
</div>

<div class="form-group">
  <label class="form-label" for="ta">Message</label>
  <textarea class="form-input" id="ta" placeholder="Textarea" rows="3"></textarea>
</div>

<div class="columns">
  <div class="column col-6">#1</div>
  <div class="column col-6">#2</div>
</div>

<div class="columns">
  <div class="column col-4">#3</div>
  <div class="column col-4">#4</div>
  <div class="column col-4">#5</div>
</div>

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

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

<div class="m-1">m-1</div>
<div class="m-2">m-2</div>

<div class="mt-1">mt-1</div>
<div class="mt-2">mt-2</div>

<div class="mx-1">mx-1</div>
<div class="mx-2">mx-2</div>

<div class="my-1">my-1</div>
<div class="my-2">my-2</div>

<div class="modal modal-lg" id="modal-id">
  <div class="modal-container">
    <div class="modal-header"">
      Large modal
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
      Footer
    </div>
  </div>
</div>

<div class="p-1">p-1</div>
<div class="p-2">p-2</div>

<div class="pt-1">pt-1</div>
<div class="pt-2">pt-2</div>

<div class="px-1">px-1</div>
<div class="px-2">px-2</div>

<div class="py-1">py-1</div>
<div class="py-2">py-2</div>

<table class="table">
  <tbody>
    <tr class="active">

Table classes

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

<table class="table table-striped">
  <tbody>
    <tr class="active">

Table classes

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

<table class="table table-hover">
  <tbody>
    <tr class="active">

Table classes

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

<table class="table table-scroll">
  <tbody>
    <tr class="active">

Table classes

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

<table class="table">
  <tbody>
    <tr class="active">

Table classes

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