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:
@import 'plugins/buttons/screen.css';
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, cross.png
, key.png
, and 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
Conclusion
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.
Page 2 of 2
This article was originally published on August 4, 2011