Uncategorised

Typography

OSP Real Homes was developed with extreme focus on typography and we believe it provides the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let's take a look.

Audio Text

3. Table Styles

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Optional table caption.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

<tableclass="table">
...
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

<tableclass="table table-striped">
...
</table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

<tableclass="table table-bordered">
...
</table>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

<tableclass="table table-hover">
...
</table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry the Bird

@twitter

<tableclass="table table-condensed">
...
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

Class

Description

.active

Applies the hover color to a particular row or cell

.success

Indicates a successful or positive action

.info

Indicates a neutral informative change or action

.warning

Indicates a warning that might need attention

.danger

Indicates a dangerous or potentially negative action

#

Column heading

Column heading

Column heading

1

Column content

Column content

Column content

2

Column content

Column content

Column content

3

Column content

Column content

Column content

4

Column content

Column content

Column content

5

Column content

Column content

Column content

6

Column content

Column content

Column content

7

Column content

Column content

Column content

8

Column content

Column content

Column content

9

Column content

Column content

Column content

<!-- On rows --><trclass="active">...</tr><trclass="success">...</tr><trclass="warning">...</tr><trclass="danger">...</tr><trclass="info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="active">...</td><tdclass="success">...</td><tdclass="warning">...</td><tdclass="danger">...</td><tdclass="info">...</td></tr>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in OSP Real Homes:

@-moz-documenturl-prefix(){fieldset{display:table-cell;}}

#

Table heading

Table heading

Table heading

Table heading

Table heading

Table heading

1

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

2

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

3

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

#

Table heading

Table heading

Table heading

Table heading

Table heading

Table heading

1

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

2

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

3

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

<divclass="table-responsive"><tableclass="table">
...
</table></div>

4. Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Integer molestie lorem at massa

Facilisis in pretium nisl aliquet

Nulla volutpat aliquam velit

Phasellus iaculis neque

Purus sodales ultricies

Vestibulum laoreet porttitor sem

Ac tristique libero volutpat at

Faucibus porta lacus fringilla vel

Aenean sit amet erat nunc

Eget porttitor lorem

<ul><li>...</li></ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Integer molestie lorem at massa

Facilisis in pretium nisl aliquet

Nulla volutpat aliquam velit

Faucibus porta lacus fringilla vel

Aenean sit amet erat nunc

Eget porttitor lorem

<ol><li>...</li></ol>

5. Buttons

Use any of the available button classes to quickly create a styled button.

<!-- Standard button --><buttontype="button"class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><buttontype="button"class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action --><buttontype="button"class="btn btn-success">Success</button><!-- Contextual button for informational alert messages --><buttontype="button"class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action --><buttontype="button"class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action --><buttontype="button"class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><buttontype="button"class="btn btn-link">Link</button>

6. Labels

Add any of the below mentioned modifier classes to change the appearance of a label.