Media WebUI

Typography

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

Text Spacing For Readability

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

Class Description
text Increases the line-height to 1.7em. Removes hyperlink text decoration except where specific classes are used to override it.
text-readable Increases the line-height to 1.5em. Removes hyperlink text decoration except where specific classes are used to override it.
text-normal Restores the browser default line-height and hyperlink text-decoration.

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

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:

Classes Description
text-initial Font size is always set to the browser default.
text-xs Sets the font size to 0.75 times the browser font size or the inherited font size.
text-sm Sets the font size to 0.875 times the browser font size or the inherited font size.
text-md Sets the font size to 1.1 times the browser font size or the inherited font size.
text-lg Sets the font size to 1.25 times the browser font size or the inherited font size.
text-xl Sets the font size to 1.5 times the browser font size or the inherited font size.
text-mega Sets the font size to 2.5 times the browser font size or the 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>
HTML

Scalable Text Classes

The following classes are available for progressive text scaling.

Classes Size Range Breakpoint Range
text-scalable-xs 0.56rem - 0.75rem bp-1-over - bp-5-under
text-scalable-sm 0.66rem - 0.875rem bp-1-over - bp-5-under
text-scalable-md 0.75rem - 1.1rem bp-1-over - bp-5-under
text-scalable-lg 0.84rem - 1.25rem bp-1-over - bp-5-under
text-scalable-xl 0.94rem - 1.5rem bp-1-over - bp-5-under
text-scalable-mega 1.87rem - 2.5rem bp-1-over - bp-5-under
Scalable Text Size

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

Text Classes

Text Classes

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

Class group Class name Description
- text Increases the line-height to 1.7em. Removes hyperlink text decoration except where specific classes are used to override it.
- text-readable Increases the line-height to 1.5em. Removes hyperlink text decoration except where specific classes are used to override it.
- text-normal Restores the browser default line-height and hyperlink text-decoration.
- text-wrap Allows text to be wrapped within its containing element.
- text-nowrap Prevents text from being wrapped within its containg element.
- text-italic Styles text using italic font.
- text-light Styles text using lightest available font.
- text-lighter Styles text using lighter font.
- text-bolder Styles text using bolder font.
- text-bold Styles text using bold font.
- text-heavy Styles text using heaviest available font.
- text-upper Styles text using uppercase font.
- text-lower Styles text using lowercase font.
- text-capital Capitalises the first letter of each word in text.
- text-underline Adds an underline to text.
- text-line-through Adds a line through text.
text-overflow-* text-overflow-clip
text-overflow-ellipsis
Sets the overflow trunctaion style for text.
text-emphasis, text-emphasis-* text-emphasis
text-emphasis-open
text-emphasis-sesame
text-emphasis-open-sesame
Adds character emphasis symbols.
text-direction-* text-direction-ltr
text-direction-rtl
Changes the writing direction to either left-to-right or right-to-left.
text-horizontal-tb Sets the writing mode axis to horizontal.
text-vertical-* text-vertical-rtl
text-vertical-ltr
text-vertical-srl
text-vertical-slr
Sets the writing mode axis to vertical and writing direction to either left-to-right, right-to-left, sideways-left-to-right, or sideways-right-to-left.
text-upright, text-upright-* text-upright
text-upright-digits
Attempts to maintain a sequence of digits horizontally depending on the horizontal width available.
text-width-* text-width-50
text-width-75
text-width-100
Sets the number of characters per line of text to either 50, 75, or 100.
text-scalable-* text-scalable-xs
text-scalable-sm
text-scalable-md
text-scalable-lg
text-scalable-xl
text-scalable-mega
Sets the initial font size and causes it to scale between the smallest and largest breakpoints.

Internationalization

Text Direction

text-direction-ltr
Lorem ipsum dolor sit amet
text-direction-rtl
Lorem ipsum dolor sit amet
<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>
HTML

Text Orientation

text-vertical-ltr
Lorem ipsum dolor sit amet
text-vertical-rtl
Lorem ipsum dolor sit amet
text-vertical-slr
Lorem ipsum dolor sit amet
text-vertical-srl
Lorem ipsum dolor sit amet
<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>
HTML

Mixed Orientation

text-vertical-ltr, text-upright
民國105416
text-vertical-ltr, text-upright-digits
平成20年4月16日に
<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>
HTML

Lists

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.

  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
<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>
HTML

List Styling Classes

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

Classes Description
list Formats ordered and unordered lists without a list style or padding, and with a small left margin.
list-bullet Sets the list style type to disc.
list-bullet-square Sets the list style type to square.
list-alpha Sets the list style type to lower-alpha.
list-alpha-upper Sets the list style type to upper-alpha.
list-number Sets the list style type to decimal.

Customisation

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>
HTML