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.

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+

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

 

{grid4} {jb_icon-glass}jb_icon-glass{/jb_icon-glass} {/grid4} {grid4} {jb_icon-folder-open}jb_icon-folder-open{/jb_icon-folder-open} {/grid4} {grid4_last} {jb_icon-download}jb_icon-download{/jb_icon-download} {/grid4_last} {grid4} {jb_icon-music}jb_icon-music{/jb_icon-music} {/grid4} {grid4} {jb_icon-resize-vertical}jb_icon-resize-vertical{/jb_icon-resize-vertical} {/grid4} {grid4_last} {jb_icon-upload}jb_icon-upload{/jb_icon-upload} {/grid4_last} {grid4} {jb_icon-search:}jb_icon-search:{/jb_icon-search:} {/grid4} {grid4} {jb_icon-resize-horizontal}jb_icon-resize-horizontal{/jb_icon-resize-horizontal} {/grid4} {grid4_last} {jb_icon-inbox}jb_icon-inbox{/jb_icon-inbox} {/grid4_last} {grid4} {jb_icon-envelope}jb_icon-envelope{/jb_icon-envelope} {/grid4} {grid4} {jb_icon-bar-chart}jb_icon-bar-chart{/jb_icon-bar-chart} {/grid4} {grid4_last} {jb_icon-play-circle}jb_icon-play-circle{/jb_icon-play-circle} {/grid4_last} {grid4} {jb_icon-heart}jb_icon-heart{/jb_icon-heart} {/grid4} {grid4} {jb_icon-twitter-sign}jb_icon-twitter-sign{/jb_icon-twitter-sign} {/grid4} {grid4_last} {jb_icon-repeat }jb_icon-repeat {/jb_icon-repeat } {/grid4_last} {grid4} {jb_icon-star}jb_icon-star{/jb_icon-star} {/grid4} {grid4} {jb_icon-facebook-sign}jb_icon-facebook-sign{/jb_icon-facebook-sign} {/grid4} {grid4_last} {jb_icon-refresh}jb_icon-refresh{/jb_icon-refresh} {/grid4_last} {grid4} {jb_icon-star-empty}jb_icon-star-empty{/jb_icon-star-empty} {/grid4} {grid4} {jb_icon-camera-retro}jb_icon-camera-retro{/jb_icon-camera-retro} {/grid4} {grid4_last} {jb_icon-list-alt}jb_icon-list-alt{/jb_icon-list-alt} {/grid4_last} {grid4} {jb_icon-user}jb_icon-user{/jb_icon-user} {/grid4} {grid4} {jb_icon-key}jb_icon-key{/jb_icon-key} {/grid4} {grid4_last} {jb_icon-lock }jb_icon-lock {/jb_icon-lock } {/grid4_last} {grid4} {jb_icon-film}jb_icon-film{/jb_icon-film} {/grid4} {grid4} {jb_icon-cogs}jb_icon-cogs{/jb_icon-cogs} {/grid4} {grid4_last} {jb_icon-flag}jb_icon-flag{/jb_icon-flag} {/grid4_last} {grid4} {jb_icon-th-large}jb_icon-th-large{/jb_icon-th-large} {/grid4} {grid4} {jb_icon-comments}jb_icon-comments{/jb_icon-comments} {/grid4} {grid4_last} {jb_icon-headphones}jb_icon-headphones{/jb_icon-headphones} {/grid4_last} {grid4} {jb_icon-th}jb_icon-th{/jb_icon-th} {/grid4} {grid4} {jb_icon-thumbs-up}jb_icon-thumbs-up{/jb_icon-thumbs-up} {/grid4} {grid4_last} {jb_icon-volume-off}jb_icon-volume-off{/jb_icon-volume-off} {/grid4_last} {grid4} {jb_icon-th-list}jb_icon-th-list{/jb_icon-th-list} {/grid4} {grid4} {jb_icon-thumbs-down}jb_icon-thumbs-down{/jb_icon-thumbs-down} {/grid4} {grid4_last} {jb_icon-volume-down}jb_icon-volume-down{/jb_icon-volume-down} {/grid4_last} {grid4} {jb_icon-ok}jb_icon-ok{/jb_icon-ok} {/grid4} {grid4} {jb_icon-star-half}jb_icon-star-half{/jb_icon-star-half} {/grid4} {grid4_last} {jb_icon-volume-up}jb_icon-volume-up{/jb_icon-volume-up} {/grid4_last} {grid4} {jb_icon-remove}jb_icon-remove{/jb_icon-remove} {/grid4} {grid4} {jb_icon-heart-empty}jb_icon-heart-empty{/jb_icon-heart-empty} {/grid4} {grid4_last} {jb_icon-qrcode}jb_icon-qrcode{/jb_icon-qrcode} {/grid4_last} {grid4} {jb_icon-zoom-in}jb_icon-zoom-in{/jb_icon-zoom-in} {/grid4} {grid4} {jb_icon-signout}jb_icon-signout{/jb_icon-signout} {/grid4} {grid4_last} {jb_icon-barcode}jb_icon-barcode{/jb_icon-barcode} {/grid4_last} {grid4} {jb_icon-zoom-out}jb_icon-zoom-out{/jb_icon-zoom-out} {/grid4} {grid4} {jb_icon-linkedin-sign}jb_icon-linkedin-sign{/jb_icon-linkedin-sign} {/grid4} {grid4_last} {jb_icon-tag}jb_icon-tag{/jb_icon-tag} {/grid4_last} {grid4} {jb_icon-off}jb_icon-off{/jb_icon-off} {/grid4} {grid4} {jb_icon-pushpin}jb_icon-pushpin{/jb_icon-pushpin} {/grid4} {grid4_last} {jb_icon-tags}jb_icon-tags{/jb_icon-tags} {/grid4_last} {grid4} {jb_icon-signal}jb_icon-signal{/jb_icon-signal} {/grid4} {grid4} {jb_icon-external-link}jb_icon-external-link{/jb_icon-external-link} {/grid4} {grid4_last} {jb_icon-book}jb_icon-book{/jb_icon-book} {/grid4_last} {grid4} {jb_icon-cog}jb_icon-cog{/jb_icon-cog} {/grid4} {grid4} {jb_icon-signin}jb_icon-signin{/jb_icon-signin} {/grid4} {grid4_last} {jb_icon-bookmark}jb_icon-bookmark{/jb_icon-bookmark} {/grid4_last} {grid4} {jb_icon-trash}jb_icon-trash{/jb_icon-trash} {/grid4} {grid4} {jb_icon-trophy}jb_icon-trophy{/jb_icon-trophy} {/grid4} {grid4_last} {jb_icon-print}jb_icon-print{/jb_icon-print} {/grid4_last} {grid4} {jb_icon-home}jb_icon-home{/jb_icon-home} {/grid4} {grid4} {jb_icon-github-sign}jb_icon-github-sign{/jb_icon-github-sign} {/grid4} {grid4_last} {jb_icon-camera}jb_icon-camera{/jb_icon-camera} {/grid4_last} {grid4} {jb_icon-file}jb_icon-file{/jb_icon-file} {/grid4} {grid4} {jb_icon-upload-alt}jb_icon-upload-alt{/jb_icon-upload-alt} {/grid4} {grid4_last} {jb_icon-font}jb_icon-font{/jb_icon-font} {/grid4_last} {grid4} {jb_icon-time}jb_icon-time{/jb_icon-time} {/grid4} {grid4} {jb_icon-lemon}jb_icon-lemon{/jb_icon-lemon} {/grid4} {grid4_last} {jb_icon-bold}jb_icon-bold{/jb_icon-bold} {/grid4_last} {grid4} {jb_icon-road}jb_icon-road{/jb_icon-road} {/grid4} {grid4} {jb_icon-phone}jb_icon-phone{/jb_icon-phone} {/grid4} {grid4_last} {jb_icon-italic}jb_icon-italic{/jb_icon-italic} {/grid4_last} {grid4} {jb_icon-download-alt}jb_icon-download-alt{/jb_icon-download-alt} {/grid4} {grid4} {jb_icon-check-empty}jb_icon-check-empty{/jb_icon-check-empty} {/grid4} {grid4_last} {jb_icon-text-height}jb_icon-text-height{/jb_icon-text-height} {/grid4_last} {grid4} {jb_icon-download}jb_icon-download{/jb_icon-download} {/grid4} {grid4} {jb_icon-bookmark-empty}jb_icon-bookmark-empty{/jb_icon-bookmark-empty} {/grid4} {grid4_last} {jb_icon-text-width}jb_icon-text-width{/jb_icon-text-width} {/grid4_last} {grid4} {jb_icon-upload}jb_icon-upload{/jb_icon-upload} {/grid4} {grid4} {jb_icon-phone-sign}jb_icon-phone-sign{/jb_icon-phone-sign} {/grid4} {grid4_last} {jb_icon-align-left}jb_icon-align-left{/jb_icon-align-left} {/grid4_last} {grid4} {jb_icon-inbox}jb_icon-inbox{/jb_icon-inbox} {/grid4} {grid4} {jb_icon-twitter}jb_icon-twitter{/jb_icon-twitter} {/grid4} {grid4_last} {jb_icon-align-center}jb_icon-align-center{/jb_icon-align-center} {/grid4_last} {grid4} {jb_icon-play-circle}jb_icon-play-circle{/jb_icon-play-circle} {/grid4} {grid4} {jb_icon-facebook}jb_icon-facebook{/jb_icon-facebook} {/grid4} {grid4_last} {jb_icon-align-right}jb_icon-align-right{/jb_icon-align-right} {/grid4_last} {grid4} {jb_icon-repeat}jb_icon-repeat{/jb_icon-repeat} {/grid4} {grid4} {jb_icon-github}jb_icon-github{/jb_icon-github} {/grid4} {grid4_last} {jb_icon-align-justify}jb_icon-align-justify{/jb_icon-align-justify} {/grid4_last} {grid4} {jb_icon-refresh}jb_icon-refresh{/jb_icon-refresh} {/grid4} {grid4} {jb_icon-unlock}jb_icon-unlock{/jb_icon-unlock} {/grid4} {grid4_last} {jb_icon-list}jb_icon-list{/jb_icon-list} {/grid4_last} {grid4} {jb_icon-list-alt}jb_icon-list-alt{/jb_icon-list-alt} {/grid4} {grid4} {jb_icon-credit-card}jb_icon-credit-card{/jb_icon-credit-card} {/grid4} {grid4_last} {jb_icon-indent-left}jb_icon-indent-left{/jb_icon-indent-left} {/grid4_last} {grid4} {jb_icon-lock}jb_icon-lock{/jb_icon-lock} {/grid4} {grid4} {jb_icon-rss}jb_icon-rss{/jb_icon-rss} {/grid4} {grid4_last} {jb_icon-indent-right}jb_icon-indent-right{/jb_icon-indent-right} {/grid4_last} {grid4} {jb_icon-flag}jb_icon-flag{/jb_icon-flag} {/grid4} {grid4} {jb_icon-hdd}jb_icon-hdd{/jb_icon-hdd} {/grid4} {grid4_last} {jb_icon-facetime-video}jb_icon-facetime-video{/jb_icon-facetime-video} {/grid4_last} {grid4} {jb_icon-headphones}jb_icon-headphones{/jb_icon-headphones} {/grid4} {grid4} {jb_icon-bullhorn}jb_icon-bullhorn{/jb_icon-bullhorn} {/grid4} {grid4_last} {jb_icon-picture}jb_icon-picture{/jb_icon-picture} {/grid4_last} {grid4} {jb_icon-volume-off}jb_icon-volume-off{/jb_icon-volume-off} {/grid4} {grid4} {jb_icon-bell}jb_icon-bell{/jb_icon-bell} {/grid4} {grid4_last} {jb_icon-pencil}jb_icon-pencil{/jb_icon-pencil} {/grid4_last} {grid4} {jb_icon-volume-down}jb_icon-volume-down{/jb_icon-volume-down} {/grid4} {grid4} {jb_icon-certificate}jb_icon-certificate{/jb_icon-certificate} {/grid4} {grid4_last} {jb_icon-map-marker }jb_icon-map-marker {/jb_icon-map-marker } {/grid4_last} {grid4} {jb_icon-volume-up}jb_icon-volume-up{/jb_icon-volume-up} {/grid4} {grid4} {jb_icon-hand-right}jb_icon-hand-right{/jb_icon-hand-right} {/grid4} {grid4_last} {jb_icon-adjust}jb_icon-adjust{/jb_icon-adjust} {/grid4_last} {grid4} {jb_icon-qrcode}jb_icon-qrcode{/jb_icon-qrcode} {/grid4} {grid4} {jb_icon-hand-left}jb_icon-hand-left{/jb_icon-hand-left} {/grid4} {grid4_last} {jb_icon-tint}jb_icon-tint{/jb_icon-tint} {/grid4_last} {grid4} {jb_icon-barcode}jb_icon-barcode{/jb_icon-barcode} {/grid4} {grid4} {jb_icon-hand-down}jb_icon-hand-down{/jb_icon-hand-down} {/grid4} {grid4_last} {jb_icon-edit}jb_icon-edit{/jb_icon-edit} {/grid4_last} {grid4} {jb_icon-tag}jb_icon-tag{/jb_icon-tag} {/grid4} {grid4} {jb_icon-circle-arrow-left}jb_icon-circle-arrow-left{/jb_icon-circle-arrow-left} {/grid4} {grid4_last} {jb_icon-share}jb_icon-share{/jb_icon-share} {/grid4_last} {grid4} {jb_icon-tags}jb_icon-tags{/jb_icon-tags} {/grid4} {grid4} {jb_icon-circle-arrow-right}jb_icon-circle-arrow-right{/jb_icon-circle-arrow-right} {/grid4} {grid4_last} {jb_icon-check}jb_icon-check{/jb_icon-check} {/grid4_last} {grid4} {jb_icon-book}jb_icon-book{/jb_icon-book} {/grid4} {grid4} {jb_icon-circle-arrow-up}jb_icon-circle-arrow-up{/jb_icon-circle-arrow-up} {/grid4} {grid4_last} {jb_icon-move}jb_icon-move{/jb_icon-move} {/grid4_last} {grid4} {jb_icon-bookmark}jb_icon-bookmark{/jb_icon-bookmark} {/grid4} {grid4} {jb_icon-circle-arrow-down}jb_icon-circle-arrow-down{/jb_icon-circle-arrow-down} {/grid4} {grid4_last} {jb_icon-step-backward}jb_icon-step-backward{/jb_icon-step-backward} {/grid4_last} {grid4} {jb_icon-print}jb_icon-print{/jb_icon-print} {/grid4} {grid4} {jb_icon-globe}jb_icon-globe{/jb_icon-globe} {/grid4} {grid4_last} {jb_icon-fast-backward}jb_icon-fast-backward{/jb_icon-fast-backward} {/grid4_last} {grid4} {jb_icon-camera}jb_icon-camera{/jb_icon-camera} {/grid4} {grid4} {jb_icon-wrench}jb_icon-wrench{/jb_icon-wrench} {/grid4} {grid4_last} {jb_icon-backward}jb_icon-backward{/jb_icon-backward} {/grid4_last} {grid4} {jb_icon-font}jb_icon-font{/jb_icon-font} {/grid4} {grid4} {jb_icon-tasks}jb_icon-tasks{/jb_icon-tasks} {/grid4} {grid4_last} {jb_icon-play}jb_icon-play{/jb_icon-play} {/grid4_last} {grid4} {jb_icon-bold}jb_icon-bold{/jb_icon-bold} {/grid4} {grid4} {jb_icon-filter}jb_icon-filter{/jb_icon-filter} {/grid4} {grid4_last} {jb_icon-pause}jb_icon-pause{/jb_icon-pause} {/grid4_last} {grid4} {jb_icon-italic}jb_icon-italic{/jb_icon-italic} {/grid4} {grid4} {jb_icon-briefcase}jb_icon-briefcase{/jb_icon-briefcase} {/grid4} {grid4_last} {jb_icon-stop}jb_icon-stop{/jb_icon-stop} {/grid4_last} {grid4} {jb_icon-text-height}jb_icon-text-height{/jb_icon-text-height} {/grid4} {grid4} {jb_icon-fullscreen}jb_icon-fullscreen{/jb_icon-fullscreen} {/grid4} {grid4_last} {jb_icon-forward}jb_icon-forward{/jb_icon-forward} {/grid4_last} {grid4} {jb_icon-text-width}jb_icon-text-width{/jb_icon-text-width} {/grid4} {grid4} {jb_icon-group}jb_icon-group{/jb_icon-group} {/grid4} {grid4_last} {jb_icon-fast-forward}jb_icon-fast-forward{/jb_icon-fast-forward} {/grid4_last} {grid4} {jb_icon-align-left}jb_icon-align-left{/jb_icon-align-left} {/grid4} {grid4} {jb_icon-link}jb_icon-link{/jb_icon-link} {/grid4} {grid4_last} {jb_icon-step-forward}jb_icon-step-forward{/jb_icon-step-forward} {/grid4_last} {grid4} {jb_icon-align-center}jb_icon-align-center{/jb_icon-align-center} {/grid4} {grid4} {jb_icon-cloud}jb_icon-cloud{/jb_icon-cloud} {/grid4} {grid4_last} {jb_icon-eject}jb_icon-eject{/jb_icon-eject} {/grid4_last} {grid4} {jb_icon-align-right}jb_icon-align-right{/jb_icon-align-right} {/grid4} {grid4} {jb_icon-beaker}jb_icon-beaker{/jb_icon-beaker} {/grid4} {grid4_last} {jb_icon-chevron-left}jb_icon-chevron-left{/jb_icon-chevron-left} {/grid4_last} {grid4} {jb_icon-align-justify}jb_icon-align-justify{/jb_icon-align-justify} {/grid4} {grid4} {jb_icon-cut}jb_icon-cut{/jb_icon-cut} {/grid4} {grid4_last} {jb_icon-chevron-right }jb_icon-chevron-right {/jb_icon-chevron-right } {/grid4_last} {grid4} {jb_icon-list}jb_icon-list{/jb_icon-list} {/grid4} {grid4} {jb_icon-copy}jb_icon-copy{/jb_icon-copy} {/grid4} {grid4_last} {jb_icon-plus-sign}jb_icon-plus-sign{/jb_icon-plus-sign} {/grid4_last} {grid4} {jb_icon-indent-left}jb_icon-indent-left{/jb_icon-indent-left} {/grid4} {grid4} {jb_icon-paper-clip}jb_icon-paper-clip{/jb_icon-paper-clip} {/grid4} {grid4_last} {jb_icon-minus-sign}jb_icon-minus-sign{/jb_icon-minus-sign} {/grid4_last} {grid4} {jb_icon-indent-right}jb_icon-indent-right{/jb_icon-indent-right} {/grid4} {grid4} {jb_icon-save}jb_icon-save{/jb_icon-save} {/grid4} {grid4_last} {jb_icon-remove-sign}jb_icon-remove-sign{/jb_icon-remove-sign} {/grid4_last} {grid4} {jb_icon-facetime-video}jb_icon-facetime-video{/jb_icon-facetime-video} {/grid4} {grid4} {jb_icon-sign-blank}jb_icon-sign-blank{/jb_icon-sign-blank} {/grid4} {grid4_last} {jb_icon-ok-sign}jb_icon-ok-sign{/jb_icon-ok-sign} {/grid4_last} {grid4} {jb_icon-picture}jb_icon-picture{/jb_icon-picture} {/grid4} {grid4} {jb_icon-reorder}jb_icon-reorder{/jb_icon-reorder} {/grid4} {grid4_last} {jb_icon-question-sign}jb_icon-question-sign{/jb_icon-question-sign} {/grid4_last} {grid4} {jb_icon-pencil}jb_icon-pencil{/jb_icon-pencil} {/grid4} {grid4} {jb_icon-list-ul}jb_icon-list-ul{/jb_icon-list-ul} {/grid4} {grid4_last} {jb_icon-info-sign}jb_icon-info-sign{/jb_icon-info-sign} {/grid4_last} {grid4} {jb_icon-map-marker}jb_icon-map-marker{/jb_icon-map-marker} {/grid4} {grid4} {jb_icon-list-ol}jb_icon-list-ol{/jb_icon-list-ol} {/grid4} {grid4_last} {jb_icon-screenshot}jb_icon-screenshot{/jb_icon-screenshot} {/grid4_last} {grid4} {jb_icon-adjust}jb_icon-adjust{/jb_icon-adjust} {/grid4} {grid4} {jb_icon-strikethrough}jb_icon-strikethrough{/jb_icon-strikethrough} {/grid4} {grid4_last} {jb_icon-remove-circle}jb_icon-remove-circle{/jb_icon-remove-circle} {/grid4_last} {grid4} {jb_icon-tint}jb_icon-tint{/jb_icon-tint} {/grid4} {grid4} {jb_icon-underline}jb_icon-underline{/jb_icon-underline} {/grid4} {grid4_last} {jb_icon-ok-circle}jb_icon-ok-circle{/jb_icon-ok-circle} {/grid4_last} {grid4} {jb_icon-edit}jb_icon-edit{/jb_icon-edit} {/grid4} {grid4} {jb_icon-table}jb_icon-table{/jb_icon-table} {/grid4} {grid4_last} {jb_icon-ban-circle}jb_icon-ban-circle{/jb_icon-ban-circle} {/grid4_last} {grid4} {jb_icon-share}jb_icon-share{/jb_icon-share} {/grid4} {grid4} {jb_icon-magic}jb_icon-magic{/jb_icon-magic} {/grid4} {grid4_last} {jb_icon-arrow-left}jb_icon-arrow-left{/jb_icon-arrow-left} {/grid4_last} {grid4} {jb_icon-check}jb_icon-check{/jb_icon-check} {/grid4} {grid4} {jb_icon-truck}jb_icon-truck{/jb_icon-truck} {/grid4} {grid4_last} {jb_icon-arrow-right}jb_icon-arrow-right{/jb_icon-arrow-right} {/grid4_last} {grid4} {jb_icon-move}jb_icon-move{/jb_icon-move} {/grid4} {grid4} {jb_icon-pinterest}jb_icon-pinterest{/jb_icon-pinterest} {/grid4} {grid4_last} {jb_icon-arrow-up}jb_icon-arrow-up{/jb_icon-arrow-up} {/grid4_last} {grid4} {jb_icon-step-backward}jb_icon-step-backward{/jb_icon-step-backward} {/grid4} {grid4} {jb_icon-pinterest-sign}jb_icon-pinterest-sign{/jb_icon-pinterest-sign} {/grid4} {grid4_last} {jb_icon-arrow-down}jb_icon-arrow-down{/jb_icon-arrow-down} {/grid4_last} {grid4} {jb_icon-fast-backward}jb_icon-fast-backward{/jb_icon-fast-backward} {/grid4} {grid4} {jb_icon-google-plus-sign}jb_icon-google-plus-sign{/jb_icon-google-plus-sign} {/grid4} {grid4_last} {jb_icon-share-alt}jb_icon-share-alt{/jb_icon-share-alt} {/grid4_last} {grid4} {jb_icon-backward}jb_icon-backward{/jb_icon-backward} {/grid4} {grid4} {jb_icon-google-plus}jb_icon-google-plus{/jb_icon-google-plus} {/grid4} {grid4_last} {jb_icon-resize-full}jb_icon-resize-full{/jb_icon-resize-full} {/grid4_last} {grid4} {jb_icon-play}jb_icon-play{/jb_icon-play} {/grid4} {grid4} {jb_icon-money}jb_icon-money{/jb_icon-money} {/grid4} {grid4_last} {jb_icon-resize-small}jb_icon-resize-small{/jb_icon-resize-small} {/grid4_last} {grid4} {jb_icon-pause}jb_icon-pause{/jb_icon-pause} {/grid4} {grid4} {jb_icon-caret-down}jb_icon-caret-down{/jb_icon-caret-down} {/grid4} {grid4_last} {jb_icon-plus}jb_icon-plus{/jb_icon-plus} {/grid4_last} {grid4} {jb_icon-stop}jb_icon-stop{/jb_icon-stop} {/grid4} {grid4} {jb_icon-caret-up}jb_icon-caret-up{/jb_icon-caret-up} {/grid4} {grid4_last} {jb_icon-minus}jb_icon-minus{/jb_icon-minus} {/grid4_last} {grid4} {jb_icon-forward}jb_icon-forward{/jb_icon-forward} {/grid4} {grid4} {jb_icon-caret-left}jb_icon-caret-left{/jb_icon-caret-left} {/grid4} {grid4_last} {jb_icon-asterisk}jb_icon-asterisk{/jb_icon-asterisk} {/grid4_last} {grid4} {jb_icon-fast-forward}jb_icon-fast-forward{/jb_icon-fast-forward} {/grid4} {grid4} {jb_icon-caret-right}jb_icon-caret-right{/jb_icon-caret-right} {/grid4} {grid4_last} {jb_icon-exclamation-sign}jb_icon-exclamation-sign{/jb_icon-exclamation-sign} {/grid4_last} {grid4} {jb_icon-step-forward}jb_icon-step-forward{/jb_icon-step-forward} {/grid4} {grid4} {jb_icon-columns}jb_icon-columns{/jb_icon-columns} {/grid4} {grid4_last} {jb_icon-gift}jb_icon-gift{/jb_icon-gift} {/grid4_last} {grid4} {jb_icon-eject}jb_icon-eject{/jb_icon-eject} {/grid4} {grid4} {jb_icon-sort}jb_icon-sort{/jb_icon-sort} {/grid4} {grid4_last} {jb_icon-leaf}jb_icon-leaf{/jb_icon-leaf} {/grid4_last} {grid4} {jb_icon-chevron-left}jb_icon-chevron-left{/jb_icon-chevron-left} {/grid4} {grid4} {jb_icon-sort-down}jb_icon-sort-down{/jb_icon-sort-down} {/grid4} {grid4_last} {jb_icon-fire}jb_icon-fire{/jb_icon-fire} {/grid4_last} {grid4} {jb_icon-chevron-right}jb_icon-chevron-right{/jb_icon-chevron-right} {/grid4} {grid4} {jb_icon-sort-up}jb_icon-sort-up{/jb_icon-sort-up} {/grid4} {grid4_last} {jb_icon-eye-open }jb_icon-eye-open {/jb_icon-eye-open } {/grid4_last} {grid4} {jb_icon-plus-sign}jb_icon-plus-sign{/jb_icon-plus-sign} {/grid4} {grid4} {jb_icon-envelope-alt}jb_icon-envelope-alt{/jb_icon-envelope-alt} {/grid4} {grid4_last} {jb_icon-eye-close}jb_icon-eye-close{/jb_icon-eye-close} {/grid4_last} {grid4} {jb_icon-minus-sign}jb_icon-minus-sign{/jb_icon-minus-sign} {/grid4} {grid4} {jb_icon-linkedin}jb_icon-linkedin{/jb_icon-linkedin} {/grid4} {grid4_last} {jb_icon-warning-sign}jb_icon-warning-sign{/jb_icon-warning-sign} {/grid4_last} {grid4} {jb_icon-remove-sign}jb_icon-remove-sign{/jb_icon-remove-sign} {/grid4} {grid4} {jb_icon-undo}jb_icon-undo{/jb_icon-undo} {/grid4} {grid4_last} {jb_icon-plane}jb_icon-plane{/jb_icon-plane} {/grid4_last} {grid4} {jb_icon-ok-sign}jb_icon-ok-sign{/jb_icon-ok-sign} {/grid4} {grid4} {jb_icon-legal}jb_icon-legal{/jb_icon-legal} {/grid4} {grid4_last} {jb_icon-calendar}jb_icon-calendar{/jb_icon-calendar} {/grid4_last} {grid4} {jb_icon-question-sign}jb_icon-question-sign{/jb_icon-question-sign} {/grid4} {grid4} {jb_icon-dashboard}jb_icon-dashboard{/jb_icon-dashboard} {/grid4} {grid4_last} {jb_icon-random}jb_icon-random{/jb_icon-random} {/grid4_last} {grid4} {jb_icon-info-sign}jb_icon-info-sign{/jb_icon-info-sign} {/grid4} {grid4} {jb_icon-comment-alt}jb_icon-comment-alt{/jb_icon-comment-alt} {/grid4} {grid4_last} {jb_icon-comment}jb_icon-comment{/jb_icon-comment} {/grid4_last} {grid4} {jb_icon-screenshot}jb_icon-screenshot{/jb_icon-screenshot} {/grid4} {grid4} {jb_icon-comments-alt}jb_icon-comments-alt{/jb_icon-comments-alt} {/grid4} {grid4_last} {jb_icon-magnet}jb_icon-magnet{/jb_icon-magnet} {/grid4_last} {grid4} {jb_icon-remove-circle}jb_icon-remove-circle{/jb_icon-remove-circle} {/grid4} {grid4} {jb_icon-bolt}jb_icon-bolt{/jb_icon-bolt} {/grid4} {grid4_last} {jb_icon-chevron-up}jb_icon-chevron-up{/jb_icon-chevron-up} {/grid4_last} {grid4} {jb_icon-ok-circle}jb_icon-ok-circle{/jb_icon-ok-circle} {/grid4} {grid4} {jb_icon-sitemap}jb_icon-sitemap{/jb_icon-sitemap} {/grid4} {grid4_last} {jb_icon-chevron-down}jb_icon-chevron-down{/jb_icon-chevron-down} {/grid4_last} {grid4} {jb_icon-ban-circle}jb_icon-ban-circle{/jb_icon-ban-circle} {/grid4} {grid4} {jb_icon-umbrella}jb_icon-umbrella{/jb_icon-umbrella} {/grid4} {grid4_last} {jb_icon-retweet}jb_icon-retweet{/jb_icon-retweet} {/grid4_last} {grid4} {jb_icon-arrow-left}jb_icon-arrow-left{/jb_icon-arrow-left} {/grid4} {grid4} {jb_icon-paste}jb_icon-paste{/jb_icon-paste} {/grid4} {grid4_last} {jb_icon-shopping-cart}jb_icon-shopping-cart{/jb_icon-shopping-cart} {/grid4_last} {grid4} {jb_icon-arrow-right}jb_icon-arrow-right{/jb_icon-arrow-right} {/grid4} {grid4} {jb_icon-user-md}jb_icon-user-md{/jb_icon-user-md} {/grid4} {grid4_last} {jb_icon-folder-close}jb_icon-folder-close{/jb_icon-folder-close} {/grid4_last} {grid4} {jb_icon-arrow-up}jb_icon-arrow-up{/jb_icon-arrow-up} {/grid4} {grid4} {jb_icon-glass}jb_icon-glass{/jb_icon-glass} {/grid4} {grid4_last} {jb_icon-folder-open}jb_icon-folder-open{/jb_icon-folder-open} {/grid4_last} {grid4} {jb_icon-arrow-down}jb_icon-arrow-down{/jb_icon-arrow-down} {/grid4} {grid4} {jb_icon-music}jb_icon-music{/jb_icon-music} {/grid4} {grid4_last} {jb_icon-resize-vertical}jb_icon-resize-vertical{/jb_icon-resize-vertical} {/grid4_last} {grid4} {jb_icon-share-alt}jb_icon-share-alt{/jb_icon-share-alt} {/grid4} {grid4} {jb_icon-search}jb_icon-search{/jb_icon-search} {/grid4} {grid4_last} {jb_icon-resize-horizontal}jb_icon-resize-horizontal{/jb_icon-resize-horizontal} {/grid4_last} {grid4} {jb_icon-resize-full}jb_icon-resize-full{/jb_icon-resize-full} {/grid4} {grid4} {jb_icon-envelope}jb_icon-envelope{/jb_icon-envelope} {/grid4} {grid4_last} {jb_icon-hdd }jb_icon-hdd {/jb_icon-hdd } {/grid4_last} {grid4} {jb_icon-resize-small}jb_icon-resize-small{/jb_icon-resize-small} {/grid4} {grid4} {jb_icon-heart}jb_icon-heart{/jb_icon-heart} {/grid4} {grid4_last} {jb_icon-bullhorn}jb_icon-bullhorn{/jb_icon-bullhorn} {/grid4_last} {grid4} {jb_icon-plus}jb_icon-plus{/jb_icon-plus} {/grid4} {grid4} {jb_icon-star}jb_icon-star{/jb_icon-star} {/grid4} {grid4_last} {jb_icon-bell}jb_icon-bell{/jb_icon-bell} {/grid4_last} {grid4} {jb_icon-minus}jb_icon-minus{/jb_icon-minus} {/grid4} {grid4} {jb_icon-star-empty}jb_icon-star-empty{/jb_icon-star-empty} {/grid4} {grid4_last} {jb_icon-certificate}jb_icon-certificate{/jb_icon-certificate} {/grid4_last} {grid4} {jb_icon-asterisk}jb_icon-asterisk{/jb_icon-asterisk} {/grid4} {grid4} {jb_icon-user}jb_icon-user{/jb_icon-user} {/grid4} {grid4_last} {jb_icon-thumbs-up}jb_icon-thumbs-up{/jb_icon-thumbs-up} {/grid4_last} {grid4} {jb_icon-exclamation-sign}jb_icon-exclamation-sign{/jb_icon-exclamation-sign} {/grid4} {grid4} {jb_icon-film}jb_icon-film{/jb_icon-film} {/grid4} {grid4_last} {jb_icon-thumbs-down}jb_icon-thumbs-down{/jb_icon-thumbs-down} {/grid4_last} {grid4} {jb_icon-gift}jb_icon-gift{/jb_icon-gift} {/grid4} {grid4} {jb_icon-th-large}jb_icon-th-large{/jb_icon-th-large} {/grid4} {grid4_last} {jb_icon-hand-right}jb_icon-hand-right{/jb_icon-hand-right} {/grid4_last} {grid4} {jb_icon-leaf}jb_icon-leaf{/jb_icon-leaf} {/grid4} {grid4} {jb_icon-th}jb_icon-th{/jb_icon-th} {/grid4} {grid4_last} {jb_icon-hand-left}jb_icon-hand-left{/jb_icon-hand-left} {/grid4_last} {grid4} {jb_icon-fire}jb_icon-fire{/jb_icon-fire} {/grid4} {grid4} {jb_icon-th-list}jb_icon-th-list{/jb_icon-th-list} {/grid4} {grid4_last} {jb_icon-hand-up}jb_icon-hand-up{/jb_icon-hand-up} {/grid4_last} {grid4} {jb_icon-eye-open}jb_icon-eye-open{/jb_icon-eye-open} {/grid4} {grid4} {jb_icon-ok}jb_icon-ok{/jb_icon-ok} {/grid4} {grid4_last} {jb_icon-hand-down}jb_icon-hand-down{/jb_icon-hand-down} {/grid4_last} {grid4} {jb_icon-eye-close}jb_icon-eye-close{/jb_icon-eye-close} {/grid4} {grid4} {jb_icon-remove}jb_icon-remove{/jb_icon-remove} {/grid4} {grid4_last} {jb_icon-circle-arrow-right}jb_icon-circle-arrow-right{/jb_icon-circle-arrow-right} {/grid4_last} {grid4} {jb_icon-warning-sign}jb_icon-warning-sign{/jb_icon-warning-sign} {/grid4} {grid4} {jb_icon-zoom-in}jb_icon-zoom-in{/jb_icon-zoom-in} {/grid4} {grid4_last} {jb_icon-circle-arrow-left}jb_icon-circle-arrow-left{/jb_icon-circle-arrow-left} {/grid4_last} {grid4} {jb_icon-plane}jb_icon-plane{/jb_icon-plane} {/grid4} {grid4} {jb_icon-zoom-out}jb_icon-zoom-out{/jb_icon-zoom-out} {/grid4} {grid4_last} {jb_icon-circle-arrow-up}jb_icon-circle-arrow-up{/jb_icon-circle-arrow-up} {/grid4_last} {grid4} {jb_icon-calendar}jb_icon-calendar{/jb_icon-calendar} {/grid4} {grid4} {jb_icon-off}jb_icon-off{/jb_icon-off} {/grid4} {grid4_last} {jb_icon-circle-arrow-down}jb_icon-circle-arrow-down{/jb_icon-circle-arrow-down} {/grid4_last} {grid4} {jb_icon-random}jb_icon-random{/jb_icon-random} {/grid4} {grid4} {jb_icon-signal}jb_icon-signal{/jb_icon-signal} {/grid4} {grid4_last} {jb_icon-globe}jb_icon-globe{/jb_icon-globe} {/grid4_last} {grid4} {jb_icon-comment}jb_icon-comment{/jb_icon-comment} {/grid4} {grid4} {jb_icon-cog }jb_icon-cog {/jb_icon-cog } {/grid4} {grid4_last} {jb_icon-wrench}jb_icon-wrench{/jb_icon-wrench} {/grid4_last} {grid4} {jb_icon-magnet}jb_icon-magnet{/jb_icon-magnet} {/grid4} {grid4} {jb_icon-trash}jb_icon-trash{/jb_icon-trash} {/grid4} {grid4_last} {jb_icon-tasks}jb_icon-tasks{/jb_icon-tasks} {/grid4_last} {grid4} {jb_icon-chevron-up}jb_icon-chevron-up{/jb_icon-chevron-up} {/grid4} {grid4} {jb_icon-home}jb_icon-home{/jb_icon-home} {/grid4} {grid4_last} {jb_icon-filter}jb_icon-filter{/jb_icon-filter} {/grid4_last} {grid4} {jb_icon-chevron-down}jb_icon-chevron-down{/jb_icon-chevron-down} {/grid4} {grid4} {jb_icon-file}jb_icon-file{/jb_icon-file} {/grid4} {grid4_last} {jb_icon-briefcase}jb_icon-briefcase{/jb_icon-briefcase} {/grid4_last} {grid4} {jb_icon-retweet}jb_icon-retweet{/jb_icon-retweet} {/grid4} {grid4} {jb_icon-time}jb_icon-time{/jb_icon-time} {/grid4} {grid4_last} {jb_icon-fullscreen}jb_icon-fullscreen{/jb_icon-fullscreen} {/grid4_last} {grid4} {jb_icon-shopping-cart}jb_icon-shopping-cart{/jb_icon-shopping-cart} {/grid4} {grid4} {jb_icon-road}jb_icon-road{/jb_icon-road} {/grid4} {grid4_last} {/grid4_last} {grid4} {jb_icon-folder-close}jb_icon-folder-close{/jb_icon-folder-close} {/grid4} {grid4} {jb_icon-download-alt}jb_icon-download-alt{/jb_icon-download-alt} {/grid4} {grid4_last} {/grid4_last}

Reusable grid layouts for your content

gridsincontent

The blocks of text below are controlled via width classes that are built into the Zen Grid Framework. The classes scale according to your browser width and are useful for employing complex or interesting content layouts directly within your Joomla content.

gridsincontent

The blocks of text below are controlled via width classes that are built into the Zen Grid Framework. The classes scale according to your browser width and are useful for employing complex or interesting content layouts directly within your Joomla content.

4 columns grid

{grid3}

Grid_four. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium.

{/grid3} {grid3}

Grid_four. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium.

{/grid3} {grid3}

Grid_four. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium.

{/grid3} {grid3_last}

Grid_four w/ zenlast class
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo.

{/grid3_last}

 

 

You can access the grid classes below in your wysiwyg editor.

gridsincontent

 


A code sample

Please note that since we are floating paragraphs both left and right you also need to clear the row of paragraphs after each row is populated. You can see a snippet of the html used below as an example.

<h2>Simple 2 columns grid</h2>

<div class="grid_six">
<p><strong>grid_six</strong>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.</p>
</div>
<div class="grid_six jblast">
<p><strong>grid_six with the zenlast class</strong>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.</p>
</div> <div class="clear"></div>

 

Simple 2 columns grid

grid_six.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

grid_six with the zenlast class.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

 

4 columns grid

Grid_four. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

Grid_four. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

Grid_four. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

Grid_four with the zenlast class
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

 

2 columns, main content and sidebar

Grid_nine.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. Mauris ultricies sapien id dolor lacinia porta. Etiam egestas pharetra molestie. Donec ullamcorper laoreet nisi et pulvinar.

Sidebar

With a subtitle

Grid_three with the zenlast class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis justo dictum justo accumsan pretium. Vestibulum sodales massa id dolor eleifend in bibendum odio pulvinar. Donec id laoreet augue. Nulla suscipit arcu vitae metus pellentesque cursus eu nec massa. Donec nec quam velit. Suspendisse potenti. Nam in est et nibh accumsan porta in eget lacus. Maecenas vestibulum scelerisque diam, nec tristique enim interdum a. Fusce eget sem justo. 

 

Units

grid_one

Lorem ipsum dolor sit amet

grid_eleven

 

Grid_eleven with the zenlast class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

 

grid_two

Lorem ipsum dolor sit amet, consectetuer 

grid_ten with additional zenlast class.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

 

grid_three

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 

grid_nine with additional zenlast class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci

 

grid_four

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

grid_eight with additional zenlast class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

grid_five

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 

grid_seven with additional zenlast class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

grid_six

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

grid_six with additional zenlast class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.