Zenbuttons and fluid grids come to JB Type

24Apr 2012

Zenbuttons and fluid grids come to JB Type

Published in Joomla Extensions

24Apr 2012

joomla extensions

Comments

Yesterday I released an update to the JB Type plugin.

The new version is essentially a bug fix but I added some new styles to the plugin that I had scheduled for the next major update that I felt just couldn't wait.

Adding grid layouts to your content ...

As you may have seen we use a percentage based responsive grid in our Joomla templates which is also available to users to implement within their content. You can see these grids in action in the Lifestyle template as an example.

However the latest release of JB Type now provides the ability for users of the Zen Grid Framework to use the simplified JB Type syntax to render the very same grids.

As an example users can now specify a grid such as:

Here be monsters

Any content that has the grid tags applied to it will then be automatically rendered in a div tag that has the grid_four class applied to it. Within a Zen Grid Framework template this will be output as a block of text which floats to the left, has a margin of 3.4% and spans 30.75% of the available are within the content item.

If you wanted to apply the zenlast class and float the block to the right and remove the margin then yopu would use the following syntax:

Here be monsters

You can see an example of how this renders in the upcoming Corporate Joomla tempolate below.

rendered

Beware your p tags ...

There is one caveat in using this code though. If you add the preceding code in the editor window and then press return after the syntax the editor will wrap the line of code with paragraph tags and thereby break the html on the page by nesting div tags within p tags - that's a big no no when it comes to creating cross browser and valid xhtml.

So when adding these tags please ensure that you either edit it in code view (even if it hurts your eyes) or use a editor like RokPad which won't add p tags to your code.

The Zenbutton ...

In addition to the grids I've also added a hook that can be used to create some very snazzy buttons.

The following syntax:

My button text that may also be a link

will render in your markup like this:

<div class="zenbutton"><span>My button text that may also be a link</span></div>

The plugin doesn't contain any default styling for this syntax - nor does the grid syntax above - but now that you know the code that is rendered you can add some excellent looking css3 that will make some very shiny looking rounded buttons.

zenbutton

The css we used for the buttons shown in the screenshot above is based on the css3 add to cart buttons created by John Sardine:

/* Button Global Style*/
.zenbutton span a{
	color: #666;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
	display: inline-block;
	padding: 8px 15px;
	margin-bottom:10px;
	border-radius: 20px;
	border: 1px solid #999;
	background-color: #ccc;
	background-image: -moz-linear-gradient(top, #ccc, #aaa);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#aaa));
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
			box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
}

.zenbutton span a:hover{
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.6), 0 0 5px rgba(255,255,255,1);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.6), 0 0 5px rgba(255,255,255,1);
			box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.6), 0 0 5px rgba(255,255,255,1);text-decoration: none;
}


/* Green Button */
.zenbutton span a{
	border-color: #93af58;
	background-color: #cae286;
	background-image: -moz-linear-gradient(top, #cae286, #9eca56) !important;
	background-image: -webkit-gradient(linear, center top, center bottom, from(#cae286), to(#9eca56)) !important;
}
.zenbutton span a{
	color: #678338;

}
.zenbutton span a:hover{
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.6), 0 0 5px rgba(181,215,110,1);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.6), 0 0 5px rgba(181,215,110,1);
			box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.6), 0 0 5px rgba(181,215,110,1);
			color: #444;
}

Putting it all together

You can see the markup we have used in the screenshot above to render a block of text with the zen button syntax that floats to the right of the content area in the screenshot below.

grid5

While these additions are designed primarily for users of Joomlabamboo templates it is possible to take advantage of these hooks and add some of your own flavour to your content.

I've purposely left the css out of these code additions as I intend to make use of them in up and coming templates. If you want to grab the grid.css that we use in the framework then feel free to add the styles from the grid css to your own template.

These updates should make it alot easier for you to apply complex or at least interesting layouts on the page and reuse elements like the zenbutton to add more visual flair to your links.

BambooBlog