Using Blueprint CSS Plugins, Page 2
Using Blueprint CSS Plugins
Blueprint CSS is packaged with a few interesting plugins, among them the Buttons plugin, which makes it very easy to create eye-appealing buttons. To use the Buttons plugin, open the
screen.css style sheet located in your project's
blueprint directory, and add the following line to the top:
Next, open your file explorer and navigate to the
buttons directory, found in your project's'
blueprint/plugins directory. There you'll find a directory named
icons which contains three sample icons,
tick.png. You're free to add as many other icons as you please. We'll use the
key.png icon to create a slick button using the
a HTML element:
<a class="button" href="../../../account/"> <img src="css/blueprint/plugins/buttons/icons/key.png" alt="" />Account Profile </a>
The rendered button is presented in Figure 3.
Figure 3. Creating Buttons with the Blueprint CSS Buttons Plugin
The Blueprint CSS framework presents a fantastic solution not only for the design-challenged segment of the Web development population, but also for designers of all levels of capability. Are you doing anything interesting with Blueprint CSS or any of the other awesome CSS frameworks? Tell us about it in the comments!
About the Author
Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.