概要

対応ブラウザについて

  • Android OS 4.1以上

  • iOS 6以上

  • IE10以上

  • Chrome最新

  • FireFox最新

  • Safari最新

Sassファイル(CSSファイル)のディレクトリ構成

ディレクトリ構成は、FLOCSSを参考にしています。

sass
  ├─ foundation
  |     ├─ mixins
  |     ├─ _base.scss
  |     ├─ _mixins.scss
  |     ├─ _sanitize.scss
  |     └─ _variables.scss
  ├─ layout
  |     ├─ _header.scss
  |     └─ _footer.scss
  ├─ object
  |     ├─ componet
  |     ├─ project
  |     └─ utility
  └─ app.scss

※object/projectについては、使用するサイトに合わせたスタイルを書くのがいいと思います。

接頭辞について

なんの属性なのかHTMLのコードを見ただけですぐにわかるように接頭辞をつけることを義務付け

layoutを表す接頭辞

.l-

componetを表す接頭辞

.c-

projectを表す接頭辞

.p-

utilityを表す接頭辞

.u-

状態を表す接頭辞

.is-

例えば、is-active、is-hiddenなど。

JavaScriptを表す接頭辞

.js-

cssのスタイルが定義されたセレクタとJavaScriptで動的に動かすセレクタを混同させないこと。

セレクタについて

単語のセパレータ

基本的な書き方としてMindBEMdingの考え方をそのまま採用しています。

使い方

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <title>Document</title>
  <link rel="stylesheet" href="dist/css/font-awesome.min.css">
  <link rel="stylesheet" href="dist/css/app.min.css">
</head>
<body>
  内容  
  <script src="dist/js/jquery-2.1.1.min.js"></script>
  <script src="dist/js/jquery.simpledrawer.js"></script>
  <script src="dist/js/main.js"></script>

</body>
</html>

alert

alert

<p class="c-alert">alert</p>

avatar

<div class="c-avatar"><img src="dist/img/messi.jpg" width="100%" alt=""></div>

bar

bar
<div class="c-bar">
  <div class="c-bar__inner">
    bar
  </div>
</div>

breadcrumb

<div class="c-breadcrumb">
  <ul class="c-inline c-breadcrumb__inner">
    <li class="c-inline__cell">
     <a href="#">Home</a> <i class="fa fa-angle-right"></i>
   </li>
   <li class="c-inline__cell">
     <a href="#">hogehoge</a>
   </li>
 </ul>
</div>

btn

<p>
  <a class="c-btn c-btn-default--border" href="#">ボタン</a>
  <a class="c-btn c-btn-primary--border" href="#">ボタン</a>
  <a class="c-btn c-btn-highlight--border" href="#">ボタン</a>
  <a class="c-btn c-btn-default--ghost" href="#">ボタン</a>
</p>
<p>
  <a class="c-btn c-btn-default--flat" href="#">ボタン</a>
  <a class="c-btn c-btn-primary--flat" href="#">ボタン</a>
  <a class="c-btn c-btn-highlight--flat" href="#">ボタン</a>
</p>

<p>
  <a class="c-btn c-btn-primary--flat c-btn--jumbo" href="#">ボタン</a>
  <a class="c-btn c-btn-primary--flat c-btn--large" href="#">ボタン</a>
  <a class="c-btn c-btn-primary--flat" href="#">ボタン</a>
  <a class="c-btn c-btn-primary--flat c-btn--small" href="#">ボタン</a>
  <a class="c-btn c-btn-primary--flat c-btn--tiny" href="#">ボタン</a>
</p>
<p>
  <a class="c-btn c-btn-primary--flat c-btn--block" href="#">ボタン</a>
</p>

card

Header

コンテンツ
Bottom

カードデザイン

containerと併用して使う

<div class="c-container">
  <div class="c-card">
    <div class="c-card__header">
      <h3>Header</h3>
    </div>
    <div class="c-card__content">
        コンテンツ
    </div>
    <div class="c-card__bottom">
      Bottom
    </div>
  </div>
</div>

container

c-container
c-container--small
c-container--x-small
c-container--full
<div class="c-container">
  コンテンツ
</div>
<div class="c-container--small">
  コンテンツ
</div>
<div class="c-container--x-small">
  コンテンツ
</div>
<div class="c-container--full">
  コンテンツ
</div>

form-control

テキスト必須

URL必須

パスワード必須

メール必須

テキストエリア必須

チェックボックス

ラジオボタン

セレクト

formデザイン

<div class="c-container">
  <form class="c-form">
    <h3 class="c-form__title">テキスト<span class="c-form__reqiured">必須</span></h3>
    <p><input type="text"></p>
    <h3 class="c-form__title">URL<span class="c-form__reqiured">必須</span></h3>
    <p><input type="url"></p>
    <h3 class="c-form__title">パスワード<span class="c-form__reqiured">必須</span></h3>
    <p><input type="password"></p>
    <h3 class="c-form__title">メール<span class="c-form__reqiured">必須</span></h3>
    <p><input type="email"></p>
    <h3 class="c-form__title">テキストエリア<span class="c-form__reqiured">必須</span></h3>
    <p>
      <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <h3 class="c-form__title">チェックボックス</h3>
    <p>
      <input type="checkbox" name="checkbox" id="checkbox1"><label for="checkbox1">checkbox1</label>
      <input type="checkbox" name="checkbox" id="checkbox2"><label for="checkbox2">checkbox2</label>
    </p>
    <h3 class="c-form__title">ラジオボタン</h3>
    <p>
      <input type="radio" name="radio" id="radio1"><label for="radio1">radio1</label>
      <input type="radio" name="radio" id="radio2"><label for="radio2">radio2</label>
    </p>
    <h3 class="c-form__title">セレクト</h3>
    <p>
      <div class="c-form__select">
        <label><select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></label>
      </div>
    </p>
    <button type="submit" class="c-btn c-btn-default--flat">Submit</button>
  </form>
</div>

<div class="c-container">
  <form class="c-form">
    <table class="c-form__table">
      <tr>
        <th>テキスト</th>
        <td><input type="text"></td>
      </tr>
      <tr>
          <th>チェックボックス</th>
          <td>
            <input type="checkbox" name="checkbox" id="checkbox1"><label for="checkbox1">checkbox1</label>
            <input type="checkbox" name="checkbox" id="checkbox2"><label for="checkbox2">checkbox2</label>
          </td>
      </tr>
      <tr>
          <th>ラジオボタン</th>
          <td>
            <input type="radio" name="radio" id="radio1"><label for="radio1">radio1</label>
            <input type="radio" name="radio" id="radio2"><label for="radio2">radio2</label>
          </td>
      </tr>
      <tr>
          <th>セレクト</th>
          <td>
            <div class="c-form__select">
              <label><select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></label>
            </div>
          </td>
      </tr>
      <tr>
        <th>テキストエリア</th>
        <td>
          <textarea name="" id="" cols="30" rows="10"></textarea>
        </td>
      </tr>
    </table>
  </form>
</div>

grid

inline

hoge
hoge
hoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid inline</h1>
  <div class="c-grid c-grid--grow">
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Top

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Top</h1>
  <div class="c-grid c-grid--top">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Middle

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Middle</h1>
  <div class="c-grid c-grid--middle">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Bottom

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Bottom</h1>
  <div class="c-grid c-grid--bottom">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Stretch

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Stretch</h1>
  <div class="c-grid c-grid--stretch">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

baseline

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Baseline</h1>
  <div class="c-grid c-grid--baseline">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box" style="padding-top: 100px;">hoge</div>
    </div>
  </div>
</div>

Left

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Left</h1>
  <div class="c-grid c-grid--left">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Center

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Center</h1>
  <div class="c-grid c-grid--center">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Right

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Right</h1>
  <div class="c-grid c-grid--right">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Between

hoge
hogheoge
hoge
hogheoge
hogehoge
hoge
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Between</h1>
  <div class="c-grid c-grid--between">
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge<br>hogheoge<br>hogehoge</div>
    </div>
    <div class="c-grid__col">
      <div class="box">hoge</div>
    </div>
  </div>
</div>

Full

c-grid__col--full
c-grid__col--full
c-grid__col--full
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid full</h1>
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--full">
      <div class="box">c-grid__col--full</div>
    </div>
    <div class="c-grid__col c-grid__col--full">
      <div class="box">c-grid__col--full</div>
    </div>
    <div class="c-grid__col c-grid__col--full">
      <div class="box">c-grid__col--full</div>
    </div>
  </div>
</div>

Layout & gutters

1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
1of12
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Box</h1>
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
  </div>
  <div class="c-grid c-grid--gutters">
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
  </div>
</div>
2of12
2of12
2of12
2of12
2of12
2of12
2of12
2of12
2of12
2of12
2of12
2of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
  </div>
  <div class="c-grid c-grid--gutters c-grid--query">
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
  </div>
</div>
3of12
3of12
3of12
3of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
  </div>
</div>
4of12
4of12
4of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--4of12"><div class="box">4of12</div></div>
    <div class="c-grid__col c-grid__col--4of12"><div class="box">4of12</div></div>
    <div class="c-grid__col c-grid__col--4of12"><div class="box">4of12</div></div>
  </div>
</div>
5of12
2of12
5of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--5of12"><div class="box">5of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
    <div class="c-grid__col c-grid__col--5of12"><div class="box">5of12</div></div>
  </div>
</div>
6of12
6of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--6of12"><div class="box">6of12</div></div>
    <div class="c-grid__col c-grid__col--6of12"><div class="box">6of12</div></div>
  </div>
</div>
7of12
5of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--7of12"><div class="box">7of12</div></div>
    <div class="c-grid__col c-grid__col--5of12"><div class="box">5of12</div></div>
  </div>
</div>
8of12
4of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--8of12"><div class="box">8of12</div></div>
    <div class="c-grid__col c-grid__col--4of12"><div class="box">4of12</div></div>
  </div>
</div>
9of12
3of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--9of12"><div class="box">9of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
  </div>
</div>
10of12
2of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--10of12"><div class="box">10of12</div></div>
    <div class="c-grid__col c-grid__col--2of12"><div class="box">2of12</div></div>
  </div>
</div>
11of12
1of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--11of12"><div class="box">11of12</div></div>
    <div class="c-grid__col c-grid__col--1of12"><div class="box">1of12</div></div>
  </div>
</div>
12of12
<div class="c-container">
  <div class="c-grid">
    <div class="c-grid__col c-grid__col--12of12"><div class="box">12of12</div></div>
  </div>
</div>

Query

レスポンシブ対応

3of12
3of12
3of12
3of12
<div class="c-container">
  <h1 class="c-title c-title--primary">c-grid Query</h1>
  <div class="c-grid c-grid--query">
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
    <div class="c-grid__col c-grid__col--3of12"><div class="box">3of12</div></div>
  </div>
</div>

Hero

Hero

13歳でFCバルセロナに入団し、17歳でトップチームデビューして以降、7度のリーガ・エスパニョーラ優勝、
4度のUEFAチャンピオンズリーグ優勝に貢献。自身も5回の世界最優秀選手賞FIFAバロンドールを受賞し[注 2]、
2008-09シーズンから2011-12シーズンまで4季連続のチャンピオンズリーグ得点王を獲得。

<div class="c-hero c-hero--anim">
  <div class="c-hero__inner">
    <h2 class="c-hero__inner__title">Hero</h2>
    <p class="c-hero__inner__text">
      13歳でFCバルセロナに入団し、17歳でトップチームデビューして以降、7度のリーガ・エスパニョーラ優勝、<br>
      4度のUEFAチャンピオンズリーグ優勝に貢献。自身も5回の世界最優秀選手賞FIFAバロンドールを受賞し[注 2]、<br>
      2008-09シーズンから2011-12シーズンまで4季連続のチャンピオンズリーグ得点王を獲得。
    </p>
  </div>
</div>

label

ラベル
<span class="c-label">ラベル</span>

loading

<div class="c-loading">
  <i class="c-loading__spinner fa fa-spinner"></i>
</div>

modal

modal

モーダルタイトル
modal
<div class="c-container">
  <p>
    <a href="#groupSuccesModal" class="c-btn c-btn-primary--flat js-modal-btn">modal</a>
  </p>
  <div id="groupSuccesModal" class="js-modal c-modal">
    <div class="c-modal__panel">
      <div class="c-modal__header">
        モーダルタイトル
      </div>
      <div class="c-modal__content">
        modal
      </div>
      <div class="c-modal__bottom">
        <button class="c-btn c-btn-default--flat js-modal-close-btn">閉じる</button>
      </div>
      <i class="js-modal-close-btn c-modal__close fa fa-times-circle"></i>
    </div>
    <div class="c-modal__overlay js-modal-overlay"></div>
  </div>
</div>

nav

<ul class="c-nav c-nav--right">
  <li class="c-nav__item">
    <a href="#">メニュー1</a>
  </li>
  <li class="c-nav__item">
    <a href="#">メニュー2</a>
  </li>
  <li class="c-nav__item">
    <a href="#">メニュー3</a>
  </li>
  <li class="c-nav__item">
    <a href="#">メニュー4</a>
  </li>
</ul>

tab

コンテンツ1
<div class="c-container">
  <div class="c-tab js-tab">
    <ul class="c-tab__menu">
      <li class="c-tab__menu__item is-active">
        <a href="#" class="c-tab-btn c-tab-btn--sp js-tab-btn" data-tabid="1">
          tab1
        </a>
      </li>
      <li class="c-tab__menu__item">
        <a href="#" class="c-tab-btn c-tab-btn--basic js-tab-btn" data-tabid="2">
          tab2
        </a>
      </li>
    </ul>
    <div class="c-tab__body js-tab-body" data-contentid="1">
      コンテンツ1
    </div>
    <div class="c-tab__body js-tab-body is-hidden" data-contentid="2">
      コンテンツ2
    </div>
  </div>
</div>

table

<div class="c-container">
  <table class="c-table">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
    <tr>
      <th>1</th>
      <td>hoghoe</td>
      <td>fugafuga</td>
      <td>bakabka</td>
    </tr>
    <tr>
      <th>2</th>
      <td>hoghoe</td>
      <td>fugafuga</td>
      <td>bakabka</td>
    </tr>
  </table>
</div>

text

text--primary

text--highlight

text--secondary

<p class="c-text--primary">text--primary</p>
<p class="c-text--highlight">text--highlight</p>
<p class="c-text--secondary">text--secondary</p>

thumb

<p class="c-thumb"><img src="dist/img/hoge.jpg" width="100%" alt=""></p>

title

タイトル

タイトル

タイトルテキストテキスト

タイトルテキストテキスト

<h1 class="c-title c-title--primary">タイトル</h1>
<h1 class="c-title c-title--secondary">タイトル</h1>
<h1 class="c-title c-title--primary">タイトル<span class="c-title__sub-text">テキストテキスト</span></h1>
<h1 class="c-title c-title--secondary">タイトル<span class="c-title__sub-text">テキストテキスト</span></h1>

Utilityクラス

基本はプロパティを省略してクラス名にしてます。

クラス名 プロパティ
va vertical-align
br border
cf clearfix
d display
fl float
fz font-size
lc line-clamp
m margin
p padding
pos position
ta text-align
fw font-weight
td text-decoration
tt text-truncate
w width