Simple & semantic frontend

Boilerplate on Github

Typography

A basic paragraph might contain a number of different of HTML elements, including a (link), emphasized text, and strong text.

Typographical Blocks

Headline One

This is a filler paragraph – Ignore this. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis est, nec convallis dui. Nulla lectus velit, ornare sit amet blandit in, mattis eget nulla.

Headline Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis est, nec convallis dui. Nulla lectus velit, ornare sit amet blandit in, mattis eget null

Headline Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis est, nec convallis dui. Nulla lectus velit, ornare sit amet blandit in, mattis eget null

Headline Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis est, nec convallis dui. Nulla lectus velit, ornare sit amet blandit in, mattis eget null

This, on the otherhand, is a blockquote, meant for large quotes from other sources. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis est, nec convallis dui.

Lists

Unordered Lists

  • This is an unordered list – ipsum dolor sit amet, consectetur adipiscing elit fringilla libero id quam semper semper.
  • Bar is listed second – Cras fringilla libero id quam semper semper ipsum dolor sit amet, consectetur adipiscing elit fringilla libero id quam semper semper.

Ordered Lists

  1. Wake up in the morning
  2. Freshen up and go downstairs
  3. Have a bowl of cereal
  4. Go to the bus stop

Definition Lists

iPod
The iPod is a line of portable media players designed and marketed by Apple Inc.
VCR
The VCR is an electro-mechanical device that records analog audio and analog video from broadcast television on a removable tape.
Walkman
Walkman is a Sony brand tradename originally used for portable audio cassette players.

Tables

This table has a caption, colgroup, thead, tfoot, and tbody.

Table with caption, colgroup, thead, tfoot, and tbody
header 1 header 2 header 3
footer 1 footer 2 footer 3
body 1 body 2 body 3
body 1 body 2 body 3
body 1 body 2 body 3
body 1 body 2 body 3

Forms

Messaging

The following are paragraph element using the various messaging styles defined in handbook.

Success – Message with a link.

Info – Message with a link.

Error – Message with a link.

  • Item one: message regarding item one
  • Item two: message regarding item two
  • Item three: message regarding item three

Fields

Text Inputs

Through out the fields, you will also see div.help and span.help elements. These are used for help text relevant to fields.

only numbers and letters

Radios and Checkboxes

Selects

Textarea

Buttons

Iconography

Visit Imarc on Facebook

A light pseudo icon example (font-weight: 300)
A regular pseudo icon example (font-weight: 400)
A solid pseudo icon example (font-weight: 900)