Gridiculous Pro is my first premium theme to include a whole new collection of shortcodes. Now it’s a whole lot easier for you to get some awesome looking elements onto your page. Since many people have been raving about all the great styles and components in Twitter Bootstrap, I decided to base many of the shortcode elements off of that.
Here are examples of how you can use them all.
Buttons
[button]Default[/button]
[button style="primary"]Primary[/button]
[button style="info"]Info[/button]
[button style="success"]Success[/button]
[button style="warning"]Warning[/button]
[button style="danger"]Danger[/button]
[button style="inverse"]Inverse[/button]
[button style="link"]Link[/button]
[button size="large"]Default[/button]
[button size="small"]Default[/button]
[button size="mini"]Default[/button]
Alerts
[alert]This is the default alert box[/alert]
Warning!
This is the error alert box
[alert style="error"]<h4>Warning!</h4>This is the error alert box[/alert]
[alert style="success"]<b>Success!</b> This is the success alert box[/alert]
[alert style="info"]This is the information alert box[/alert]
Labels
Default[label]Default[/label]
Success [label style="success"]Success[/label]
Warning [label style="warning"]Warning[/label]
Important [label style="important"]Important[/label]
Info [label style="info"]Info[/label]
Inverse [label style="inverse"]Inverse[/label]
Badges
1[badge]1[/badge]
2 [badge style="success"]2[/badge]
3 [badge style="warning"]3[/badge]
4 [badge style="important"]4[/badge]
5 [badge style="info"]5[/badge]
6 [badge style="inverse"]6[/badge]
Hero unit
Unit Title
This is a simple hero unit, very similar to a sticky posts on the home page.
[hero] <h1>Unit Title</h1> <p>This is a simple hero unit, very similar to a sticky posts on the home page.</p> [/hero]
Images
[image style="rounded"]http://demos.bavotasan.com/gridiculous-pro/files/2012/09/Pixmac000022074903_square.jpeg[/image]
[image style="circle"]http://demos.bavotasan.com/gridiculous-pro/files/2012/09/Pixmac000022074903_square.jpeg[/image]
[image style="polaroid"]http://demos.bavotasan.com/gridiculous-pro/files/2012/09/Pixmac000022074903.jpeg[/image]
border-radius support.Author Box
[author_info]
Columns
Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.
[columns size="2" gap="20px"]Your text[/columns]
Carousel
First Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Second Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Third Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
[carousel slide="slide"] [carousel_image active="active" title="First Thumbnail label" caption="Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit."]http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg[/carousel_image] [carousel_image title="Second Thumbnail label" caption="Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit."]http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg[/carousel_image] [carousel_image title="Third Thumbnail label" caption="Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit."]http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg[/carousel_image] [/carousel]
slide="slide" parameter from the carousel shortcode.Tooltip
Hover over me Left Tooltip Right Tooltip Bottom Tooltip[tooltip tip="This is a tooltip" placement="left"]Your text[/tooltip]
Tabs
[tabs]
[tabs_nav]
[tabs_nav_item active="active" id="first"]First Tab[/tabs_nav_item]
[tabs_nav_item id="second"]Second Tab[/tabs_nav_item]
[tabs_nav_item id="third"]Third Tab[/tabs_nav_item]
[/tabs_nav]
[tabs_content]
[tabs_content_item active="active" id="first"]Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/tabs_content_item]
[tabs_content_item id="second"]Donec id elit non mi porta gravida at eget metus.[/tabs_content_item]
[tabs_content_item id="third"]Nulla vitae elit libero, a pharetra augue.[/tabs_content_item]
[/tabs_content]
[/tabs]
WideText
FULL WIDTH TEXT IS EASY TO ACHIEVE WITH THE WIDETEXT JQUERY PLUGIN
[widetext]FULL WIDTH TEXT[/widetext] [widetext]IS EASY TO ACHIEVE[/widetext] [widetext]WITH THE WIDETEXT[/widetext] [widetext]JQUERY PLUGIN[/widetext]
