Always floating on top





lbResponsive

Introduction

lbresponsive is a simple collection of javascript libraries and snipplets providing responsiveness to a web application. The collection is styled and extended to provide an easy to use framework to build your own applications.

Font Awesome

This is the "new" way of adding icons to your web. Instead of using images that scales with various degree of success a font is used to generate vector icons that will scale beatifully in addition to being easy to style using basic CSS.

http://fontawesome.io/

Less

This is modified in our system.

this is i text.

Ender endre..sdf w

Less is used for applying the styling. A separate theme file with variables makes it super-easy to adjust the theme to your own fonts and colors. The lesshat.com mixins are used as well to further ease the styling cross browser.

http://lesscss.org/

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

Sample styles:

Heading 1

Heading 2

Heading 3

Heading 4

This is a normal paragraph with text-justify modifier applied. Nothing special about this. It support italic text, bold text and combination of bold and italic..
This a basic link using normal style locationblock.com .

The kbd tag is also styled like this: Keyboard input . As an alternative you can choose to use a span with class kbd to achieve the same.

a special class is used to display tag names use a span with class tag to achieve the effect. The css will add the greater than and smaller than arrows.

Other examples of markup is the strong and the em tag. They are styles to be equal to bold and italic.

Below is an example of the pre tag in action: 

This is preformatted text

That will display newlines.

Below is an example of the code tag in action:

This is a code block with a newline and some more newline

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.

Testing

Lorem ipsum dolor sit amsdlfkdøfgkdølfkd et...012

Article Title tjobing

August 20, 2

Klikk her for typography

Lorem ipsum dolor sit amet...012

Article Title

August 20, 2

Lorem ipsum dolor sit amet...012

Enda en nyhetle

August 20, 2

Lorem ipsum dolohdjhgd.r sit amet...012


text

background

border

primary

contrast1

contrast2

success

warning

critical

info

Forms

Forms are styled to work perfectly fine on both handheld devices and web desktop. Checkboxes and radio buttons are replaced with vector symbols. Important note: Checkboxes and radiobuttons must be inside a label tag to be able to click on the box itself.

Basic form example

Legend Example block-level help text here.

The textarea tag is by default styled to display approx 4 lines and add scrollbar when needed. This will give you control of the height.

The textarea can be extended with the class autogrow to automatically increase height based on the text you write. This will continue forever, so take that into concideration when using it.

Same but narrow

Legend Example block-level help text here.

some Radio buttons

Some Radio buttons inside span using classname vertical

select with option items:

select with option items and the multiple attribute set to multiple:

Tabs

Tabs are a combination of styling, markup and javascript.

View source to see how tabs code are defined. By default div with class tabset will be converted to tabs

tab 1

tab 2

tab 3 with a nested tab

tab 1

tab 2

tab 3

View source to see how tabs code are defined. By default div with class tabset will be converted to tabs

tab 1

tab 2

tab 3

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:

MediaQuery classes

Media queries æøå <html> Displayed only in XL width. The only-size classes can not be used in combination. Then you must use the not-size

Displayed only in L width

Displayed only in M width

Displayed only in S width

This one is NOT displayed in L and M mode.

This one is NOT displayed in XL and S mode.

This section is displayed on LANDSCAPE devices

This section is displayed on PORTRAIT devices