Base

Includes useful default styles and base components for common HTML elements.

npm version

npm install @vrembem/base
@import "@vrembem/base/index";

Heading

Heading

Heading

Heading

Heading

Heading

Heading

<p class="h1">...</p>
<p class="h2">...</p>
<p class="h3">...</p>
<p class="h4">...</p>
<p class="h5">...</p>
<p class="h6">...</p>

Link

<a href="#" class="link">Link</p>
<a href="#" class="link link_subtle">Link</a>
<a href="#" class="link link_invert">Link</a>
<a href="#" class="link link_invert-subtle">Link</a>

List

  • One
  • Two
    • One
    • Two
    • Three
  • Three
  1. One
  2. Two
    1. One
    2. Two
    3. Three
  3. Three
<ul class="list">
  <li>One</li>
  <li>Two
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li>Three</li>
</ul>

<ol class="list">
  ...
</ol>

Separator

Typically used on an <hr> HTML element representing a thematic break between paragraph-level elements.









<!-- Separator -->
<hr class="sep sep_light">
<hr class="sep">
<hr class="sep sep_dark">
<hr class="sep sep_darker">

<!-- Invert separator -->
<hr class="sep sep_invert-light">
<hr class="sep sep_invert">
<hr class="sep sep_invert-dark">
<hr class="sep sep_invert-darker">

embed

<div class="embed">
  <iframe class="embed__item" src="..." width="560" height="315"></iframe>
</div>

blockquote

"All over the place, from the popular culture to the propaganda system, there is constant pressure to make people feel that they are helpless, that the only role they can have is to ratify decisions and to consume."

Noam Chomsky, On Keeping the Population Passive
<blockquote class="blockquote" cite="...">
  <p>...</p>
  <footer>
    ...,
    <cite>...</cite>
  </footer>
</blockquote>

code

a = 17
<code class="code">a = 17</code>

pre

a = 17
print "a = #{a}";
<pre class="pre"><code>...</code></pre>

type

The type component is a quick way to apply all base styles to components directy based on their respective HTML elements. Base component modifiers will override a parent type component when explicitly set. Other components will run into style conflicts unless written with type inheritance in mind.

Heading

Heading

Heading

Heading

Heading
Heading

This is a paragraph $code-example and some other things. Click here for a link example. You can still apply link modifiers inside of a type component.


  • One
  • Two
    • One
    • Two
    • Three
  • Three
  1. One
  2. Two
    1. One
    2. Two
    3. Three
  3. Three

"History shows that, more often than not, loss of sovereignty leads to liberalization imposed in the interests of the powerful."

Noam Chomsky, On Authority
a = 17
print "a = #{a}";
<div class="type">

  <h1>Heading</h1>
  <h2>Heading</h2>
  <h3>Heading</h3>
  <h4>Heading</h4>
  <h5>Heading</h5>
  <h6>Heading</h6>

  <p>...</p>

  <hr>

  <ul>
    <li>One</li>
    ...
  </ul>

  <ol>
    <li>One</li>
    ...
  </ol>

  <blockquote cite="...">
    ...
  </blockquote>

  <pre>
    <code>
      ...
    </code>
  </pre>

</div>

type_invert

Heading

Heading

Heading

Heading

Heading
Heading

This is a paragraph $code-example and some other things. Click here for a link example. You can still apply link modifiers inside of a type component.


  • One
  • Two
    • One
    • Two
    • Three
  • Three
  1. One
  2. Two
    1. One
    2. Two
    3. Three
  3. Three

"It is quite possible–overwhelmingly probable, one might guess–that we will always learn more about human life and personality from novels than from scientific psychology."

Noam Chomsky, On Science
a = 17
print "a = #{a}";
<div class="type type_invert">

  <h1>Heading</h1>
  <h2>Heading</h2>
  <h3>Heading</h3>
  <h4>Heading</h4>
  <h5>Heading</h5>
  <h6>Heading</h6>

  <p>...</p>

  <hr>

  <ul>
    <li>One</li>
    ...
  </ul>

  <ol>
    <li>One</li>
    ...
  </ol>

  <blockquote cite="...">
    ...
  </blockquote>

  <pre>
    <code>
      ...
    </code>
  </pre>

</div>