Typography

Learn how to use headings, paragraphs and other kinds of texts in Luda.

Headings

Heading Global Styles

Global styles are added to heading elements from h1 to h6, extra paddings are added in the top and bottom of these elements to ensure baseline alignment.

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

Heading Classes

The classes from .h1 to .h6 can be used to create texts looks like headings.

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

Paragraphs

Paragraph Global styles

Global styles are added to the p element, like headings, extra paddings in the top and bottom are also added.

<p>
  Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
  Poor Cinderella had to work hard all day long so the others could rest.
  It was she who had to wake up each morning when it was still dark
  and cold to start the fire. It was she who cooked the meals.
  It was she who kept the fire going. The poor girl could not stay clean,
  from all the ashes and cinders by the fire.
</p>
<p>
  One day, big news came to town. The King and Queen were going to have a ball!
  It was time for the Prince to find a bride.
  All of the young ladies in the land were invited to come.
  They were wild with joy! They would wear their most beautiful gown
  and fix their hair extra nice. Maybe the prince would like them!
</p>

Paragraph Classes

You can use the classes from .p1 to p6 to create texts looks like paragraphs. In most cases, texts with the classes .p4, .p5 or .p6 are easy for reading.

<span class="p1">Paragraph class .p1</span>
<span class="p2">Paragraph class .p2</span>
<span class="p3">Paragraph class .p3</span>
<span class="p4">Paragraph class .p4</span>
<span class="p5">Paragraph class .p5</span>
<span class="p6">Paragraph class .p6</span>

Inline ModifierModifier

Sometimes, texts have different font sizes need be nested together, remember to use the .typo-inline modifier class to ensure baseline alignment. Let’s see the below example.

<p>
  Here are
  <span class="p2 typo-inline">some nested inline texts</span>.
</p>

Codes

If you need show large amount of codes in your applications, you’d better use code highlighters like rouge, they support many languages and features.

But if you just want to show small pieces of codes, you can use the code styles in Luda directly.

Inline Codes

Global styles are added to the code, samp and kbd elements, to use inline codes, just wrap you code snippets in these elements as below.

<p>
  <code>const DOMAIN = 'luda.com'</code><br>
  <samp>Disk fault</samp><br>
  <kbd>CTRL + ALT + M</kbd>
</p>

Code Block

To create a code block, add the .code class to a pre element, then wrap a code element inside.

  class DocumentationController
    private
    def _set_items
      @generals = @@generals
      @behaviours = @@behaviours
      @elements = @@elements
      @collections = @@collections
      @utilities = @@utilities
    end
  end

<pre class="code">
<code>
  class DocumentationController
    private
    def _set_items
      @generals = @@generals
      @behaviours = @@behaviours
      @elements = @@elements
      @collections = @@collections
      @utilities = @@utilities
    end
  end
</code>
</pre>

Quotes

Quotes should be included with the the <q> tag or the <blockquote> tag.

Inline Quote

Global styles are added to the <q> tag and the <cite> tag, for short quotes, we should use the <q> tag.

<p>
  <q>
    Words can be like X-rays, if you use them properly – they'll go through anything.
    You read and you're pierced.
  </q>
  <cite>– Brave New World</cite>
</p>

Blockquote

To include long quotes, we should use the <blockquote> tag. Add the .quote class to the <blockquote> tag, then wrap <p> tags inside. If a footnote is necessary, include a <footer> tag.

<blockquote class="quote" cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Words can be like X-rays, if you use them properly – they'll go through anything.
    You read and you're pierced.
  </p>
  <footer class="p5">
    <cite>Brave New World</cite>
  </footer>
</blockquote>

Links

Link Global Styles

Global styles are added to the <a> tag.

This is a link.

<a href="#">This is a link.</a>

Light Link

For using links in dark backgrounds, add the .link-light calss to the <a> tag.

This is a light link.

<a class="link-light" href="#">This is a light link.</a>

Lists

For different purpose, you should use different type lists.

Unordered List

The <ul> element represents an unordered list of items.

<ul class="p5">
  <li>Unordered list item one</li>
  <li>Unordered list item two</li>
  <li>Unordered list item three</li>
</ul>

Ordered List

The <ol> element represents an ordered list of items.

<ol class="p5">
  <li>Ordered list item one</li>
  <li>Ordered list item two</li>
  <li>Ordered list item three</li>
</ol>

Definition List

The <dl> element represents a description list.

<dl class="p5">
  <dt>Title One</dt>
  <dd>Definition list item one</dd>
  <dt>Title Two</dt>
  <dd>Definition list item two</dd>
  <dt>Title Three</dt>
  <dd>Definition list item three</dd>
</dl>

Other Inline Texts

You can preview the appearances of other inline texts in the below examples.

Bold   Strong   Inserted   Underline   Emphasis   Italic   Delete   Stroke   Text _Sub   Text ^Sup   abbr   Mark  

<p>
  <b>Bold</b>
  <strong>Strong</strong>
  <ins>Inserted</ins>
  <u>Underline</u>
  <em>Emphasis</em>
  <i>Italic</i>
  <del>Delete</del>
  <s>Stroke</s>  
  <span>Text <sub>Sub</sub></span>
  <span>Text <sup>Sup</sup></span>
  <abbr title="abbr">abbr</abbr>
  <mark>Mark</mark>
</p>

Sass Mixins

+font-face($family: null, $style: normal, $weight: 400, $locals: null, $urls: null, $unicodes: null)

This mixin is used to import web fonts. $locals, $urls and $unicodes should be lists.

+typo-link($class: null, $color: null, $hover-color: null, $active-color: null)

This mixin is used to create more link color classes.

Sass Variables

Body Texts

$typography-main: constant-get(typography-stacks, sans-serif) !default

Default font family of body texts.

$typography-main-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Helvetica Neue") !default

Default baseline offset ratio of body texts font family, it’s used to calculate text paddings for better baseline alignment.

$typography-main-size-px: 14px !default

Default font size of body texts. A calculated rem value will be used to set the font-size property of body.

$typography-main-size-level: 5 !default

Default font size level of body texts. The value must be an integer between 1 and 6.

$typography-size-scale-ratio: constant-get(scale-ratios, minor-third) !default

Default type scale ratio of texts. Different level font sizes are calculated based on this variable and $typography-main-size-level.

$typography-main-line-height-ratio: 26 / 14 !default

Default line height of body texts. The height of baseline grid is calculated based on this variable and $typography-main-size-px.

$typography-main-color: $color-main !default

Default color of body texts.

Heading

$typography-heading: null !default

Default font family of headings.

$typography-heading-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default

Default baseline offset ratio of headings, for better baseline alignment.

$typography-heading-color: $color-emphasis !default

$typography-heading-font-weight: 700 !default

Code

$typography-code: constant-get(typography-stacks, code) !default

Default font family of codes.

$typography-code-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Courier New") !default

Default baseline offset ratio of codes, for better baseline alignment.

$typography-block-code-size-level: 6 !default

The value must be an integer between 1 and 6.

$typography-code-padding-em: 0.1em 0.3em !default

Default paddings of inline codes.

$typography-code-background: $background-color-muted !default

$typography-code-color: $color-main !default

$typography-code-border-radius: $border-radius-main !default

$typography-code-block-padding-rem: 0 $spacing-medium-rem !default

Quote

$typography-quote: null !default

Default font family of quotes.

$typography-quote-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default

Default baseline offset ratio of quotes, for better baseline alignment.

$typography-block-quote-size-level: 4 !default

The value must be an integer between 1 and 6.

$typography-cite-color: $color-muted !default

$typography-quote-block-padding-rem: 3 * $spacing-small-rem $spacing-large-rem $spacing-medium-rem !default

$typography-quote-block-p-margin-rem: 0 auto $spacing-small-rem !default

$typography-quote-block-cite-line-height: $line-width-main !default

Link

$typography-link-text-decoration: underline !default

$typography-link-hover-text-decoration: null !default

$typography-link-active-text-decoration: null !default

$typography-link-color: $color-main !default

$typography-link-hover-color: $color-emphasis !default

$typography-link-active-color: null !default

$typography-link-light-color: $color-inverse-main !default

$typography-link-light-hover-color: $color-inverse-emphasis !default

$typography-link-light-active-color: null !default

List

$typography-list-nested-padding-em: 0 0 0 strip-unit($spacing-medium-rem) * 1em !default

Default paddings of nested lists.

Mark

$typography-mark-padding-em: 0.1em 0.3em !default

$typography-mark-background: $background-color-emphasis !default

$typography-mark-color: $color-primary !default

$typography-mark-border-radius: $border-radius-main !default

Others

$typography-sub-sup-size: 100% / $typography-size-scale-ratio !default

$typography-sub-bottom-offset-em: -0.25em !default

$typography-sup-top-offset-em: -0.5em !default