Typography

Typography in Undernet makes up for a large chunk of the customization options. Headers and many of the individual paragraph and inline text tags are modifiable.

Undernet also comes with each text style in class form, so if you need a header styled as a paragraph, you can simply use the paragraph class.

Headers

Headers can vary a lot within a project. For that reason, headers use a sass-map consisting of sizing by breakpoint (small, medium, large by default, but you can add more), as well as a separate map for color, weight, and margin.

These maps output their keys and values as css properties. This means you can add any property: value normally found in CSS into these maps.

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Paragraphs, Code & Inline Text

Paragraphs use the default font size, with a margin bottom. All text (like what you’re reading now) uses paragraph style as the default.

<p>
  Paragraphs use the default font size, with a margin bottom. All text (like what you're reading
  now) uses paragraph style as the default. Just a regular old paragraph. I debated using a lorem
  ipsum generator here, but I think typing out coherent thoughts is on the upswing.
</p>

Write long-form, pre-formatted text with ease:

function() {
  console.log("'pre' tag, for retaining whitespace")
}

<pre>
  function() {
    console.log("'pre' tag, for retaining whitespace")
  }
</pre>

Use inline text tags as well:

• 'em' tag, for adding emphasis
• 'strong' tag, for adding importance
• 'code' tag, for showing one-line code snippets
• 'small' tag, for making text a little bit smaller
• 'mark' tag, for highlighting content
• 'u' tag, for differentiating emphasis

<em>'em' tag</em>, for adding emphasis <strong>'strong' tag</strong>, for adding importance
<code>'code' tag</code>, for showing one-line code snippets <small>'small' tag</small>, for making
text a little bit smaller <mark>'mark' tag</mark>, for highlighting content <u>'u' tag</u>, for
adding emphasis

Lists

Ordered and unordered lists can be styled as well. You can change the bullet style for each, if you don’t like the default disc and decimal variants.

Unordered List

• Unordered item
• Unordered item
• Unordered item

<ul>
  <li>Unordered item</li>
  <li>Unordered item</li>
  <li>Unordered item</li>
</ul>

Ordered List

1. Item #1
2. Item #2
3. Item #3

<ol>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ol>

Is there information missing? Edit this page on Github!