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:
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- 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 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>123456Rounded-big styling
To replicate the style below please use the following html markup.
<div class="rounded-big primary1">1</div>123456 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-glassjb_icon-folder-openjb_icon-downloadjb_icon-musicjb_icon-resize-verticaljb_icon-uploadjb_icon-search:jb_icon-resize-horizontaljb_icon-inboxjb_icon-envelopejb_icon-play-circlejb_icon-heartjb_icon-twitter-signjb_icon-repeatjb_icon-starjb_icon-facebook-signjb_icon-refreshjb_icon-star-emptyjb_icon-camera-retrojb_icon-list-altjb_icon-userjb_icon-keyjb_icon-lockjb_icon-filmjb_icon-cogsjb_icon-flagjb_icon-th-largejb_icon-commentsjb_icon-headphonesjb_icon-thjb_icon-thumbs-upjb_icon-volume-offjb_icon-th-listjb_icon-thumbs-downjb_icon-volume-downjb_icon-okjb_icon-star-halfjb_icon-volume-upjb_icon-removejb_icon-heart-emptyjb_icon-qrcodejb_icon-zoom-injb_icon-signoutjb_icon-zoom-outjb_icon-linkedin-signjb_icon-tagjb_icon-offjb_icon-pushpinjb_icon-signaljb_icon-external-linkjb_icon-bookjb_icon-cogjb_icon-signinjb_icon-bookmarkjb_icon-trashjb_icon-trophyjb_icon-printjb_icon-homejb_icon-github-signjb_icon-camerajb_icon-filejb_icon-upload-altjb_icon-fontjb_icon-timejb_icon-lemonjb_icon-boldjb_icon-roadjb_icon-phonejb_icon-italicjb_icon-download-altjb_icon-check-emptyjb_icon-text-heightjb_icon-downloadjb_icon-bookmark-emptyjb_icon-text-widthjb_icon-uploadjb_icon-phone-signjb_icon-align-leftjb_icon-inboxjb_icon-twitterjb_icon-align-centerjb_icon-play-circlejb_icon-facebookjb_icon-align-rightjb_icon-repeatjb_icon-githubjb_icon-align-justifyjb_icon-refreshjb_icon-unlockjb_icon-listjb_icon-list-altjb_icon-credit-cardjb_icon-indent-leftjb_icon-lockjb_icon-rssjb_icon-indent-rightjb_icon-flagjb_icon-hddjb_icon-facetime-videojb_icon-headphonesjb_icon-bullhornjb_icon-picturejb_icon-volume-offjb_icon-belljb_icon-penciljb_icon-volume-downjb_icon-certificatejb_icon-map-markerjb_icon-volume-upjb_icon-hand-rightjb_icon-adjustjb_icon-qrcodejb_icon-hand-leftjb_icon-tintjb_icon-hand-downjb_icon-editjb_icon-tagjb_icon-circle-arrow-leftjb_icon-sharejb_icon-circle-arrow-rightjb_icon-checkjb_icon-bookjb_icon-circle-arrow-upjb_icon-movejb_icon-bookmarkjb_icon-circle-arrow-downjb_icon-step-backwardjb_icon-printjb_icon-globejb_icon-fast-backwardjb_icon-camerajb_icon-wrenchjb_icon-backwardjb_icon-fontjb_icon-tasksjb_icon-playjb_icon-boldjb_icon-filterjb_icon-pausejb_icon-italicjb_icon-briefcasejb_icon-stopjb_icon-text-heightjb_icon-fullscreenjb_icon-forwardjb_icon-text-widthjb_icon-groupjb_icon-fast-forwardjb_icon-align-leftjb_icon-linkjb_icon-step-forwardjb_icon-align-centerjb_icon-cloudjb_icon-ejectjb_icon-align-rightjb_icon-beakerjb_icon-chevron-leftjb_icon-align-justifyjb_icon-cutjb_icon-chevron-rightjb_icon-listjb_icon-copyjb_icon-plus-signjb_icon-indent-leftjb_icon-paper-clipjb_icon-minus-signjb_icon-indent-rightjb_icon-savejb_icon-remove-signjb_icon-facetime-videojb_icon-sign-blankjb_icon-ok-signjb_icon-picturejb_icon-reorderjb_icon-question-signjb_icon-penciljb_icon-list-uljb_icon-info-signjb_icon-map-markerjb_icon-list-oljb_icon-screenshotjb_icon-adjustjb_icon-strikethroughjb_icon-remove-circlejb_icon-tintjb_icon-underlinejb_icon-ok-circlejb_icon-editjb_icon-tablejb_icon-ban-circlejb_icon-sharejb_icon-magicjb_icon-arrow-leftjb_icon-checkjb_icon-truckjb_icon-arrow-rightjb_icon-movejb_icon-pinterestjb_icon-arrow-upjb_icon-step-backwardjb_icon-pinterest-signjb_icon-arrow-downjb_icon-fast-backwardjb_icon-google-plus-signjb_icon-backwardjb_icon-google-plusjb_icon-resize-fulljb_icon-playjb_icon-moneyjb_icon-resize-smalljb_icon-pausejb_icon-caret-downjb_icon-plusjb_icon-stopjb_icon-caret-upjb_icon-minusjb_icon-forwardjb_icon-caret-leftjb_icon-asteriskjb_icon-fast-forwardjb_icon-caret-rightjb_icon-exclamation-signjb_icon-step-forwardjb_icon-columnsjb_icon-giftjb_icon-ejectjb_icon-sortjb_icon-leafjb_icon-chevron-leftjb_icon-sort-downjb_icon-firejb_icon-chevron-rightjb_icon-sort-upjb_icon-eye-openjb_icon-plus-signjb_icon-envelope-altjb_icon-eye-closejb_icon-minus-signjb_icon-linkedinjb_icon-warning-signjb_icon-remove-signjb_icon-undojb_icon-planejb_icon-ok-signjb_icon-legaljb_icon-calendarjb_icon-question-signjb_icon-dashboardjb_icon-randomjb_icon-info-signjb_icon-comment-altjb_icon-commentjb_icon-screenshotjb_icon-comments-altjb_icon-magnetjb_icon-remove-circlejb_icon-boltjb_icon-chevron-upjb_icon-ok-circlejb_icon-sitemapjb_icon-chevron-downjb_icon-ban-circlejb_icon-umbrellajb_icon-retweetjb_icon-arrow-leftjb_icon-pastejb_icon-shopping-cartjb_icon-arrow-rightjb_icon-user-mdjb_icon-folder-closejb_icon-arrow-upjb_icon-glassjb_icon-folder-openjb_icon-arrow-downjb_icon-musicjb_icon-resize-verticaljb_icon-searchjb_icon-resize-horizontaljb_icon-resize-fulljb_icon-envelopejb_icon-hddjb_icon-resize-smalljb_icon-heartjb_icon-bullhornjb_icon-plusjb_icon-starjb_icon-belljb_icon-minusjb_icon-star-emptyjb_icon-certificatejb_icon-asteriskjb_icon-userjb_icon-thumbs-upjb_icon-exclamation-signjb_icon-filmjb_icon-thumbs-downjb_icon-giftjb_icon-th-largejb_icon-hand-rightjb_icon-leafjb_icon-thjb_icon-hand-leftjb_icon-firejb_icon-th-listjb_icon-hand-upjb_icon-eye-openjb_icon-okjb_icon-hand-downjb_icon-eye-closejb_icon-removejb_icon-circle-arrow-rightjb_icon-warning-signjb_icon-zoom-injb_icon-circle-arrow-leftjb_icon-planejb_icon-zoom-outjb_icon-circle-arrow-upjb_icon-calendarjb_icon-offjb_icon-circle-arrow-downjb_icon-randomjb_icon-signaljb_icon-globejb_icon-commentjb_icon-cogjb_icon-wrenchjb_icon-magnetjb_icon-trashjb_icon-tasksjb_icon-chevron-upjb_icon-homejb_icon-filterjb_icon-chevron-downjb_icon-filejb_icon-briefcasejb_icon-retweetjb_icon-timejb_icon-fullscreenjb_icon-shopping-cartjb_icon-roadjb_icon-folder-closejb_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:
grid12grid6grid6_lastgrid4grid4grid4_lastgrid3grid3grid3grid3_lastgrid2grid2grid2grid2grid2grid2_lastgrid10grid2_last
