Typography

Typography

Contacts

100060, Tashkent city, Amir Temur street 20

+998 71 233 34 24

+998 71 233 52 24

Friday, 11 January 2013 14:03
Written by:
Tomasz Dziuda

GavernWP allows to access a lot of additional typography elements created with Shortcodes use. The use is very simple thanks to an additional button in a posts editor.Below, there are all elements available in theme’s typography. Typography elements can be divided into three main groups:

typography elements,
interactive elements,
elements prepared especially for a particular theme.

Warnings / Infos / Notices / Errors

These elements are used for highlighting text fragments together with their importance / type of information by using appropriate colors.

Warning or error text example using Shortcodes. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Info text example using Shortcodes. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Notice text example using Shortcodes. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Labels

Labels are useful for marking the importance of the text fragment or a word given. In the case of longer texts, we recommend to use elements from Warnings / Infos / Notices group.

This is a paragraph with the labeled text using the first style.

This is a paragraph with the labeled text using the second style.

This is a paragraph with the labeled text using the third style.

This is a paragraph with the labeled text using the fourth style.

This is a paragraph with the labeled text using the fifth style.

This is a paragraph with the labeled text using the sixth style.

Badges

Badges in their look are similar to Labels, however, you may use them mainly for highlighting shorter texts, e.g. numerical values.

This is a paragraph with the badge 12 using the first style.

This is a paragraph with the badge 12 using the second style.

This is a paragraph with the badge 12 using the third style.

This is a paragraph with the badge 12 using the fourth style.

This is a paragraph with the badge 12 using the fifth style.

This is a paragraph with the badge 12 using the sixth style.

Code listings

We recommend to use an element creating code listings in one out of three styles available for presenting source codes:

function helloWorld() {
alert('Hello World!');
}

function helloWorld() {
alert('Hello World!');
}

function helloWorld() {
alert('Hello World!');
}

Text blocks

Text blocks are useful for generating an element highlighting a particular part of an entry:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lorem ipsum dolor sit amet

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Quote and Citations

Quotes elements are useful for highlighting the author of a sentence given:

Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author

Lists

Ordered and unordered lists:

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

item1
item2
item3

Buttons

Buttons in many different variations:

The same buttons as links:

Your text Your text Your text Your text Your text Your text Your text

Legends

Elements with legend useful while creating text blocks in a frame provided with an appropriate title.

Legend style 1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis.

Legend style 2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis.

Legend style 3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis.

Legend style 4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis.

Raw text

An element useful for generating text without formatting:

Your text

Tooltips

Tooltips may occur in two forms: a link to a different website with a tooltip or a text connected with the text:

Default styleText of the tooltip
Style IIText of the tooltip
Style IIIText of the tooltip
Style IVText of the tooltip
Style VText of the tooltip

Other typography elements

Elements which could not be groupped to other categories.

Columns allow to place text in multicolumn layout:

Content for the first column

Content for the second column

Content for the third column

You can also adjust the columns width using the width attribute:

Content for the first column

Content for the second column

Content for the third column

Toggle text – elements useful for creating blocks with text to toggle:

Header text

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.

Header text

Shortcode pageurl allows to place an address to a blog:

http://demo.gavick.com/wordpress/news

A link to a RSS channel:

Link text

A link to a PDF document:

Text of the link

A private note in an entry, visible for an author only:

Mail illegible for bots creating data bases for spammers:

email.to@obfuscate.com

Content visible for logged in users only:

Members onlyContent for the members only

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

Copy

<table class="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

Copy

<table class="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

Copy

<table class="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

Copy

<table class="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

Copy

<table class="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

Copy

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

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

Conveying meaning to assistive technologies

Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.

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 overridden without a Firefox-specific hack that we don’t provide in Bootstrap:

Copy

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

For more information, read this Stack Overflow answer.

#	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

Copy

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

16.11.2016, 15:21 5110 Print version

Social networks:

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

View

Font size

Zoom 0%

Typography

Warnings / Infos / Notices / Errors

Labels

Badges

Code listings

Text blocks

Quote and Citations

Lists

Buttons

Legends

Raw text

Tooltips

Other typography elements

Header text

Header text

Tables

Basic example

Striped rows

Cross-browser compatibility

Bordered table

Hover rows

Condensed table

Contextual classes

Conveying meaning to assistive technologies

Responsive tables

Vertical clipping/truncation

Firefox and fieldsets