Global settings #

• Employ a native font stack chooses the ideal font family for every OS and device.
• Using the browser's default root font-size, which is commonly 16px, to provide a more inclusive and accessible type scale. Visitors can change their browser defaults as necessary.
• As the typographic base for the body>, use the $font-family-base, $font-size-base, and $line-height-base properties.
• Using $link-color, change the color of all links.
• To change the background color of the body>, use $body-bg (#fff by default).

The global variables are defined in _variables.scss, and these styles can be found in _reboot.scss. Make sure $font-size-base is set to rem.

Headings #

When there is a need to match the font styling of a heading but are unable to utilize the related HTML element, alternatively use the .h1 through .h6 classes.

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<p class="h1">h1. UX4G heading</p>
<p class="h2">h2. UX4G heading</p>
<p class="h3">h3. UX4G heading</p>
<p class="h4">h4. UX4G heading</p>
<p class="h5">h5. UX4G heading</p>
<p class="h6">h6. UX4G heading</p>

RESULT

Customizing headings #

Use the included utility classes to recreate the small secondary heading text from UX4G 3.

Display headings #

The bulk of pages content is where traditional heading components are intended to function best. Consider utilizing a show heading—a bigger, marginally more opinionated heading style—when you need a heading to stand out.

Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.

Display headings are customizable via two variables, $display-font-family and $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead #

Make a paragraph stand out by adding .lead.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

RESULT

Inline text elements #

Styling for common inline HTML5 elements.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

RESULT

Be careful to use those tags just for semantic purposes.

• <mark> stands for text that has been underlined or highlighted for notation or reference.
• The text in <small> type, such as copyright and legal text, represents side comments and small print.
• The symbol <s> stands for elements that have lost their accuracy or relevance.
• A stretch of inline text with the symbol <u> should be shown to show that it has a non-textual annotation.

Instead, you ought to make use of the classes listed below to style your text:

• The same styles as <mark> will be applied by.mark.
• "small" will be used by "small."
• .text-decoration-underline apply the same style as <u> and <s>
• text-decoration-line-through apply the same styles as <u> and <s>

Although not seen above, feel free to use HTML5's <b> and <i> tags. While <i> is usually used for voice, technical jargon, etc., <b> is intended to draw attention to specific words or phrases without adding any additional significance.

Text utilities #

The [text utilities] and [color utilities] allows to change the alignment, transformation, style, weight, line-height, decoration, and color of the text.

Abbreviations #

Implementation of the HTML's <abbr> element for acronyms and abbreviations that is styled to display the expanded version upon hover.

Abbreviations now feature a help pointer and a default underline to give users of assistive technologies and users of hover context more information.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

RESULT

Blockquotes #

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

RESULT

Naming a source #

According to the HTML specification, blockquote attribution must appear outside of the <blockquote> tag. Use a <figcaption> or a block level element (such as a <p>) with the .blockquote-footer class to provide attribution when using a block quote. Make careful to include the source work's name in the <cite> tag as well.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

RESULT

Alignment #

Use text utilities as needed to change the alignment of your blockquote.

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

RESULT

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

RESULT

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Lists #

Unstyled #

Remove the immediate children's only list's left margin and default list style. The class must also be added for any nested lists since this only applies to items in immediate children lists.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

RESULT

Inline #

Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

RESULT

Description list alignment #

Use the preset classes (or semantic mixins) of the grid system to align terms and descriptions horizontally. Add a .text-truncate class to the document to ellipsis the text for lengthier phrases.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

RESULT

Title headings #

Lorem..

        
    <div class="title-1 pb-3 mb-3 border-bottom">Title 1</div>
    <div class="title-2 pb-3 mb-3 border-bottom">Title 2</div>
    <div class="title-3 pb-3 mb-3 border-bottom">Title 3</div>
        
    

RESULT

Label headings #

Lorem..

        
    <div class="label-1 pb-3 mb-3 border-bottom">Label 1</div>
    <div class="label-2 pb-3 mb-3 border-bottom">Label 2</div>
    <div class="label-3 pb-3 mb-3 border-bottom">Label 3</div>
        
    

RESULT

Body headings #

Lorem..

        
    <div class="body-1 pb-3 mb-3 border-bottom">Body 1</div>
    <div class="body-2 pb-3 mb-3 border-bottom">Body 2</div>
    <div class="body-3 pb-3 mb-3 border-bottom">Body 3</div>
        
    

RESULT

Responsive font sizes #

With responsive font sizes set by default in UX4G 5, text may now scale more organically across devices and viewport widths. See the RFS page to learn more about how this functions.