lbResponsive

Typography

lbResponsive have a wide range of preformatted text formatting that will also adapt to the device screens by adjusting size when the viewport size changes. LbResponsive uses the font Roboto, but this is easy to replace in the theme.less file.

Basic headers

By default the heading h1 to h4 are formatted to match the preformatted look and feel of the system. Here are some examples.

Heading 1

Heading 2

Heading 3

Heading 4

I can modify this one directly using Surreal! Normal paragraph again. Alle the headlines and other text will be adjusted in size when rescaling the viewport. Try it by readjusting the browser window size. The columns of the page might also change as part of this.

 

dfkjdfksdjf.

 

This is the text inside the <pre> tag
Newlines will be displayed
without the need of the <br> tag.

Word formatting

In addition to the normal word formatting like italic, underline, and bold lbResponsive includes a few other word formattings.

The kbd tag kan be used to illustrate a key. Example ctrl + s to save.

There is a special class named tag that can be used in combination with a span element to illustrate a word as an HTML tag. This automatically adds the < and characters > to avoid messing up your html code. Example: h1

lbResponsive also supports the em tag which is styled like this and the strong tag which is styled like this.

text alignment

The text alignments can be used on all block elements. Note that the vertical alignments "cheat" slightly by changing display to table-cell with the consequences that provides.

text-left
text-center
text-right
text-top
text-middle
text-bottom

Typography and icons

It is also possible to include icons inside with headings. Add the icon and a padding modifier to get som space between icon and text.
Notice how the icon scales with the heading.

Heading 3 after an icon

Heading 4 before an icon

Icons can also be embedded as part of the text wherever you would like it to go. Again you can see that it scales perfectly together with the rest of the text.
Sometimes you want to make the icon blend in with the text like this . This is done by simply using the color-text class on the icon.

Buttons

The tag a and button elements can be used for buttons. If you use an a tag, make sure the button class is set.

a tag

input of type button, reset or submit will also be styled equally. In addition to all input with class button

You can use classnames to create different button colors like:


You can even use these classnames for the buttons:


It is however recommended to stick to normal and primary.

Button groups

You can group buttons by putting them inside a span with the class buttongroup. The roundness will be retained on the ends of the group and borders will be collapsed.

You can still combine with the colors on the buttons. The roundness will be retained on the ends of the group and borders will be collapsed.

Colors

If you need to reuse some of the theme colors it is recommended that you use the predefined classes.

The classes are defined in two series: color-[below code] for text color and backgroundcolor-[below code] for background color.


text

background

border

primary

contrast1

contrast2

success

warning

critical

info

Lists

Lists are formatted in various ways.

Unordered list ul with normal li:

Ordered list ol with normal li:

  1. This is a list item
  2. This is a list item with a very long text to verify how wrapping is performed
  3. This is a list item
  4. This is a list item

The ordered lists supports various numbering. This is defined by the type attribute on the ol tag.

  1. default
  1. type = 0 (zero)
  1. type = a
  1. type = au
  1. type = i
  1. type = iu

Lists can be nested and combined: