WSE typography

example of typography

by hxtpoe

HTML

<link rel="stylesheet" href="http://ui.ioki.pl/pe-bootstrap-lab-wse/_dist/wse/css/strap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="wse-typo-default-font-size">
    <h1 id="typography" class="wse-typo-h1">Default typography for font-size 16px</h1>
    <table>
        <tbody>
        <tr>
            <td><span class="wse-typo-body"></span></td>
            <td><span class="wse-typo-body"></span></td>
            <td><span class="wse-typo-body"></span></td>
            <td><span class="wse-typo wse-typo-h3 tertiary">css class</span></td>
            <td><span class="wse-typo wse-typo-h3 tertiary">scss mixin @include</span></td>
        </tr>
        <tr>
            <td><span class="wse-typo-g1">G1</span></td>
            <td><span class="wse-typo-g1">Giant</span></td>
            <td><span class="wse-typo-g1">Regular 44px, leading 56px</span></td>
            <td><span class="wse-typo-g1">.wse-typo-g1</span></td>
            <td><span class="wse-typo-g1">wse-typo-g1()</span></td>
        </tr>
        <tr>
            <td><h1 class="wse-typo-h1">h1</h1></td>
            <td><h1 class="wse-typo-h1">Page-Title</h1></td>
            <td><h1 class="wse-typo-h1">Semibold 28px, leading 36px</h1></td>
            <td><span class="wse-typo-h1">.wse-typo-h1</span></td>
            <td><span class="wse-typo-h1">wse-typo-h1()</span></td>
        </tr>
        <tr>
            <td><h2 class="wse-typo-h2">h2</h2></td>
            <td><h2 class="wse-typo-h2">Headline</h2></td>
            <td><h2 class="wse-typo-h2">Regular 24px, leading 32px</h2></td>
            <td><span class="wse-typo-h2">.wse-typo-h2</span></td>
            <td><span class="wse-typo-h2">wse-typo-h2()</span></td>
        </tr>
        <tr>
            <td><h3 class="wse-typo-h3">h3</h3></td>
            <td><h3 class="wse-typo-h3">Title</h3></td>
            <td><h3 class="wse-typo-h3">Semibold 20px, leading 24px</h3></td>
...

CSS

/* 
  css ony for preview purpose 
 */

.small-font-size {
  font-size: 8px;
}

.big-font-size {
  font-size: 20px;
}

.brand-color--gray4 {
  background-color: #FFFFFF;
  padding: 1em;
}

.brand-color--gray3 {
  background-color: #EFEFEF;
  padding: 1em;
}

.brand-color--blue-primary {
  background-color: #003359;
  padding: 1em;
}