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.

Basic

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 

This is a heading with the class headline.

And a p tag with a class subheading.

A simple <blockquote> style.

 

A simple paragraph.

With some italic text, some bold text and an underline. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Code / Pre Tags

<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Notices and warnings

×

Warning!

Best check yo self, you're not...

Error!

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Success!

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Information

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Unordered, ordered and nested lists

• Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
• Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus:
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
    3. Vestibulum auctor dapibus neque.
  • Vestibulum auctor dapibus neque.
• Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
• Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

 

A list with the class "simple"

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus:
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus.
• Vestibulum auctor dapibus neque.

Images

An image with a border class.

Images will also scale to the width of the content when the browser is resized.

Buttons

I am a button

I am a success button

I am a primary button

I am a warning button

I am an info button

I am a danger button

Other markup code

hyperlink
abbreviation
offset text typically styled in bold
cited title of a work
deleted text
defining instance
emphatic stress
offset text typically styled in italic
inserted text
user input
marked (highlighted) text
sample output
small print
strong importance
^superscript _subscript
variable or placeholder text

Colours and Blocks

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:

Blocks of colour

These blocks are generated based on the markup below.

<div class="primary1">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Primary1

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary1

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Borders

These blocks are generated based on the markup below.

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Primary1 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary1 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Rounded

The following items have a class " rounded" added to them to create the subtle rounded edge.

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Primary1 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary1 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

 

Other styles and effects

The following classes can be applied to modules and html markup.

Shadow

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Shadow2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Border

Aliquam condimentum volutpat odio lacinia vehicula.

Numbers

Am assortment of css3 styling that is suited to displaying numbers.

Anvil styling

To replicate the style below please use the following html markup.

<div class="anvil primary1">1</div>

 

1

2

3

4

5

6

Rounded-big styling

To replicate the style below please use the following html markup.

<div class="rounded-big primary1">1</div>

 

1

2

3

4

5

6

 

Font Icons

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_icon-glass

jb_icon-folder-open

jb_icon-download

jb_icon-music

jb_icon-resize-vertical

jb_icon-upload

jb_icon-search:

jb_icon-resize-horizontal

jb_icon-inbox

jb_icon-envelope

jb_icon-bar-chart

jb_icon-play-circle

jb_icon-heart

jb_icon-twitter-sign

jb_icon-repeat

jb_icon-star

jb_icon-facebook-sign

jb_icon-refresh

jb_icon-star-empty

jb_icon-camera-retro

jb_icon-list-alt

jb_icon-user

jb_icon-key

jb_icon-lock

jb_icon-film

jb_icon-cogs

jb_icon-flag

jb_icon-th-large

jb_icon-comments

jb_icon-headphones

jb_icon-th

jb_icon-thumbs-up

jb_icon-volume-off

jb_icon-th-list

jb_icon-thumbs-down

jb_icon-volume-down

jb_icon-ok

jb_icon-star-half

jb_icon-volume-up

jb_icon-remove

jb_icon-heart-empty

jb_icon-qrcode

jb_icon-zoom-in

jb_icon-signout

jb_icon-barcode

jb_icon-zoom-out

jb_icon-linkedin-sign

jb_icon-tag

jb_icon-off

jb_icon-pushpin

jb_icon-tags

jb_icon-signal

jb_icon-external-link

jb_icon-book

jb_icon-cog

jb_icon-signin

jb_icon-bookmark

jb_icon-trash

jb_icon-trophy

jb_icon-print

jb_icon-home

jb_icon-github-sign

jb_icon-camera

jb_icon-file

jb_icon-upload-alt

jb_icon-font

jb_icon-time

jb_icon-lemon

jb_icon-bold

jb_icon-road

jb_icon-phone

jb_icon-italic

jb_icon-download-alt

jb_icon-check-empty

jb_icon-text-height

jb_icon-download

jb_icon-bookmark-empty

jb_icon-text-width

jb_icon-upload

jb_icon-phone-sign

jb_icon-align-left

jb_icon-inbox

jb_icon-twitter

jb_icon-align-center

jb_icon-play-circle

jb_icon-facebook

jb_icon-align-right

jb_icon-repeat

jb_icon-github

jb_icon-align-justify

jb_icon-refresh

jb_icon-unlock

jb_icon-list

jb_icon-list-alt

jb_icon-credit-card

jb_icon-indent-left

jb_icon-lock

jb_icon-rss

jb_icon-indent-right

jb_icon-flag

jb_icon-hdd

jb_icon-facetime-video

jb_icon-headphones

jb_icon-bullhorn

jb_icon-picture

jb_icon-volume-off

jb_icon-bell

jb_icon-pencil

jb_icon-volume-down

jb_icon-certificate

jb_icon-map-marker

jb_icon-volume-up

jb_icon-hand-right

jb_icon-adjust

jb_icon-qrcode

jb_icon-hand-left

jb_icon-tint

jb_icon-barcode

jb_icon-hand-down

jb_icon-edit

jb_icon-tag

jb_icon-circle-arrow-left

jb_icon-share

jb_icon-tags

jb_icon-circle-arrow-right

jb_icon-check

jb_icon-book

jb_icon-circle-arrow-up

jb_icon-move

jb_icon-bookmark

jb_icon-circle-arrow-down

jb_icon-step-backward

jb_icon-print

jb_icon-globe

jb_icon-fast-backward

jb_icon-camera

jb_icon-wrench

jb_icon-backward

jb_icon-font

jb_icon-tasks

jb_icon-play

jb_icon-bold

jb_icon-filter

jb_icon-pause

jb_icon-italic

jb_icon-briefcase

jb_icon-stop

jb_icon-text-height

jb_icon-fullscreen

jb_icon-forward

jb_icon-text-width

jb_icon-group

jb_icon-fast-forward

jb_icon-align-left

jb_icon-link

jb_icon-step-forward

jb_icon-align-center

jb_icon-cloud

jb_icon-eject

jb_icon-align-right

jb_icon-beaker

jb_icon-chevron-left

jb_icon-align-justify

jb_icon-cut

jb_icon-chevron-right

jb_icon-list

jb_icon-copy

jb_icon-plus-sign

jb_icon-indent-left

jb_icon-paper-clip

jb_icon-minus-sign

jb_icon-indent-right

jb_icon-save

jb_icon-remove-sign

jb_icon-facetime-video

jb_icon-sign-blank

jb_icon-ok-sign

jb_icon-picture

jb_icon-reorder

jb_icon-question-sign

jb_icon-pencil

jb_icon-list-ul

jb_icon-info-sign

jb_icon-map-marker

jb_icon-list-ol

jb_icon-screenshot

jb_icon-adjust

jb_icon-strikethrough

jb_icon-remove-circle

jb_icon-tint

jb_icon-underline

jb_icon-ok-circle

jb_icon-edit

jb_icon-table

jb_icon-ban-circle

jb_icon-share

jb_icon-magic

jb_icon-arrow-left

jb_icon-check

jb_icon-truck

jb_icon-arrow-right

jb_icon-move

jb_icon-pinterest

jb_icon-arrow-up

jb_icon-step-backward

jb_icon-pinterest-sign

jb_icon-arrow-down

jb_icon-fast-backward

jb_icon-google-plus-sign

jb_icon-share-alt

jb_icon-backward

jb_icon-google-plus

jb_icon-resize-full

jb_icon-play

jb_icon-money

jb_icon-resize-small

jb_icon-pause

jb_icon-caret-down

jb_icon-plus

jb_icon-stop

jb_icon-caret-up

jb_icon-minus

jb_icon-forward

jb_icon-caret-left

jb_icon-asterisk

jb_icon-fast-forward

jb_icon-caret-right

jb_icon-exclamation-sign

jb_icon-step-forward

jb_icon-columns

jb_icon-gift

jb_icon-eject

jb_icon-sort

jb_icon-leaf

jb_icon-chevron-left

jb_icon-sort-down

jb_icon-fire

jb_icon-chevron-right

jb_icon-sort-up

jb_icon-eye-open

jb_icon-plus-sign

jb_icon-envelope-alt

jb_icon-eye-close

jb_icon-minus-sign

jb_icon-linkedin

jb_icon-warning-sign

jb_icon-remove-sign

jb_icon-undo

jb_icon-plane

jb_icon-ok-sign

jb_icon-legal

jb_icon-calendar

jb_icon-question-sign

jb_icon-dashboard

jb_icon-random

jb_icon-info-sign

jb_icon-comment-alt

jb_icon-comment

jb_icon-screenshot

jb_icon-comments-alt

jb_icon-magnet

jb_icon-remove-circle

jb_icon-bolt

jb_icon-chevron-up

jb_icon-ok-circle

jb_icon-sitemap

jb_icon-chevron-down

jb_icon-ban-circle

jb_icon-umbrella

jb_icon-retweet

jb_icon-arrow-left

jb_icon-paste

jb_icon-shopping-cart

jb_icon-arrow-right

jb_icon-user-md

jb_icon-folder-close

jb_icon-arrow-up

jb_icon-glass

jb_icon-folder-open

jb_icon-arrow-down

jb_icon-music

jb_icon-resize-vertical

jb_icon-share-alt

jb_icon-search

jb_icon-resize-horizontal

jb_icon-resize-full

jb_icon-envelope

jb_icon-hdd

jb_icon-resize-small

jb_icon-heart

jb_icon-bullhorn

jb_icon-plus

jb_icon-star

jb_icon-bell

jb_icon-minus

jb_icon-star-empty

jb_icon-certificate

jb_icon-asterisk

jb_icon-user

jb_icon-thumbs-up

jb_icon-exclamation-sign

jb_icon-film

jb_icon-thumbs-down

jb_icon-gift

jb_icon-th-large

jb_icon-hand-right

jb_icon-leaf

jb_icon-th

jb_icon-hand-left

jb_icon-fire

jb_icon-th-list

jb_icon-hand-up

jb_icon-eye-open

jb_icon-ok

jb_icon-hand-down

jb_icon-eye-close

jb_icon-remove

jb_icon-circle-arrow-right

jb_icon-warning-sign

jb_icon-zoom-in

jb_icon-circle-arrow-left

jb_icon-plane

jb_icon-zoom-out

jb_icon-circle-arrow-up

jb_icon-calendar

jb_icon-off

jb_icon-circle-arrow-down

jb_icon-random

jb_icon-signal

jb_icon-globe

jb_icon-comment

jb_icon-cog

jb_icon-wrench

jb_icon-magnet

jb_icon-trash

jb_icon-tasks

jb_icon-chevron-up

jb_icon-home

jb_icon-filter

jb_icon-chevron-down

jb_icon-file

jb_icon-briefcase

jb_icon-retweet

jb_icon-time

jb_icon-fullscreen

jb_icon-shopping-cart

jb_icon-road

jb_icon-folder-close

jb_icon-download-alt

Layout Settings

 

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.

 

List of available grids:

• grid1
• grid2
• grid3
• grid4
• grid5
• grid6
• grid7
• grid8
• grid9
• grid10
• grid11
• grid12.

Here are examples:

grid12

grid6

grid6_last

grid4

grid4

grid4_last

grid3

grid3

grid3

grid3_last

grid2

grid2

grid2

grid2

grid2

grid2_last

grid10

grid2_last