Guidelines for Developing Your Own CSS Framework

Quite a few CSS frameworks 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 significant amount of time and effort. This article will provide you with guidelines & carefully selected resources to assist you during this process.

Before You Begin

First try few popular CSS frameworks or at-least go through the documentation to see what they offers:

You may also want to check Definitive List of CSS Frameworks.

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:

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. You can also take a quick look at:

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More




Reader Comments

6 Responses to “Guidelines for Developing Your Own CSS Framework”
  1. FatGeek says:

    Dude, I knew this is how you do it. But thanks for providing the plan – some good tips(bookmarked it – wish me good luck). Great resources too…

  2. thanks for the inspiration! i’m creating a css ‘framework’ for me personally right now, so i can use all the input i can get.

  3. Montoya says:

    It’s very good to see what’s out there and try all the different options for CSS frameworks. Blueprint, for example, has been developed by a community of CSS experts and contains a lot of heavily tested & sound ideas. At the very least, you should always start with a good reset that will eliminate the discrepancies across browsers so you can hit the ground running.

  4. Thanks.

    Just one little note; you may want to combine all the css files in one file. That’s because of performance issues. X different css files mean X http requests. So minimum is better.

  5. David Dorey says:

    You aren’t wrong about the time it takes to develop your own framework. I will be admiring your work for while before I can find the time to create my own.

Leave Comment


Stay Updated, Subscribe to RSS Feed




Sponsored Links