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.

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



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

Keep up to date.

something

Dolor ipsum lipsum scolar tolor what locusts behaving madly.

Like to know more?

Interested in our products? Something you are looking for that you don't see on this site?


Need to talk to us

Phone: (03) 9486 8555
Fax: (03) 9486 8021
Email: info@theignite.com.au

Get in contact

Back to top