I like to create a library of styles which I can reuse across my websites. In this article I'm going to post the library I've created.

By creating a standard library for all my sites, I'm able to rapidly develop web sites and reduce repetitive work. A few years ago we used to a "Base" css file, I've since modified this strategy.

Before I go any further I'd like to remind you that I may be way off on how well this works. The intent of this article is to inspire conversation between developers to help find the best and fastest way of getting a website online.

My library file is made up of all classes which store various styles for specific elements on a page.

Here are a few examples to try and make this clear.

/** float left **/
.left {float:left;}

/** message box **/
.msgbox {
    display:block; 
    border-top:1px solid blue;
    border-bottom:1px solid blue;
    background-color:aqua; 
    color:white;
}

You will notice the above classes will not effect your html. The down side is if you are not familiar with the classes in your library, you may break some styles by accidentally adding a class which exists already. Library is high enough up the order that you can easily over write the library styles in the future.

I recommend building your own library from scratch so you are familiar with the available classes, of course you are welcome to use mine for inspiration.

Organisation

Organisation is the most important for your style sheet. We want the sheet easy for others to read when we collaborate on projects. It is best to order your Library style sheet alphabetically by class name, this way it is easy to navigate.

Modifying Library

I'm still working on this strategy. I'd like to be able to update the library.css file with newer versions. This means I'd have to put my modifications in yet another file. In later posts I'll explain how I use php to compress and merge files into one sheet, but it still seems like a waste to have so many styles.

If you have any idea's I'd love to hear them.

Nick Yeoman's Library Style Sheet

/** 
* Author: Nick Yeoman
* library.css
* v1.0
* Last Updated July 7, 2009
* Documentation: http://www.nickyeoman.com/blog/css/50-css-library
**/

.container {width:950px;margin:0 auto;}

.fullwidth{width:100%}

.hide {display:none;}

.highlight {background-color:yellow;}

.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}

.left{float:left}

/*
* msg
* We want all messages to appear similar
* Only colours and/or image to show error level
*/

.msg-info, 
.msg-error, 
.msg-notice,
.msg-success{
	margin-top:15px;
	text-align: left;
	padding: 5px 20px 5px 45px;
	color:black;
}
	
.msg-info {}
	
.msg-error {
	background: #fff6bf url('images/error.gif') center no-repeat;
	border-top: 2px solid #cc553c;
	border-bottom: 2px solid #cc553c;
}
	
.msg-notice {
	background: #fff6bf url('images/notice.gif') center no-repeat;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
}
	
.msg-success {}

/* end msg */

.right{float:right}

.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}

Reference

Comments

Show/Hide Comment form