Quite a few have been around for a while, but most web developers avoid using them. Instead most veteran developers prefer to create their own CSS framework, which provide benefits of a personalized solution and minimizes negative aspects of depending on a third party solution.
Although CSS frameworks are meant to enable rapid web development; developing your own comprehensive CSS framework may require sufficient amount of time and effort. This article will provide you with guidelines & carefully selected resources to assist you in the entire process.
Before You Begin
First try few popular CSS frameworks or at-least go through the documentation to see what they offers:
Why Build Your Own CSS Framework?
CSS plays a vital role in modern web design, and it is not really too difficult to learn. Then why take a shortcut and compromise on something that will benefit you for years to come. Here are some specific reasons/benefits:
- More Productive:
You will be able to use your own framework more efficiently. - Better Design Compatibility:
Your designs won’t depend on how a framework is developed, your framework will automatically support your design preferences. - Fewer Headaches:
You won’t inherit bugs or flaws created by someone else. Of course your own CSS framework may have bugs or flaws, but you will be in a better position to fix them. - Greater Flexibility:
You will be able to modify it easily whenever your design preferences & requirements change. - Additional Benefit:
You won’t spend your valuable time trying to learn the framework, instead your time will be invested in learning something more precious: CSS.
Let’s Begin - Divide & Rule
First of all reject the idea that developing your own CSS framework is going to be complex task. CSS framework is simply a collection of CSS code that you use over and over again in your projects. The process of organizing and improving the quality and usefulness of this code is which requires additional effort, skill and time.
Let’s take a look at what type of CSS code is repeatedly used in our projects. We always use CSS for layout, typography, forms and commonly used elements like lists, images, etc. We also use CSS to make sure that overall look and feel is identical on all web browsers. Furthermore some of us may have favorite components (e.g., menu, gallery, slider, etc) that we use over and over again in our projects; including their style in our framework also makes sense.
In order to easily maintain each part of your framework, divide it into multiple CSS files, for example:
- reset.css
- base.css
- typography.css
- layout.css
- form.css
- table.css
- browser.css
- print.css
The above list is just a recommendation; you can divide your framework into any number of files. However in order to gain maximum benefit from your CSS framework you must ensure that:
- You have thoroughly tested the output on all major browser
- You have followed CSS best practices:
- Code is clean, well structured and appropriately documented
- Used minimum number of Classes and IDs
- It has been tested for errors and has been validated by
Solid Foundation with CSS Reset, Base & Typography
Different browsers have different default styling (margin, padding, border, outline, etc) of various elements. A reset file removes and neutralizes the inconsistent default styling and ensures that all major browsers render your site identically. Here are two most popular CSS resets that you may consider using in your own CSS framework:
After CSS reset, the next logical step is to setup your own base that applies a consistent default style across all major browsers. This could be done in a separate file called base.css or along with your reset file. Here are some resources to assist you in setting up your base:
Typography varies with each design and at first consideration doesn’t seem like a sensible idea to include it in a CSS framework. But having a typography file that covers all the basics is a real timesaver. Over a period of time you may even end up having multiple typography files with more detailed styling for various font sets. Here are some resources and tools to get you started:
Layout(s) – In Search of the Holy Grail
Layout is the trickiest and probably the most controversial part of a CSS framework. Just like typography, layout varies with each design and you should carefully choose whether or not you want to make it a part of your CSS framework. You can even consider the possibility of having more than one layout file in your framework. Here is a list of resources that may provide further assistance:
Forms & Tables – Why Not?
Both Forms & Tables could be covered in your base.css file. But having additional multiple templates for each at your disposal will add great value to your designs. Take a look at these resources before making a final decision:
Browser Specific CSS
Unfortunately there are many occasions when we need to write some browser specific CSS workarounds. But CSS hacks or workarounds may produce errors during CSS validation. To overcome this problem you should include browser.css in your HTML file using conditional tags. Here are some resources for your reference:
Printing with Style
A separate style sheet for printer will enormously improve usability of your websites, especially for pages with a lot of content. Here are few resources for extra guidance:
What Else You Can Do?
You can do a lot more; this is the main idea behind having your own CSS framework. You can create as many abstractions as you like, such as:
- component.css
This may include CSS for commonly used components like drop-down menu, tooltips, etc - application.css
This could have multiple versions for each type of application that you design for frequently. For example: WordPress, Drupal, BlogEngine.Net, etc
Finally – Using Your Own CSS Framework
Using your framework is simply a matter of including all the required files in your HTML. But including several CSS files means unnecessary additional HTTP requests. To avoid this you should first merge all the files together (with the exception of browser.css & print.css files) and then include this new CSS file in your project.
In order to keep this article short, only a limited number of resources have been provided; so feel free to search for better alternatives and share with rest of us in your comments.