litestyles.css

Github Link
logo
  • Lightweight. Minimal. Responsive.
  • Normalize-powered, Sass-built, and ready for anything.
  • Inspired by Milligram, Skeleton & Bulma — free for any use.

Container

コンテンツを内包するラッパー用スタイル

.section

上下に余白のあるコンテナ

<section class="section">
  <p>text</p>
</section>

.container

左右に余白のあるコンテナ

<div class="container">
  <p>text</p>
</div>

.hero

Hero バナーを作成するためのコンテナ

<div class="hero"> <!-- ** need height ** --> 
  <div class="hero-head">text</div>
  <div class="hero-body">text</div>
  <div class="hero-foot">text</div>
</div>

Layout

.row / .col-(n)

Flex による最大 12 列分割のレイアウトスタイル

TWELVE
TWO
TEN
SIX
SIX
FOUR
FOUR
FOUR
<div class="row">
  <div class="col-2">TWO</div>
  <div class="col-10">TEN</div>
</div>

.level / .level-item

Flex による均等分割のレイアウトスタイル（配置は箸揃え）

item1
item2
item3
<div class="level">
  <div class="level-item">item1</div>
  <div class="level-item">item2</div>
  <div class="level-item">item3</div>
</div>

Typography

テキストマークアップタグのスタイル

Heading

Heading size

Heading1

 3.0 rem

Heading2

 2.5 rem

Heading3

 2.0 rem

Heading4

 1.8 rem
Heading5
 1.6 rem
Heading6
 1.2 rem

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Others tags

bold
italic
underline
anchor

Font size class

class size
.is-size-1
 3.0 rem
.is-size-2
 2.5 rem
.is-size-3
 2.0 rem
.is-size-4
 1.8 rem
.is-size-5
 1.6 rem
.is-size-6
 1.2 rem
.is-size-7
 1.0 rem
.is-size-8
 0.8 rem 
<!-- Heading -->
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>

<!-- Paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>

<!-- Other tags -->
<strong>bold</strong>
<em>italic</em>
<u>underline</u>
<a>anchor</a>

<!-- Font size -->
<p class="is-size-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
<p class="is-size-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>

Text align

テキスト揃え用スタイル

.is-align-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.is-align-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.is-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.is-align-justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

<p class="is-align-left">Lorem ipssum</p>
<p class="is-align-right">Lorem ipssum</p>
<p class="is-align-center">Lorem ipssum</p>
<p class="is-align-justify">Lorem ipssum</p>

Color

テキスト / 背景に適用するスタイル

.is-color-*

class sample color
.is-color-base sample hsl(0, 0%, 13%)
.is-color-primary sample hsl(39, 100%, 50%)
.is-color-info sample hsl(221, 100%, 80%)
.is-color-success sample hsl(134, 100%, 80%)
.is-color-warning sample hsl(53, 100%, 80%)
.is-color-danger sample hsl(0, 100%, 80%)
.is-color-link sample hsl(194, 76%, 49%)
.is-color-link-hover sample hsl(194, 83%, 32%)
.is-color-black sample hsl(0, 0%, 0%)
.is-color-grey-20 sample hsl(0, 0%, 20%)
.is-color-grey-40 sample hsl(0, 0%, 40%)
.is-color-grey sample hsl(0, 0%, 50%)
.is-color-grey-60 sample hsl(0, 0%, 60%)
.is-color-grey-80 sample hsl(0, 0%, 80%)
.is-color-white sample hsl(0, 0%, 100%)

.is-bg-color-*

class sample color
.is-color-base sample hsl(0, 0%, 13%)
.is-color-primary sample hsl(39, 100%, 50%)
.is-color-info sample hsl(221, 100%, 80%)
.is-color-success sample hsl(134, 100%, 80%)
.is-color-warning sample hsl(53, 100%, 80%)
.is-color-danger sample hsl(0, 100%, 80%)
.is-color-link sample hsl(194, 76%, 49%)
.is-color-link-hover sample hsl(194, 83%, 32%)
.is-color-black sample hsl(0, 0%, 0%)
.is-color-grey-20 sample hsl(0, 0%, 20%)
.is-color-grey-40 sample hsl(0, 0%, 40%)
.is-color-grey sample hsl(0, 0%, 50%)
.is-color-grey-60 sample hsl(0, 0%, 60%)
.is-color-grey-80 sample hsl(0, 0%, 80%)
.is-color-white sample hsl(0, 0%, 100%) 
<span class="is-color-white is-bg-color-primary">hello</span>

List

各種リストに適用するスタイル

Unorderd list

  • item1
  • item2
  • item3
    • item4
    • item5

Orderd list

  1. item1
  2. item2
  3. item3
    1. item4
    2. item5

Description list

term1
description1
term2
description2
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>
    item3
    <ul>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </li>
</ul>

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>
    item3
    <ol>
      <li>item4</li>
      <li>item5</li>
    </ol>
  </li>
</ol>

<dl>
  <dt>term1</dt>
  <dd>description1</dd>
  <dt>term2</dt>
  <dd>description2</dd>
</dl>

Table

表組みに適用するスタイル

title1 title2 title3
item1 item2 item3
item4 item5 item6 
<table>
  <thead> <!-- need thead section -->
    <tr>
      <th>title1</th>
      <th>title2</th>
      <th>title3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item4</td>
      <td>item5</td>
      <td>item6</td>
    </tr>
  </tbody>
</table>

Image

画像に適用するスタイル

logo 
<figure>
  <img src="./litestyles.png" alt="logo">
<figure>
© 2025 czu.jp