Typography

This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

Primary and secondary styles

The primary1 and secondary2 colours are defined in the template theme settings, while the primary2, primary3 and secondary2, secondary3 colours are calculated using LESS to deliver shades slightly darker and slightly lighter than the original.. The code used to create the blocks below are as follows:

Rounded-big styling

Font Icon syntax

After installign the JB Type plugin, using the font icons is as simple as using the following syntax in your Joomla content.

[jb_icon-glass]Here is my font-iconified bit of text[/jb_icon-glass]

Please change the square brackets above to the curly brackets {

List of available font icons:

New icons available in JB Type v1.8+

This is the jb_icon-cloud-download style.This is the jb_icon-cloud-upload style.This is the jb_icon-lightbulb style.This is the jb_icon-exchange style.This is the jb_icon-bell-alt style.This is the jb_icon-file-alt style.This is the jb_icon-beer style.This is the jb_icon-coffee style.This is the jb_icon-food style.This is the jb_icon-fighter-jet style.This is the jb_icon-user-md style.This is the jb_icon-stethoscope style.This is the jb_icon-suitcase style.This is the jb_icon-building style.This is the jb_icon-hospital style.This is the jb_icon-ambulance style.This is the jb_icon-medkit style.This is the jb_icon-h-sign style.This is the jb_icon-plus-sign-alt style.This is the jb_icon-spinner style.This is the jb_icon-angle-left style.This is the jb_icon-angle-right style.This is the jb_icon-angle-up style.This is the jb_icon-angle-down style.This is the jb_icon-double-angle-left style.This is the jb_icon-double-angle-right style.This is the jb_icon-double-angle-up style.This is the jb_icon-double-angle-down style.This is the jb_icon-circle-blank style.This is the jb_icon-circle style.This is the jb_icon-desktop style.This is the jb_icon-laptop style.This is the jb_icon-tablet style.This is the jb_icon-mobile-phone style.This is the jb_icon-quote-left style.This is the jb_icon-quote-right style.This is the jb_icon-reply style.This is the jb_icon-github-alt style.This is the jb_icon-folder-close-alt style.This is the jb_icon-folder-open-alt style.

JB Type Layout Setting

Using some simple JB Type syntax it is now possible to replicate the span markup used in the Bootstrap css framework. Separating a block of your content is as simple as wrapping it in some curly brackets.

Example:

[grid6]This is a block of content that will take up half of the width of the page.[/grid6]

Last grid block

To make the last item in the row fit in the row we need to use the _last suffix to make the block float right and also remove it's margin.

Example

[grid6_last]This is a block of content that will take up half of the width of the page.[/grid6_last].

Please note that the above example uses square brackets as opposed to curly brackets to avoid the text rendering on the page.