Documentation

Here a bunch of examples with their source code to make them happen.

[§] Textual content

title in h1

Some text in <p> with different styles; bold, strong, italic, emphasis, code. If you really want something to be extremly visible, use the class hl.

Links will looks like this into text: This is a link inside a paragraph.

The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.

Note we still try to keep a coherent and nice vertical rythm.

Here is some blockquote. This can give you an idea about the look and feel for them.


code
  <div class="inner" id="text">
    <h1>title in h1</h1>
    <div class="content">
      <p>Some text in &lt;p&gt; with different styles; <b>bold</b>,
      <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>,
      <code>code</code>. If you really want something to be
      extremly visible, <strong class="hl">use the class
      <code class="hl">hl</code></strong>.</p>
      <p>Links will looks like this into text: <a href="#">This is
      a link inside a paragraph.</a></p>
      <p>The text should be <strong class="hl">very dense</strong>
      on purpose. Forget your lessons about nice space in design
      here. The goal of this design is to produce
      <em>professional</em> UI applications. So no time to make it
      breathes. We want to make it compact and efficient.</p>
      <p>Note we still try to keep a coherent and nice vertical
      rythm.</p>
      <blockquote>
        <p>Here is some blockquote. This can give you an idea about
        the look and feel for them.</p>
      </blockquote>
    </div>
  </div>

doc class

Remark if you need to present a long text to read you can still use the class doc. Take a look at the next paragraph for example:

This is a doc block.

Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.

Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.

The doc class ensure the width of the text is not too wide and use a very legible font.

code
  <div class="inner">
    <h3>doc class</h3>
    <div class="content" id="doc">
      <p>Remark if you need to present a long text to read you can
      still use the class <code>doc</code>. Take a look at the next
      paragraph for example:</p>
      <div class="doc">
        <p>This is a doc block.</p>
        <p>Lorem ipsum with pretty Lorem ipsum dolor sit amet
        consectetur adipiscing elit, urna consequat felis vehicula
        class ultricies mollis dictumst, aenean non a in donec
        nulla. Phasellus ante pellentesque erat cum risus consequat
        imperdiet aliquam, integer placerat et turpis mi eros nec
        lobortis taciti, vehicula nisl litora tellus ligula
        porttitor metus.</p>
        <p>Vivamus integer non suscipit taciti mus etiam at primis
        tempor sagittis sit, euismod libero facilisi aptent
        elementum felis blandit cursus gravida sociis erat ante,
        eleifend lectus nullam dapibus netus feugiat curae
        curabitur est ad. Massa curae fringilla porttitor quam
        sollicitudin iaculis aptent leo ligula euismod dictumst,
        orci penatibus mauris eros etiam praesent erat volutpat
        posuere hac. Metus fringilla nec ullamcorper odio aliquam
        lacinia conubia mauris tempor, etiam ultricies proin
        quisque lectus sociis id tristique, integer phasellus
        taciti pretium adipiscing tortor sagittis ligula.</p>
      </div>
      <p>The <code>doc</code> class ensure the width of the text is
      not too wide and use a very legible font.</p>
    </div>
  </div>

headings

By default there is some space before and after any heading:

h1

h2

h3

h4

h5
h6

tight headings

You can remove the space by using the class tight to the heading:

h1 tight

h2 tight

h3 tight

h4 tight

h5 tight
h6 tight

code
  <div class="inner">
    <h3>headings</h3>
    <div class="content">
      <p>By default there is some space before and after any
      heading:</p>
    </div>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <h3>tight headings</h3>
    <div class="content">
      <p>You can remove the space by using the class
      <code>tight</code> to the heading:</p>
    </div>
    <h1 class="tight">h1 tight</h1>
    <h2 class="tight">h2 tight</h2>
    <h3 class="tight">h3 tight</h3>
    <h4 class="tight">h4 tight</h4>
    <h5 class="tight">h5 tight</h5>
    <h6 class="tight">h6 tight</h6>
  </div>

itemization

ul

  • item 1
  • item 2
  • item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the list-style-position: outside.
  • item 4

ol

  1. item 1
  2. item 2
  3. item 3
  4. item 4
code
  <div class="inner" id="itemize">
    <h2>itemization</h2>
    <div class="content">
      <h3>ul</h3>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3; with a very long text that should wrap to the
        next line in any browser. We'll see that the wrapped text
        should be aligned with the text of the other items. This is
        due to the <code>list-style-position: outside</code>.</li>
        <li>item 4</li>
      </ul>
      <h3>ol</h3>
      <ol>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ol>
    </div>
  </div>

[§] Grid

With default gap

c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11

code
  <div class="inner">
    <h3>With default gap</h3>
    <div class="content">
      <div class="row">
        <div class="bg-neutral c11">
          c11
        </div>
        <div class="y c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c10">
          c10
        </div>
        <div class="y c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c9">
          c9
        </div>
        <div class="y c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c8">
          c8
        </div>
        <div class="y c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c7">
          c7
        </div>
        <div class="y c5">
          c5
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="y c6">
          c6
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="y c7">
          c7
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="y c8">
          c8
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="y c9">
          c9
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="y c10">
          c10
        </div>
      </div>
      <div class="row">
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="y c11">
          c11
        </div>
      </div>
    </div>
  </div>

Gapless

c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
code
  <div class="inner">
    <h3>Gapless</h3>
    <div class="content">
      <div class="row gapless">
        <div class="bg-neutral c11">
          c11
        </div>
        <div class="y c1">
          c1
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c10">
          c10
        </div>
        <div class="y c2">
          c2
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c9">
          c9
        </div>
        <div class="y c3">
          c3
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c8">
          c8
        </div>
        <div class="y c4">
          c4
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c7">
          c7
        </div>
        <div class="y c5">
          c5
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="y c6">
          c6
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="y c7">
          c7
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="y c8">
          c8
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="y c9">
          c9
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="y c10">
          c10
        </div>
      </div>
      <div class="row gapless">
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="y c11">
          c11
        </div>
      </div>
    </div>
  </div>

3 columns


c1
c10
c1

c2
c9
c1
c1
c9
c2

c3
c8
c1
c2
c8
c2
c1
c8
c3

c4
c7
c1
c3
c7
c2
c2
c7
c3
c1
c7
c4

c5
c6
c1
c4
c6
c2
c3
c6
c3
c2
c6
c4
c1
c6
c5

c6
c5
c1
c5
c5
c2
c4
c5
c3
c3
c5
c4
c2
c5
c5
c1
c5
c6

c7
c4
c1
c6
c4
c2
c5
c4
c3
c4
c4
c4
c3
c4
c5
c2
c4
c6
c1
c4
c7

c8
c3
c1
c7
c3
c2
c6
c3
c3
c5
c3
c4
c4
c3
c5
c3
c3
c6
c2
c3
c7
c1
c3
c8

c9
c2
c1
c8
c2
c2
c7
c2
c3
c6
c2
c4
c5
c2
c5
c4
c2
c6
c3
c2
c7
c2
c2
c8
c1
c2
c9

c10
c1
c1
c9
c1
c2
c8
c1
c3
c7
c1
c4
c6
c1
c5
c5
c1
c6
c4
c1
c7
c3
c1
c8
c2
c1
c9
c1
c1
c10


code
  <div class="inner">
    <h3>3 columns</h3>
    <div class="content">
      <br></br>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c10">
          c10
        </div>
        <div class="r c1">
          c1
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c9">
          c9
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c9">
          c9
        </div>
        <div class="r c2">
          c2
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c8">
          c8
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c8">
          c8
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c8">
          c8
        </div>
        <div class="r c3">
          c3
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c7">
          c7
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c7">
          c7
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c7">
          c7
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c7">
          c7
        </div>
        <div class="r c4">
          c4
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c5">
          c5
        </div>
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="r c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c6">
          c6
        </div>
        <div class="r c5">
          c5
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c6">
          c6
        </div>
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c5">
          c5
        </div>
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="r c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="r c5">
          c5
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c5">
          c5
        </div>
        <div class="r c6">
          c6
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c7">
          c7
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c6">
          c6
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c5">
          c5
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c5">
          c5
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c6">
          c6
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c4">
          c4
        </div>
        <div class="r c7">
          c7
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c8">
          c8
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c7">
          c7
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c6">
          c6
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c5">
          c5
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c5">
          c5
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c6">
          c6
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c7">
          c7
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c3">
          c3
        </div>
        <div class="r c8">
          c8
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c9">
          c9
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c8">
          c8
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c7">
          c7
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c6">
          c6
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="b c5">
          c5
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c5">
          c5
        </div>
      </div>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c6">
          c6
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c7">
          c7
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c8">
          c8
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c2">
          c2
        </div>
        <div class="r c9">
          c9
        </div>
      </div><br></br>
      <div class="row">
        <div class="b c10">
          c10
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c1">
          c1
        </div>
      </div>
      <div class="row">
        <div class="b c9">
          c9
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c2">
          c2
        </div>
      </div>
      <div class="row">
        <div class="b c8">
          c8
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c3">
          c3
        </div>
      </div>
      <div class="row">
        <div class="b c7">
          c7
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c4">
          c4
        </div>
      </div>
      <div class="row">
        <div class="b c6">
          c6
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c5">
          c5
        </div>
      </div>
      <div class="row">
        <div class="b c5">
          c5
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c6">
          c6
        </div>
      </div>
      <div class="row">
        <div class="b c4">
          c4
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c7">
          c7
        </div>
      </div>
      <div class="row">
        <div class="b c3">
          c3
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c8">
          c8
        </div>
      </div>
      <div class="row">
        <div class="b c2">
          c2
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c9">
          c9
        </div>
      </div>
      <div class="row">
        <div class="b c1">
          c1
        </div>
        <div class="bg-neutral c1">
          c1
        </div>
        <div class="r c10">
          c10
        </div>
      </div><br></br>
    </div>
  </div>

[§] Images

Images

Inside a card

Inside a block

Directly in the column


code
  <div class="inner" id="images">
    <h1>Images</h1>
    <div class="block">
      <div class="row">
        <div class="card">
          <h3>Inside a card</h3>
          <div class="content"><img src="../h/img/brutalism.webp"></img></div>
        </div>
        <div class="block">
          <h3>Inside a block</h3>
          <div class="content"><img src="../h/img/brutalism.webp"></img></div>
        </div>
        <div>
        <h3>Directly in the column</h3><img src="../h/img/brutalism.webp"></img></div>
      </div>
    </div>
  </div>

figure

an image
figcaption after
figcaption before
another image
code
  <div class="inner" id="figure">
    <h1>figure</h1>
    <div class="row">
      <figure>
        <img alt="an image" src="../h/img/brutalism.webp"></img>
        <figcaption>
          figcaption after
        </figcaption>
      </figure>
      <figure>
        <figcaption>
          figcaption before
        </figcaption><img alt="another image" src="../h/img/brutalism.webp"></img>
      </figure>
    </div>
  </div>

[§] icons

Safe

☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №

The "Safe" icons should work almost everywhere.

Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ￥ quite ￡ long ￠ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! №


code
  <div class="inner col start">
    <h4>Safe</h4>
    <div class="content">
      <i class="ico big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜
      ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
      <div class="msg push">
        <p>The "Safe" icons should work almost everywhere.</p>
        <p><span>Inserting</span> <i class="ico">☎</i>
        <span>in</span> <i class="ico">♂</i> <span>the</span>
        <i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i> <span>of</span> <i class="ico">©</i>
        <span>some</span> <i class="ico">§</i> <span>text</span>
        <i class="ico">®</i> <span>to</span> <i class="ico">⇦</i>
        <span>check</span> <i class="ico">⇧</i> <span>the</span>
        <i class="ico">⇨</i> <span>size.</span> <i class="ico">⇩</i> <span>Now</span> <i class="ico">♠</i>
        <span>this</span> <i class="ico">♣</i> <span>should</span>
        <i class="ico">♥</i> <span>give</span> <i class="ico">♦</i>
        <span>an</span> <i class="ico">♪</i> <span>idea</span>
        <i class="ico">♛</i> <span>about</span> <i class="ico">♜</i> <span>the</span> <i class="ico">♝</i>
        <span>size</span> <i class="ico">♞</i>
        <span>relatively</span> <i class="ico">♟</i>
        <span>to</span> <i class="ico">☜</i> <span>the</span>
        <i class="ico">☞</i> <span>text.</span> <i class="ico">♨</i> <span>Hmmm</span> <i class="ico">♭</i>
        <span>this</span> <i class="ico">♯</i> <span>is</span>
        <i class="ico">￥</i> <span>quite</span> <i class="ico">￡</i> <span>long</span> <i class="ico">￠</i>
        <span>and</span> <i class="ico">❊</i> <span>boring</span>
        <i class="ico">฿</i> <span>to</span> <i class="ico">๏</i>
        <span>write</span> <i class="ico">※</i> <span>text</span>
        <i class="ico">₧</i> <span>in</span> <i class="ico">₨</i>
        <span>between</span> <i class="ico">₪</i> <span>like</span>
        <i class="ico">€</i> <span>that!</span> <i class="ico">№</i></p>
      </div>
    </div>
  </div>

Total Set

✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
Just a bunch of a few more unicode icons.
code
  <div class="inner col start">
    <h4>Total Set</h4>
    <div class="content">
      <i class="ico big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘
      ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
      <div class="msg">
        Just a bunch of a few more unicode icons.
      </div>
    </div>
  </div>

[§] Forms





$


Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the <span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$

code
  <div class="content">
    <input id="example1" placeholder="text input" type="text"></input><br></br>
    <br></br>
    <textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br></br>
    <br></br>
    <div class="form-block">
      <span class="addon info">$</span><input placeholder="with addon" type="text"></input>
    </div><br></br>
    <br></br>
    <div class="msg">
      <strong>Be careful with addons!</strong> If you do not want a
      space between the addon and the input make sure that there is
      no space between the <code>&lt;span&gt;</code> and
      <code>&lt;input&gt;</code> tags. Example:
      <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre>
      <div class="form-block">
        <span class="addon">$</span> <input class="smooth" type="text"></input>
      </div>
      <pre>... &lt;/span&gt;&lt;input ...</pre>
      <div class="form-block">
        <span class="addon">$</span><input class="smooth" type="text"></input>
      </div>
    </div>
  </div>

[§] Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200

code
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Widgets Sold</th>
        <th>Revenue (£)</th>
        <th>Profit (£)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>5</td>
        <td>10</td>
        <td>2</td>
      </tr>
      <tr>
        <td>2</td>
        <td>10</td>
        <td>20</td>
        <td>4</td>
      </tr>
      <tr>
        <td>3</td>
        <td>500</td>
        <td>1000</td>
        <td>200</td>
      </tr>
    </tbody>
  </table>

[§] Buttons

Tags

  • item-1tag
  • item-2hl tag
  • item-3info
  • item-4ok
  • item-5warn
  • item-6err
  • item-7fatal

code
  <div class="inner" id="tags">
    <h2>Tags</h2>
    <div class="content">
      <ul>
        <li>item-1<span class="tag">tag</span></li>
        <li>item-2<span class="tag hl">hl tag</span></li>
        <li>item-3<span class="tag info">info</span></li>
        <li>item-4<span class="tag ok">ok</span></li>
        <li>item-5<span class="tag warn">warn</span></li>
        <li>item-6<span class="tag err">err</span></li>
        <li>item-7<span class="tag fatal">fatal</span></li>
      </ul>
    </div>
  </div>

Inline Tags

tagtag hlinfookwarnerrfatal
code
  <div class="inner" id="tags-inline">
    <h2>Inline Tags</h2>
    <div class="content">
      <span class="tag">tag</span><span class="tag hl">tag
      hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span>
    </div>
  </div>

Textual buttons

tbtb hltb infotb oktb warntb errtb fatal

code
  <div class="inner" id="text-buttons">
    <h3>Textual buttons</h3>
    <div class="content">
      <a class="tb">tb</a><a class="tb hl">tb hl</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a>
    </div>
  </div>

Textual Buttons Sizes

Some text: small button
Some text: normal ok
Some text: big warn
Some text: huge err
code
  <div class="inner" id="text-buttons-sizes">
    <h3>Textual Buttons Sizes</h3>
    <div class="content">
      <div class="block">
        Some text: <a class="tb sm">small button</a><br></br>
        Some text: <a class="tb ok">normal ok</a><br></br>
        Some text: <a class="tb big warn">big warn</a><br></br>
        Some text: <a class="tb huge err">huge err</a>
      </div>
    </div>
  </div>

Buttons

Classic

btnbtn hlbtn infobtn okbtn warnbtn errbtn fatal

Sizes

btn smbtn infobtn big warnbtn huge err

Standardized Width btn std

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Big

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Huge

btn stdbtn std hlbtn std infobtn std okbtn std warnbtn std errbtn std fatal

code
  <div class="inner col">
    <h2>Buttons</h2>
    <div class="row">
      <div class="card c4">
        <h3>Classic</h3>
        <div class="content">
          <a class="btn">btn</a><a class="btn hl">btn
          hl</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn
          warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a>
        </div>
      </div>
      <div class="card c4">
        <h3>Sizes</h3>
        <div class="content">
          <a class="btn sm">btn sm</a><a class="btn info">btn
          info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a>
        </div>
      </div>
      <div class="col c4 card">
        <h3>Standardized Width <code>btn std</code></h3>
        <div class="content">
          <div class="mid">
            <a class="btn std">btn std</a><a class="btn std hl">btn
            std hl</a><a class="btn std info">btn std
            info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col card c4">
        <h3>Big</h3>
        <div class="content center">
          <div class="big mid">
            <a class="btn std">btn std</a><a class="btn std hl">btn
            std hl</a><a class="btn std info">btn std
            info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a>
          </div>
        </div>
      </div>
      <div class="col card c8">
        <h3>Huge</h3>
        <div class="content huge mid center">
          <a class="btn std">btn std</a><a class="btn std hl">btn
          std hl</a><a class="btn std info">btn std
          info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
          std err</a><a class="btn std fatal">btn std fatal</a>
        </div>
      </div>
    </div>
  </div>

[§] Messages

Basic Messages

Normal Message This is a normal message with msg.
☞ Info This is done by adding info to the class.
☑ OK This is done by adding ok to the class.
☣ Warning This is done by adding warn to the class.
☒ Error This is done by adding err to the class.
☠ Fatal This is done by adding fatal to the class.
☞Highlighted This is done by adding hl to the class.

code
  <div class="inner">
    <div class="col c12 gapless">
      <h2>Basic Messages</h2>
      <div class="content">
        <div class="msg">
          <strong>Normal Message</strong> This is a normal message
          with <code>msg</code>.
        </div>
        <div class="msg info">
          <strong><i class="ico big">☞</i> Info</strong> This is
          done by adding <code>info</code> to the class.
        </div>
        <div class="msg ok">
          <strong><i class="ico big">☑</i> OK</strong> This is done
          by adding <code>ok</code> to the class.
        </div>
        <div class="msg warn">
          <strong><i class="ico big">☣</i> Warning</strong> This is
          done by adding <code>warn</code> to the class.
        </div>
        <div class="msg err">
          <strong><i class="ico big">☒</i> Error</strong> This is
          done by adding <code>err</code> to the class.
        </div>
        <div class="msg fatal">
          <strong><i class="ico big">☠</i> Fatal</strong> This is
          done by adding <code>fatal</code> to the class.
        </div>
        <div class="msg hl">
          <strong><i class="ico big">☞</i>Highlighted</strong> This
          is done by adding <code>hl</code> to the class.
        </div>
      </div>
    </div>
  </div>

code
  <div class="inner navbar">
    <nav class="nav" onclick="this.focus()" tabindex="-1">
      <div class="container">
        <a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a>
      </div>
    </nav><button class="btn-close btn sm">×</button>
  </div>

code
  <div class="inner">
    <footer>
      <div class="container">
        <p>Made by <a href="https://yannesposito.com">Yann
        Esposito</a></p><br></br>
      </div>
    </footer>
  </div>