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