Headings and Paragraphs

The tags h1, h2, h3, and h4 are styled by default and will appear as follows.

Heading 1

Heading 2

Heading 3

Heading 4

In the following paragraph, the text-readable class is used to increase the line height for readability and the text-dropcap class to start with a large initial letter.

WebUI is a little different to most other CSS frameworks due to an emphasis on flexibility and creativity. Although most frameworks do attempt to provide flexibility, they often enforce a particular approach or style and come with too many limitations. WebUI has been build from the ground up with flexibility as the primary goal - even the components are made that way. WebUI is a system that allows you to invent new designs, and provides simple building blocks to construct much larger CSS components. Complex data entry forms can be created in a precise layout using the built-in grid system that doesn't throw any surprises. Add responsive behaviour exactly where you want it, with the flexibility to create fixed non-responsive layouts or layout sections.

The following paragraph uses the text class, which is also the class used for text throughout this website.

WebUI is a little different to most other CSS frameworks due to an emphasis on flexibility and creativity. Although most frameworks do attempt to provide flexibility, they often enforce a particular approach or style and come with too many limitations. WebUI has been build from the ground up with flexibility as the primary goal - even the components are made that way. WebUI is a system that allows you to invent new designs, and provides simple building blocks to construct much larger CSS components. Complex data entry forms can be created in a precise layout using the built-in grid system that doesn't throw any surprises. Add responsive behaviour exactly where you want it, with the flexibility to create fixed non-responsive layouts or layout sections.

Text Spacing For Readability

The following classes can be used to set the default line spacing and readability for specific text elements.

These classes are best used globally or at a page level, but can be used on individual elements also. They affect only a limited set of element types. Only p, pre, ul, ol, a, address, legend elements and elements with the control class are affected by the classes listed above.

NOTE: This limitation on element types is required because the CSS line-height property can have a significant impact on the alignment and spacing of various elements and layouts. This is also the reason WebUI does not provide line-height utility classes.

The default spacing applied to ul (unordered list) and ol (ordered list) elements can still be overidden using spacing utility classes such as the gap-vertical-* classes. For more information about spacing see the Vertical Spacing section.

Text Spacing

If one of the above text-* classes is applied to a parent element, then the line spacing for any child elements of the type listed above can't easily be overridden at an individual level unless the specificity is matched or !important is used. This is by design to help enforce consistency.

If you need a block of text within a section already having a line spacing text-* class to have a different line spacing, then an alternative element can be used such as a div or span.

Text Sizing

WebUI does not define any base font size, but depends on the browser default. The following classes can be used to set different sizes relative to the browser font size or inherited font size:

In order to increase or decrease the font size for the body, a container or a section for example, just add one of the above classes to it. Then, any classes used within that element will set the font size relative to that size. For example, if you use text-lg on a container and specify text-lg on any text within that container, then the text size would be equivalent to 25px based on a browser font size of 16px.

The class text-initial can be used to override any inherited size and set it to the current browser font size.

Scalable Text

WebUI also provides progressive font rendering. It works by gradually increasing or decreasing the text size between the smallest and largest breakpoints.

Large text that scales between the smallest and largest breakpoints.

<p class="text-scalable-lg">
  Large text that scales between the smallest and largest breakpoints.
</p>

Scalable Text Classes

The following classes are available for progressive text scaling.

Scalable Text Size

NOTE: Scalable text sizes are relative to the browser font size only and do not inherit their sizes.

Text Classes

Classes available for most text styling and behaviour are listed below.

Text Direction

<div class="row text-sm gap-sm">
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-direction-ltr</b></div>
    <div class="text-direction-ltr pad-sm height-md text-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-direction-rtl</b></div>
    <div class="text-direction-rtl pad-sm height-md text-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

Text Orientation

<div class="row text-sm gap-sm">
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-vertical-ltr</b></div>
    <div class="text-vertical-ltr pad-sm height-md-lg text-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-vertical-rtl</b></div>
    <div class="text-vertical-rtl pad-sm height-md-lg text-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-vertical-slr</b></div>
    <div class="text-vertical-slr pad-sm height-md-lg text-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-vertical-srl</b></div>
    <div class="text-vertical-srl pad-sm height-md-lg text-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

Mixed Orientation

<div class="row text-sm gap-sm">
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-vertical-ltr, text-upright</b></div>
    <div lang="zh-Hant" class="text-vertical-ltr pad-sm text-lg">
      民國<span class="text-upright">105</span>年<span class="text-upright">4</span>月<span class="text-upright">16</span>日
    </div>
  </div>
  <div class="col-bp-2-over border-xs">
    <div class="pad-sm"><b>text-vertical-ltr, text-upright-digits</b></div>
    <div lang="ja" class="text-vertical-ltr text-upright-digits pad-sm text-lg">
      平成20年4月16日に
    </div>
  </div>
</div>

List Example

The vertical spacing between list items can be changed using the gap-vertical-* classes. For more information about vertical spacing see the Vertical Spacing section.

<div class="row text-sm text-nowrap col-padding-lg">
  <div class="col">
    <ul class="list gap-vertical-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list list-number gap-vertical-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list list-alpha-upper gap-vertical-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list list-bullet-square gap-vertical-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

List Styling Classes

List style classes should be applied to the ul element. A full list of list styles is shown below.

Blockquotes

Blockquote heading

Blockquotes look great with a little formatting and colour using WebUI classes.

— Blockquote footer

<blockquote class="accent-2-dark border-accent-2 boundary-left-accent-2-light rounded-md">
  <p class="color-accent-2-light">Blockquote heading</p>
  <p>Blockquotes look great with a little formatting and colour using WebUI classes.</p>
  <p class="text-sm text-italic color-muted">— Blockquote footer</p>
</blockquote>