Typography

The base css framework comes with a variety of typography settings.



Font family

The default font family can be changed in the input.css configuration file

Headings

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

Wrapping up normal text with a p tag for paragraphs

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Ipsam, ex dolore voluptatum, rerum accusamus accusantium 
obcaecati odio eius reiciendis vel nam autem quas tempore 
pariatur. Temporibus a rerum nobis consequatur?</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, ex dolore voluptatum, rerum accusamus accusantium obcaecati odio eius reiciendis vel nam autem quas tempore pariatur. Temporibus a rerum nobis consequatur?

Anchor text

The framework is styled by default as below for link tags. You may change this in the SASS configuration file


<a href="#">link</a>

link

Should you wish to remove the default link styles use the class rm-link-styles on the anchor tag

Text colors

  • text-primary
  • text-white
  • text-muted
  • text-black
  • text-danger
  • text-success
  • text-info
  • text-center
  • pull-right
<div class="text-primary">hello</div>
<div class="text-white">hello</div>
<div class="text-muted">hello</div>
<div class="text-black">hello</div>
<div class="text-danger">hello</div>
<div class="text-success">hello</div>
<div class="text-info">hello</div>
<div class="text-center">hello</div>
<div class="pull-right">hello</div>
hello
hello
hello
hello
hello
hello
hello
hello
hello

Code

You can print code blocks using the code class

<div class="code">This is a code block</div>
This is a code block

Ordered and unordered lists

<ol>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ol>

<ul>
 <li>test</li>
<li>test</li>
</ul>
  1. test
  2. test
  3. test
  • test
  • test