SE学院
Contact

Primer CSS

Primer CSSの使い方

Primer CSS
URL https://primer.style/css/
License MIT
GitHub stars 8.9k
Developed by GitHub

Installation

CDN (Contents Delivery Network) を通じてCSSをインポートすることもできます。

<head>
  <link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/">SE学院</a>
    </li>
    <li>
      <a href="/css/">CSS</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      Primer CSS
    </li>
  </ol>
</nav>

Button

<button class="btn" type="button">Button</button>
<a class="btn" href="#" role="button">Link</a>
Link

Small button

<button class="btn btn-sm" type="button">Small</button>

Large button

<button class="btn btn-large" type="button">Large</button>

Primary button

<button class="btn btn-primary" type="button">Primary</button>

Danger button

<button class="btn btn-danger" type="button">Danger</button>

Outline button

<button class="btn btn-outline" type="button">Outline</button>

Disabled button

<button class="btn" type="button aria-disabled="true"">Disabled</button>

Block button

<button class="btn btn-block" type="button">Block</button>

Form

Text

Checkbox

Radio

Select

Primer CSSでは、selectタグにform-selectクラスを指定します。

<select class="form-select">
  <option value="1">1st option</option>
  <option value="2">2nd option</option>
  <option value="3">3rd option</option>
</select>

Image

<img src="whale.png" class="img-responsive" alt="whale" />
whale

Grayscale image

<img src="whale.png" class="img-responsive grayscale" alt="whale" />
whale

Container

Container class
Shorthand CSS property
container-sm max-width: 544px
margin-right: auto;
margin-left: auto;
container-md max-width: 768px
margin-right: auto;
margin-left: auto;
container-lg max-width: 1004px
margin-right: auto;
margin-left: auto;
container-xl max-width: 1280px
margin-right: auto;
margin-left: auto;

Small container

<div class="container-sm">.container-sm</div>
.container-sm

Medium container

<div class="container-md">.container-md</div>
.container-md

Large container

<div class="container-lg">.container-lg</div>
.container-lg

Extra large container

<div class="container-xl">.container-xl</div>
.container-xl

Grid

<div class="container-lg clearfix">
  <div class="col-6 float-left border p-2">
    column
  </div>
  <div class="col-6 float-left border p-2">
    column
  </div>
</div>
column
column
<div class="container-lg clearfix">
  <div class="col-4 float-left border p-2">
    column
  </div>
  <div class="col-4 float-left border p-2">
    column
  </div>
  <div class="col-4 float-left border p-2">
    column
  </div>
</div>
column
column
column