Base #permalink

<div class="e-row">
  <div class="e-col-12">
    <h1>Headline Lorem ipsum</h1>

    <h2>Title Lorem ipsum dolor sit</h2>

    <h3>Subheader lorem</h3>

    <div class="e-row">
      <div class="e-col-4">
        <p>Lorem ipsum dolor sit amet,
          <small>Small text consectetur adipisicing</small>
          elit. 默认表格语言 Aliquid aperiam deleniti eaque nam perspiciatis repellendus
          veritatis voluptates. A, fuga, quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
          unde.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam deleniti eaque nam perspiciatis
          repellendus
          veritatis voluptates. A, fuga, quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
          unde.
        </p>

        <p>您的密码必须至少包含10个字母数字拉丁字符（包括AZ，az，0-9），包括大小写和至少一个数字。特殊字符是不允许的。
          Your password must consist of at least 10 alphanumeric Latin characters (a-z, A-Z, 0-9), including upper and
          lower case and at least one digit. Special characters are not allowed.
          Votre mot de passe doit contenir au moins dix caractères latins alphanumériques (a-z, A-Z, 0-9), des
          majuscules et des minuscules, et au moins un chiffre. Les caractères spéciaux ne sont pas autorisés.
          Ihr Passwort muss mindestens aus 10 alphanumerischen Zeichen (a-z, A-Z, 0-9) bestehen und sowohl Groß- als
          auch Kleinbuchstaben als auch zumindest eine Zahl beinhalten. Sonderzeichen sind nicht erlaubt.
          Ваш пароль должен состоять по крайней мере из 10 латинских букв и цифр (a-z, A-Z, 0-9), включая верхний и
          нижний регистр и по крайней мере одну цифру. Специальные символы не допускаются.</p>
      </div>
      <div class="e-col-4">
        <p>Lorem ipsum dolor sit amet,
          <small>Small text consectetur adipisicing</small>
          elit. 默认表格语言 Aliquid aperiam deleniti eaque nam perspiciatis repellendus
          veritatis voluptates. A, fuga, quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
          unde.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam deleniti eaque nam perspiciatis
          repellendus
          veritatis voluptates. A, fuga, quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
          unde.
        </p>
        <p>Lorem ipsum dolor sit amet,
          <small>Small text consectetur adipisicing</small>
          elit. 默认表格语言 Aliquid aperiam deleniti eaque nam perspiciatis repellendus
          veritatis voluptates. A, fuga, quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
          unde.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam deleniti eaque nam perspiciatis
          repellendus
          veritatis voluptates. A, fuga, quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
          unde.
        </p>
      </div>
      <div class="e-col-4">
        <p>您的密码必须至少包含10个字母数字拉丁字符（包括AZ，az，0-9），包括大小写和至少一个数字。特殊字符是不允许的。
          Your password must consist of at least 10 alphanumeric Latin characters (a-z, A-Z, 0-9), including upper and
          lower case and at least one digit. Special characters are not allowed.
          Votre mot de passe doit contenir au moins dix caractères latins alphanumériques (a-z, A-Z, 0-9), des
          majuscules et des minuscules, et au moins un chiffre. Les caractères spéciaux ne sont pas autorisés.
          Ihr Passwort muss mindestens aus 10 alphanumerischen Zeichen (a-z, A-Z, 0-9) bestehen und sowohl Groß- als
          auch Kleinbuchstaben als auch zumindest eine Zahl beinhalten. Sonderzeichen sind nicht erlaubt.
          Ваш пароль должен состоять по крайней мере из 10 латинских букв и цифр (a-z, A-Z, 0-9), включая верхний и
          нижний регистр и по крайней мере одну цифру. Специальные символы не допускаются.</p>
      </div>
    </div>
  </div>
</div>

Media #permalink

Grid #permalink

<div class="kss__gridexample">
  <!-- 12 grid -->

  <div class="e-row">
    <div class="e-col-1">1</div>
    <div class="e-col-1">2</div>
    <div class="e-col-1">3</div>
    <div class="e-col-1">4</div>
    <div class="e-col-1">5</div>
    <div class="e-col-1">6</div>
    <div class="e-col-1">7</div>
    <div class="e-col-1">8</div>
    <div class="e-col-1">9</div>
    <div class="e-col-1">10</div>
    <div class="e-col-1">11</div>
    <div class="e-col-1">12</div>
  </div>

  <div class="e-row">
    <div class="e-col-6">.e-col-6</div>
    <div class="e-col-6">.e-col-6</div>
  </div>

  <!-- Resposive grid -->

  <div class="e-row">
    <div class="e-col-12 e-col-large-6">.e-col-12 .e-col-large-6</div>
    <div class="e-col-12 e-col-large-6">.e-col-12 .e-col-large-6</div>
  </div>

  <div class="e-row">
    <div class="e-col-12">
      <div class="e-row">
        <div class="e-col-3">1</div>
        <div class="e-col-3">2</div>
        <div class="e-col-3">3</div>
        <div class="e-col-3">4</div>
      </div>
    </div>
  </div>
</div>

Mixins #permalink

Triangle #permalink

@include triangle($direction, $color, $size, $wide) #permalink

• @direction
  Can be 'top', 'bottom', 'right' or 'left'
• @color
  Triangle color
• @size
  Default is 1em
• @wide
  Default is 1.5