Date
September 01 2014
Written By
kus beham
Demo Event
Written by kus beham - September 01 2014
Rock Hammer’s baseline typography defaults including headings, block and text-level text elements and all types of lists.
Headings
First-level headings are marked up using ‹h1› tags.
Typeface:
Heading level one
The heading above is a first-level, heading one that may be used for page titles as well as titles in sectioning elements including ‹body›, ‹section› and ‹article›.
Second-level headings are marked up using ‹h2› tags.
Typeface:
Heading level two
The heading above is a second-level, heading two. You may use more than one to create a document, section or article outline.
Third-level headings are marked up using ‹h3› tags.
Typeface:
Heading level three
The heading above is a third-level, heading three. You may use more than one to create a document, section or article outline.
Fourth, fifth and sixth level headings are marked up using ‹h4› ‹h5› ‹h6› tags.
Typeface:
Heading 4
Heading 5
Heading 6
The headings above are a fourth, fifth and sixth level, headings four, five and six. Use to create a document, section or article outline.
Paragraphs
Unclassified paragraph
Lead paragraph
An additional lead class alters a paragraph’s presentation.
Secondary paragraph
An additional secondary class alters a paragraph’s presentation.
Tertiary paragraph
An additional tertiary class alters a paragraph’s presentation.
Quotations
Block quotes are marked up using ‹blockquote› tags. You may use an optional ‹cite› element to cite an attribution.
An additional pull-right class alters a block quote’s presentation.
Lists
There are several types of HTML list. List items are marked up using ‹li›.
- None
- Disc
- Circle
- Square
- Decimal
- Decimal leading zero
- Upper roman
- Lower greek
- Lower alpha
- Upper alpha
- Armenian
- Georgian
Unordered list
Unordered lists are marked up using ‹ul› tags. An unordered list describes a collection of items.
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
Nested unordered list
- Unordered list item
-
- Nested unordered list item
- Nested unordered list item
- Nested unordered list item
- Unordered list item
An additional inline class alters a list’s presentation.
- Inline list item
- Inline list item
- Inline list item
Ordered list
Ordered lists are marked up using ‹ol› tags. An ordered list may have various numbering schemes presented through CSS.
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
Nested ordered list
- Ordered list item
-
- Nested ordered list item
- Nested ordered list item
- Nested ordered list item
- Ordered list item
Definition list
A definition list ‹dl› consists of pairs of definition terms ‹dt› and definition descriptions ‹dd›.
Horizontal definition list
An additional dl-horizontal class alters a definition list’s presentation.
Text level elements
Text level HTML elements may be used within other elements. They include: em and strong for semantic emphasis, i and b for presentational formatting, abbr abbreviations, cite citations, code example, del, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages and sup superscript and sub subscript.
Note: img-rounded and img-circle are unsupported by IE7-8.
Figures and figcaptions
Commonly used navigation patterns including tabs and pills, breadcrumbs and pagination.
Basic navbar
Basic navbar is marked up using ‹ul› tags with an additional navbar and navbar--inner classes.
Tabs
Tabbed navigation
All navigation units are marked up using ‹ul› tags with an additional nav nav-tabs classes.
Navigation tabbed below
An additional tabs-below class alters the presentation.
Navigation tabbed left
An additional tabs-left class alters the presentation.
Navigation tabbed right
An additional tabs-right class alters the presentation.
Breadcrumbs
Breadcrumbs are marked up using ‹ul› tags with an additional breadcrumb class.
Responsive Breadcrumbs
Responsive breadcrumbs are marked up using containing ‹div› tags with a crumbs-container class and ‹ul› child tags with an additional crumbs class.
Pill shaped navigation
Pills are marked up using ‹ul› tags with additional nav and nav-pills classes.
List navigation
Lists are marked up using ‹ul› tags with additional nav and nav-list classes. nav-header class also alters the presentation of list items.
Stacked tabbed navigation
Stacked tabs are marked up using ‹ul› tags with additional nav, nav-tabs and nav-stacked classes.
Stacked pill shaped navigation
Stacked pills are marked up using ‹ul› tags with additional nav, nav-pills and nav-stacked classes.
Pagination
All pagination units are marked up using ‹ul› tags with an additional pagination class.
Centered pagination
An additional pagination-centered class alters the presentation.
Right aligned pagination
An additional pagination-right class alters the presentation.
Pagination sizes
Additional pagination-large, pagination-small and pagination-mini classes alters the presentation.
Pager
Pager units are marked up using ‹ul› tags with an additional pager class.
Hero unit
Hero units are marked up using ‹div› tags with an additional hero-unit class.
Media
All media units are marked up using ‹div› tags with additional media-unit, media-body and media-heading classes. Optional pull-left and pull-right classes float anchored images.
Alerts
All alert units are marked up using ‹div› tags with an additional alert class.
Additional alert--error, alert--info and alert--success classes alters their presentation.
Wells
All well units are marked up using ‹div› tags with an additional well class.
An additional well--large class alters the presentation.
An additional well--small class alters the presentation.
Standard form
Search form
An additional form-search class alters the presentation.
Inline form
An additional form-inline class alters the presentation.
Horizontal form
An additional form-horizontal class alters the presentation.
Form elements
Buttons
Buttons are marked up using either ‹button›, ‹input› or ‹a› tags with an additional btn class. Additional classes alter their presentation.
Standard button
An additional btn class creates a standard button.
Primary button
An additional btn-primary class alters the presentation.
Info button
An additional btn-info class alters the presentation.
Success button
An additional btn-success class alters the presentation.
Warning button
An additional btn-warning class alters the presentation.
Inverted button
An additional btn-inverse class alters the presentation.
Button sizes
Additional btn-mini, btn-small, btn-large and btn-extlarge classes alters the presentation.
Unclassified table
Tabular data is marked up using ‹table› tags with an additional table class.
| Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Condensed table
An additional table-condensed class alters the presentation.
| Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Striped table
An additional table-striped class alters the presentation.
| Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Bordered table
An additional table-bordered class alters the presentation.
| Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Bordered and striped table
Additional table-condensed, table-bordered and table-striped classes may be combined.
| Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Responsive table
Make a table responsive by adding a rwd-table class to it. essential, and optional classese may be added to the th elements to denote them always being visible, and what can be displayed optionally depending on screen width. This requires JavaScript to function properly.
Additional table-condensed, table-bordered and table-striped classes may be combined, as before.
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
|---|---|---|---|---|---|
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
Commonly used dynamic content modules including a vertical collapsing accordion and horizontal scrolling carousel.
Accordion
Accordion's require bootstrap-collapse.js to be included in your project. Add the attribute data-toggle="collapse" to an anchor tag you wish to use as an accordion header item, with the child item (the thing that is shown/hidden, denoted by the href value of the anchor) having a collapse class applied. An optional in class can be added for an item that should be expanded by default.
Carousel
Carousel's require bootstrap-carousel.js to be included in your project. Add a carousel class to the containing element for your carousel.
Modal
Modals require bootstrap-modal.js to be included in your project. Ensure that the href attribute of any trigger links refernce the element denoted to be the modal and its contents. These trigger links also need data-toggle="modal" adding as an attribute. Modal containers need class="modal hide fade". See the code driving the links opposite for more information and a working example.
Tooltips
Tooltip's require bootstrap-tooltip.js to be included in your project. Add data-toggle="tooltip" and data-placement="top" attributes to an item you'd like to be a tooltip. "top" can be one of top, left, bottom, or right, do denote which position the tooltip should appear.
Popover
Popovers's require bootstrap-tooltip.js and bootstrap-popover.js to be included in your project. Add data-toggle="popover" and data-placement="top" attributes to an item you'd like to be a popover. "top" can be one of top, left, bottom, or right, do denote which position the popover should appear.
Comments
0 Comments