It’s incredibly simple to style your site and create unique layouts with Best! When you take advantage of Best’s easy to use shortcodes, you can effortlessly unlock complex page templates with a great look and feel. With everything from buttons to columns, alerts to responsive video embeds and more, Best has you covered for nearly any situation. Take a little time and check out some of the available shortcodes below.
Standard Buttons
Need a button? No problem. We’ve got ‘em in all colors and sizes. All you have to do is call the [button] shortcode and pass in a few parameters. Crafting beautiful links to navigate users through your site or use as a call to action just got way too easy.
Large
[button link="#" text="Large" color="light-blue" size="large"] [button link="#" text="Large" color="dark-blue" size="large"] [button link="#" text="Large" color="orange" size="large"] [button link="#" text="Large" color="green" size="large"] [button link="#" text="Large" color="teal" size="large"] [button link="#" text="Large" color="purple" size="large"] [button link="#" text="Large" color="red" size="large"] [button link="#" text="Large" color="yellow" size="large"] [button link="#" text="Large" color="pink" size="large"] [button link="#" text="Large" color="maroon" size="large"] [button link="#" text="Large" color="light-gray" size="large"] [button link="#" text="Large" color="dark-gray" size="large"] [button link="#" text="Large" color="black" size="large"]
Medium
[button link="#" text="Medium" color="light-blue"] [button link="#" text="Medium" color="dark-blue"] [button link="#" text="Medium" color="orange"] [button link="#" text="Medium" color="green"] [button link="#" text="Medium" color="teal"] [button link="#" text="Medium" color="purple"] [button link="#" text="Medium" color="red"] [button link="#" text="Medium" color="yellow"] [button link="#" text="Medium" color="pink"] [button link="#" text="Medium" color="maroon"] [button link="#" text="Medium" color="light-gray"] [button link="#" text="Medium" color="dark-gray"] [button link="#" text="Medium" color="black"]
Small
[button link="#" text="Small" color="light-blue" size="small"] [button link="#" text="Small" color="dark-blue" size="small"] [button link="#" text="Small" color="orange" size="small"] [button link="#" text="Small" color="green" size="small"] [button link="#" text="Small" color="teal" size="small"] [button link="#" text="Small" color="purple" size="small"] [button link="#" text="Small" color="red" size="small"] [button link="#" text="Small" color="yellow" size="small"] [button link="#" text="Small" color="pink" size="small"] [button link="#" text="Small" color="maroon" size="small"] [button link="#" text="Small" color="light-gray" size="small"] [button link="#" text="Small" color="dark-gray" size="small"] [button link="#" text="Small" color="black" size="small"]
Mini
[button link="#" text="Mini" color="light-blue" size="mini"] [button link="#" text="Mini" color="dark-blue" size="mini"] [button link="#" text="Mini" color="orange" size="mini"] [button link="#" text="Mini" color="green" size="mini"] [button link="#" text="Mini" color="teal" size="mini"] [button link="#" text="Mini" color="purple" size="mini"] [button link="#" text="Mini" color="red" size="mini"] [button link="#" text="Mini" color="yellow" size="mini"] [button link="#" text="Mini" color="pink" size="mini"] [button link="#" text="Mini" color="maroon" size="mini"] [button link="#" text="Mini" color="light-gray" size="mini"] [button link="#" text="Mini" color="dark-gray" size="mini"] [button link="#" text="Mini" color="black" size="mini"]
[row][column span="12"]
Columns
Span 12
Best is built on a responsive 12 column grid that allows you to deliver your content to users effortlessly no matter what device they happen to be viewing your site on. But we didn’t want to keep all of that grid goodness to ourselves, so we’ve converted it into easy to use shortcodes for you to have on hand anytime. All you have to do is wrap your columns in a [row] shortcode, and then place your [column] shortcodes inside that and pass in an attribute to tell them how long to span. With just a little bit of math (that doesn’t scare you, right?), you’ll be on your way to creating attractive, complex layouts in no time at all!
[/column][/row][row][column span="6"]
Span 6
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="6"]
Span 6
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][/row][row][column span="4"]
Span 4
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="4"]
Span 4
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="4"]
Span 4
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][/row][row][column span="3"]
Span 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="3"]
Span 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="3"]
Span 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="3"]
Span 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][/row][row][column span="2"]
Span 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="2"]
Span 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="2"]
Span 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="2"]
Span 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="2"]
Span 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][column span="2"]
Span 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[/column][/row]
[row][column span="4"]
Social Buttons
There’s no denying the fact that social media is everywhere. It feels like a new network pops up everyday that caters to a specific niche or serves an even more specific purpose than all the other networks before it. Whatever the case may be, make sure that your visitors know where you’re plugged in by utilizing Best’s handy social media icons. Using the [social] shortcode, all you have to do is type in what network you use, a link, and whether or not you want your text to display. What’s really cool about these little guys is the fact that they’re creating using only CSS3 and a custom font for each icon, so they scale beautifully no matter what device you’re viewing your site on!
[/column][column span="8"]
The Popular Kids
Sign in with Facebook Sign in with Google+ Sign in with Twitter Sign in with LinkedIn
The Cool Kids
Sync with Dropbox Clip to Evernote Follow me on Forrst Sign in with Dribbble Sign in to CloudApp Fork me on Github Play on Spotify Read It Later Follow me on Soundcloud Follow me on Tumblr Read on Smashing Magazine Available on iTunes Available on the App Store Available on the Mac App Store Available on Android Market Follow me on Pinterest Follow me on Quora Attend on Lanyrd
The Not-So-Cool but Have-To-Be Invited Kids
Pay with Paypal Sign in with Amazon Call me on Skype Sign in with Last.fm Write a review on Yelp Check in with foursquare Influence with Klout
The Older (but Solid) Kids
View on Wikipedia Sign in with Disqus Sign in with IntenseDebate Sign in with Google Sign in with Gmail Upload to Vimeo Read more on Scribd Subscribe on YouTube Sign in with WordPress Sign in with Songkick Sign in with Posterous Sign in with Eventbrite Tip with Flattr Follow me on Plancast
The Kids That Kinda Smell but Some People Don’t Mind
Submit resume for CEO Download Internet Explorer 5 Report bugs with Meetup.com Learn how-to-use OpenID Register now for HTML6 Chat with your parents
The Kids That Nobody Normally Notices
Sign in as guest View Creative Commons Licence Subscribe to RSS Add to Chrome
Kids By Request
Join me on Weibo Sign in with Plurk Play on Grooveshark Post on Blogger Sign in with Viadeo Subscribe to this Podcast View Portfolio on 500px Bitcoin accepted here View Portfolio on 99Designs Bookmark with Pinboard Stumble! Find me on Myspace Sign in with Windows Live Find Events with Eventful
Icon Versions of the Above
Sign in with Facebook Sign in with Google+ Sign in with Twitter Sign in with Google Sign in with LinkedIn Pay with Paypal Sign in with Amazon Sync with Dropbox Clip to Evernote Call me on Skype Sign in as guest Play on Spotify Sign in with Last.fm Sign in with Songkick Follow me on Forrst Sign in with Dribbble Sign in to CloudApp Fork me on Github Follow me on Pinterest Follow me on Quora Bookmark with Pinboard Attend on Lanyrd Download on iTunes Download on Android Sign in with Disqus Sign in with Yahoo Upload to Vimeo Add to Chrome Get a new browser Made from HTML5 Read It Later Read more on Scribd View on Wikipedia Tip with Flattr Follow me on Tumblr Subscribe to my Posterous Check in with Gowalla Check in with foursquare Write a review on Yelp Follow me on Soundcloud Read on Smashing Magazine Sign in with WordPress Sign in with IntenseDebate Sign in with OpenID Sign in with Gmail Sign in with Eventbrite Sign in with Meetup.com Sign in with AIM Follow me on Plancast Subscribe on YouTube Available on the Mac App Store View Creative Commons Licence Subscribe to RSS Follow me on Weibo Follow me on Plurk Follow me on Grooveshark Post on Blogger Sign in with Viadeo Subscribe to this Podcast View Portfolio on 500px Bitcoin accepted here View Portfolio on 99Designs Stumble! Call a phone Send a message Add to calendar Download on iTunes Find me on Myspace Sign in with Windows Live Find Events with Eventful Influence with Klout[/column][/row]
[row][column span="4"]
Video Embeds
Now what would a responsive site be if it didn’t handle videos properly as well? Embedding videos into responsive designs is a practice that is notoriously difficult to accomplish. However, with the help of a little jQuery magic, Best takes care of all the heavy-lifting! Simply utilize the [youtube] or [vimeo] shortcodes to display your favorite videos, all you have to do is grab the embed URL.
[/column][column span="8"]
Responsive Youtube Embed
Please Enter Youtube ID or Youtube URL as
Responsive Vimeo Embed
[vimeo src="http://player.vimeo.com/video/42049554?title=0&byline=0&portrait=0&color=00ff00"][/column][/row]
[row][column span="4"]
Alerts
Sometimes you need to grab your visitors’ attention, and not always for the same reason. Best comes with four different alert boxes for you to use in a variety of situations. Implementing them is as easy as using the [alert] shortcode and telling it what kind to display. Viola!
[/column][column span="8"]
Stop right there, because if you go any further things might not get pretty! Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
[alert type="danger"]Oh snap!
Looks like you didn’t stop when we told you to, try fixing a few things and letting us know when you’re done! Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.[/alert][alert type="success"]Yaysies!
You did great! No need to do anything over. Instead, we’d just like to tell you how awesome you are, but you already knew that, didn’t you?[/alert][alert type="info"]More Info
Keep moving along if you wish, nothing to see here, simply some extra information that might help you out a bit if you feel so inclined to read it.[/alert][/column][/row]