Primer CSS

Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。

概要

Primer CSS
公式サイト https://primer.style/css/
開発者 GitHub
ライセンス MIT
GitHub stars 8.9k

チートシート

CDN

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

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Alert

<div class="flash">.flash</div>
.flash

Success alert

<div class="flash flash-success">.flash .flash-success</div>
.flash .flash-success

Warning alert

警告を意味するアラートを作成するには、flashクラスに加えて、flash-warn修飾クラスを指定します。

<div class="flash flash-warn">.flash .flash-warn</div>
.flash .flash-warn

Error alert

<div class="flash flash-error">.flash .flash-error</div>
.flash .flash-error

Alert with icon

<div class="flash flash-warn">
  <svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" aria-hidden="true">
    <path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" />
  </svg>
  .flash .flash-warn
</div>
.flash .flash-warn

Background

bg-blue

<div class="bg-blue">.bg-blue</div>
.bg-blue

bg-blue-light

<div class="bg-blue-light">.bg-blue-light</div>
.bg-blue-light

bg-red

<div class="bg-red">.bg-red</div>
.bg-red

bg-red-light

<div class="bg-red-light">.bg-red-light</div>
.bg-red-light

bg-green-light

<div class="bg-green-light">.bg-green-light</div>
.bg-green-light

bg-yellow-dark

<div class="bg-yellow-dark">.bg-yellow-dark</div>
.bg-yellow-dark

bg-yellow

<div class="bg-yellow">.bg-yellow</div>
.bg-yellow

bg-yellow-light

<div class="bg-yellow-light">.bg-yellow-light</div>
.bg-yellow-light

bg-purple

<div class="bg-purple">.bg-purple</div>
.bg-purple

bg-gray-dark

<div class="bg-gray-dark text-gray-light">.bg-gray-dark</div>
.bg-gray-dark

bg-gray

<div class="bg-gray">.bg-gray</div>
.bg-gray

bg-white

<div class="bg-white">.bg-white</div>
.bg-white

border

<div class="border">.border</div>
.border

border-top

<div class="border-top">.border-top</div>
.border-top

border-right

<div class="border-right">.border-right</div>
.border-right

border-bottom

<div class="border-bottom">.border-bottom</div>
.border-bottom

border-left

<div class="border-left">.border-left</div>
.border-left

border-x

<div class="border-x">.border-x</div>
.border-x

border-y

<div class="border-y">.border-y</div>
.border-y

border-dashed

<div class="border border-dashed">.border-dashed</div>
.border-dashed

border-blue

<div class="border border-blue">.border-blue</div>
.border-blue

border-blue-light

<div class="border border-blue-light">.border-blue-light</div>
.border-blue-light

border-green

<div class="border border-green">.border-green</div>
.border-green

border-green-light

<div class="border border-green-light">.border-green-light</div>
.border-green-light

border-red

<div class="border border-red">.border-red</div>
.border-red

border-red-light

<div class="border border-red-light">.border-red-light</div>
.border-red-light

border-purple

<div class="border border-purple">.border-purple</div>
.border-purple

border-yellow

<div class="border border-yellow">.border-yellow</div>
.border-yellow

border-gray-light

<div class="border border-gray-light">.border-gray-light</div>
.border-gray-light

border-gray-dark

<div class="border border-gray-dark">.border-gray-dark</div>
.border-gray-dark

border-rounded-{n}

<div class="border rounded-1">.rounded-1</div>
<div class="border rounded-2">.rounded-2</div>
.rounded-1
.rounded-2

border-rounded-top-{n}

<div class="border rounded-top-1">.rounded-top-1</div>
<div class="border rounded-top-2">.rounded-top-2</div>
.rounded-top-1
.rounded-top-2

border-rounded-right-{n}

<div class="border rounded-right-1">.rounded-right-1</div>
<div class="border rounded-right-2">.rounded-right-2</div>
.rounded-right-1
.rounded-right-2

border-rounded-bottom-{n}

<div class="border rounded-bottom-1">.rounded-bottom-1</div>
<div class="border rounded-bottom-2">.rounded-bottom-2</div>
.rounded-bottom-1
.rounded-bottom-2

border-rounded-left-{n}

<div class="border rounded-left-1">.rounded-left-1</div>
<div class="border rounded-left-2">.rounded-left-2</div>
.rounded-left-1
.rounded-left-2
<nav aria-label="Breadcrumb">
  <ol>
    <li class="breadcrumb-item">
      <a href="/">SE学院</a>
    </li>
    <li class="breadcrumb-item">
      <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>

Color

text-blue

<p class="text-blue">.text-blue</p>

.text-blue

text-dark

<p class="text-dark">.text-dark</p>

.text-dark

text-gray-light

<p class="text-gray-light">.text-gray-light</p>

.text-gray-light

text-gray

<p class="text-gray">.text-gray</p>

.text-gray

text-gray-dark

<p class="text-gray-dark">.text-gray-dark</p>

.text-gray-dark

text-red

<p class="text-red">.text-red</p>

.text-red

text-orange

<p class="text-orange">.text-orange</p>

.text-orange

text-orange-light

<p class="text-orange-light">.text-orange-light</p>

.text-orange-light

text-yellow

<p class="text-yellow">.text-yellow</p>

.text-yellow

text-green

<p class="text-green">.text-green</p>

.text-green

text-purple

<p class="text-purple">.text-purple</p>

.text-purple

text-pink

<p class="text-pink">.text-pink</p>

.text-pink

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

Label

<span class="Label">Label</span>

Label

State

<span class="State">State</span>

State

Counter

<span class="Counter">1</span>

1

Margin

mt-{n}

<div class="d-flex flex-wrap">
  <div class="mt-0 mr-1 px-2 bg-green-light">mt-0</div>
  <div class="mt-1 mr-1 px-2 bg-green-light">mt-1</div>
  <div class="mt-2 mr-1 px-2 bg-green-light">mt-2</div>
  <div class="mt-3 mr-1 px-2 bg-green-light">mt-3</div>
  <div class="mt-4 mr-1 px-2 bg-green-light">mt-4</div>
  <div class="mt-5 mr-1 px-2 bg-green-light">mt-5</div>
  <div class="mt-6 mr-1 px-2 bg-green-light">mt-6</div>
</div>
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6

mr-{n}

<div class="mr-0 bg-green-light">.mr-0</div>
<div class="mr-1 mb-1 bg-green-light">.mr-1</div>
<div class="mr-2 mb-1 bg-green-light">.mr-2</div>
<div class="mr-3 mb-1 bg-green-light">.mr-3</div>
<div class="mr-4 mb-1 bg-green-light">.mr-4</div>
<div class="mr-5 mb-1 bg-green-light">.mr-5</div>
<div class="mr-6 mb-1 bg-green-light">.mr-6</div>
.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mr-6

mb-{n}

<div class="d-flex flex-wrap">
  <div class="mb-0 mr-1 px-2 bg-green-light">mb-0</div>
  <div class="mb-1 mr-1 px-2 bg-green-light">mb-1</div>
  <div class="mb-2 mr-1 px-2 bg-green-light">mb-2</div>
  <div class="mb-3 mr-1 px-2 bg-green-light">mb-3</div>
  <div class="mb-4 mr-1 px-2 bg-green-light">mb-4</div>
  <div class="mb-5 mr-1 px-2 bg-green-light">mb-5</div>
  <div class="mb-6 mr-1 px-2 bg-green-light">mb-6</div>
</div>
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6

ml-{n}

<div class="ml-0 mb-1 bg-green-light">.ml-0</div>
<div class="ml-1 mb-1 bg-green-light">.ml-1</div>
<div class="ml-2 mb-1 bg-green-light">.ml-2</div>
<div class="ml-3 mb-1 bg-green-light">.ml-3</div>
<div class="ml-4 mb-1 bg-green-light">.ml-4</div>
<div class="ml-5 mb-1 bg-green-light">.ml-5</div>
<div class="ml-6 mb-1 bg-green-light">.ml-6</div>
.ml-0
.ml-1
.ml-2
.ml-3
.ml-4
.ml-5
.ml-6

mx-{n}

<div class="mx-0 mb-1 bg-green-light">.mx-0</div>
<div class="mx-1 mb-1 bg-green-light">.mx-1</div>
<div class="mx-2 mb-1 bg-green-light">.mx-2</div>
<div class="mx-3 mb-1 bg-green-light">.mx-3</div>
<div class="mx-4 mb-1 bg-green-light">.mx-4</div>
<div class="mx-5 mb-1 bg-green-light">.mx-5</div>
<div class="mx-6 mb-1 bg-green-light">.mx-6</div>
.mx-0
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mx-6

my-{n}

<div class="d-flex flex-wrap">
  <div class="my-0 mr-1 px-2 bg-green-light">my-0</div>
  <div class="my-1 mr-1 px-2 bg-green-light">my-1</div>
  <div class="my-2 mr-1 px-2 bg-green-light">my-2</div>
  <div class="my-3 mr-1 px-2 bg-green-light">my-3</div>
  <div class="my-4 mr-1 px-2 bg-green-light">my-4</div>
  <div class="my-5 mr-1 px-2 bg-green-light">my-5</div>
  <div class="my-6 mr-1 px-2 bg-green-light">my-6</div>
</div>
my-0
my-1
my-2
my-3
my-4
my-5
my-6
<nav class="menu" aria-label="Primer">
  <a class="menu-item" href="#FLASH">Flash</a>
  <a class="menu-item" href="#MENU" aria-current="menu">Menu</a>
</nav>

pt-{n}

<div class="pt-0 mb-1 px-2 bg-green-light">pt-0</div>
<div class="pt-1 mb-1 px-2 bg-green-light">pt-1</div>
<div class="pt-2 mb-1 px-2 bg-green-light">pt-2</div>
<div class="pt-3 mb-1 px-2 bg-green-light">pt-3</div>
<div class="pt-4 mb-1 px-2 bg-green-light">pt-4</div>
<div class="pt-5 mb-1 px-2 bg-green-light">pt-5</div>
<div class="pt-6 mb-1 px-2 bg-green-light">pt-6</div>
pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
pt-6

pb-{n}

<div class="pb-0 mb-1 bg-green-light">.pb-0</div>
<div class="pb-1 mb-1 bg-green-light">.pb-1</div>
<div class="pb-2 mb-1 bg-green-light">.pb-2</div>
<div class="pb-3 mb-1 bg-green-light">.pb-3</div>
<div class="pb-4 mb-1 bg-green-light">.pb-4</div>
<div class="pb-5 mb-1 bg-green-light">.pb-5</div>
<div class="pb-6 mb-1 bg-green-light">.pb-6</div>
.pb-0
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pb-6

pl-{n}

<div class="pl-0 mb-1 bg-green-light">.pl-0</div>
<div class="pl-1 mb-1 bg-green-light">.pl-1</div>
<div class="pl-2 mb-1 bg-green-light">.pl-2</div>
<div class="pl-3 mb-1 bg-green-light">.pl-3</div>
<div class="pl-4 mb-1 bg-green-light">.pl-4</div>
<div class="pl-5 mb-1 bg-green-light">.pl-5</div>
<div class="pl-6 mb-1 bg-green-light">.pl-6</div>
.pl-0
.pl-1
.pl-2
.pl-3
.pl-4
.pl-5
.pl-6

py-{n}

<div class="py-0 mb-1 bg-green-light">.py-0</div>
<div class="py-1 mb-1 bg-green-light">.py-1</div>
<div class="py-2 mb-1 bg-green-light">.py-2</div>
<div class="py-3 mb-1 bg-green-light">.py-3</div>
<div class="py-4 mb-1 bg-green-light">.py-4</div>
<div class="py-5 mb-1 bg-green-light">.py-5</div>
<div class="py-6 mb-1 bg-green-light">.py-6</div>
.py-0
.py-1
.py-2
.py-3
.py-4
.py-5
.py-6

.text-center

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

Center aligned text

.text-right

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

Right aligned text

.text-italic

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

Italic

.text-bold

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

Bold

.text-underline

<p class="text-underline">Underline</p>

Underline

.text-emphasized

<p class="text-emphasized">Emphasized</p>

Emphasized

.text-small

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

Small

.lead

<p class="lead">
  Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。
</p>

Primer CSS は GitHub が開発したCSSフレームワークです。このページも Primer CSS を使っています。

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