CSS Frameworks + CSS Reset: Design From Scratch


You don’t have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you’re starting to work with, at some point you have to define classes and IDs you’ve already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost “perfect” scratch. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a scratch, you need to make sure it is really bulletproof — besides, if the stylesheet also sets up optimal typographic rules and basic form styling you manage to kill two birds with one stone.

And this is where CSS Frameworks and CSS Reset are becoming important. Using them, you can get yourself a perfect default-stylesheet and markup, save your time and ensure the best quality of your code from the very beginning. But what are CSS Frameworks? And why do you need the Reset for?

Let’s take a look at the idea behind CSS Frameworks, their advantages and disadvantages, most popular CSS frameworks and dozens of default-stylesheets you can use designing a new web-site from scratch.

  • This article partially covers tools and techniques which use Grids. You might want to make sure you get the idea behind the grid-based design approach — from our article Designing With Grid-Based Approach1.
  • You can find hundreds of CSS templates in our article Free CSS Layouts and Templates2.
  • Please notice that this article takes a closer look at CSS Frameworks, not at extensive server-side programming frameworks such as CakePHP3 and also not at Web Development Environments such as Coda4 or Dreamweaver5.

What is a CSS Framework?

  • A framework is a basic (usually abstract) conceptual structure which you can use as a “scratch” for your web-projects. For instance, instead of defining global reset, consistent baseline, typographic rules or basic styles for forms over and over again — every time you work on a new project — you can prepare a default-style once and reuse it in all your future projects. This is what you call a CSS Framework.
  • CSS frameworks don’t have to be complex or large, they may contain a set of simple CSS-styles such as
    • typography.css for basic typographic rules,
    • grid.css for grid-based layouts or
    • layout.css for general layouts,
    • form.css for basic form styling,
    • general.css for further general rules

    and so on. In your code segmentation you can also go further, for instance: structure, typography, design presentation, specialist sections (e.g. menus, navigation), print, mobile web, tweaks (mostly old style browser hacks), browser specific workarounds (via IE conditional statement). “On the whole code segmentation in frameworks is handy to work with, but it can add some real load to a server with the extra http request per page view.” [Treading Lightly With CSS Frameworks6, by Gary Barber]

  • “[Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” [Framework For Designers7, by Jeff Croft]

Advantages of CSS Frameworks

  • You increase your productivity and avoid common mistakes.
    If you develop several sites of the similar nature, an abstraction of CSS code can dramatically speed up your productivity, help you to avoid common mistakes and simplify the management of CSS code.
  • You normalize your code/class base.
    You have a common “default” CSS-code and (X)HTML-markup, so you always use the same IDs and class names in your projects. Code consistency throughout a number of projects makes it’s easier for you to maintain a web-site without digging into the source code of every project you’ve ever worked on — to understand how you’ve actually built the web-site.
  • You have a better workflow within a team.
    If a CSS-framework is well documented, it can be used within a team as a common ground-up; thus you can avoid misunderstandings and ensure an optimal workflow. The latter results in avoiding mistakes and helps you to meet deadlines without compromising on product quality and without overtime costs.
  • You gain an optimal browser-compatibility.
    Since your CSS-framework is “bulletproof”, you don’t have to worry about browser-compatibility issues and can start coding right away.
  • You have a clean, well-structured and complete code.
    CSS Frameworks provide you with a well thought-out foundation for your sites; using them you have the basic styling of all html-elements you’ll ever need to style from the very beginning of your projects. Have you ever forgotten about code or abbr? That’s the point.

Disadvantages of CSS Frameworks

  • You need time to fully understand the framework.
    “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks98]
  • You need a close familiarity with your code’s architecture.
    Using external CSS frameworks, you still need a profound understanding of your code. You need to know exactly how your framework is actually built. “By building a site from the ground up, you gain a knowledge of your site’s architecture that can’t be learned through any study or documentation.” [Why I don’t use frameworks98]
  • You might inherit someone’s bugs or mistakes.
    If you use external CSS Frameworks you might get in trouble fixing someone else’s bugs which is far more time-consuming than fixing your own bugs.
  • You develop sites upon a framework, not upon the solid knowledge of CSS.
    “A big problem with frameworks is when up and coming developers attach themselves to a framework as opposed to the underlying code itself. The knowledge gained in this case surrounds a specific framework, which severely limits the developer.” [Please Do Not Use CSS Frameworks121110, by Jonathan Christopher]
  • You get a bloated source code.
    “Whether it be in a server side language framework or JavaScript library, there is often a large percentage of code that will never be executed. While not a major issue server side, this can greatly degrade the performance of a client side framework such as a JavaScript library.” [Please Do Not Use CSS Frameworks121110, by Jonathan Christopher]
  • CSS can not be framed semantically.
    “CSS and (X)HTML go hand in hand. (X)HTML is a language semantic in nature, which is impossible to wrap up in the style of a framework. Each and every project is unique in and of itself, right down to the document structure, classes, and ids. A CSS framework passively removes a great majority of semantic value from the markup of a document and, in my opinion, should be avoided.” [Please Do Not Use CSS Frameworks121110, by Jonathan Christopher]
  • Ignoring the uniqueness of your projects.
    Designs should be based upon the content, not upon a standard template you use over and over again.

CSS Frameworks

YAML (Yet Another Multicolumn Layout)13

YAML (Yet Another Multicolumn Layout)14

Dirk Jesse’s extensive (X)HTML/CSS Framework offers the whole bunch of default-templates for a number of simple or more complex web-projects. YAML is based on web standards and supports every modern web browser. All Internet Explorer’s major rendering bugs are countered. YAML fully supports all IE versions from 5.x/Win to 7.0.

Apart from a number of standard-conform layouts the framework also offers a debugging stylesheet, print stylesheet as well as various robust tools for web-development in YAML. All CSS components of the framework as well as the various layout methods are thoroughly documented15 in both English and German, supplemented by numerous examples.

YAML Builder

You can also use a YAML Builder16 to develop your layout visually – in your web-browser. You can choose a Doctype, basic layout elements (#header, #footer, …), the number of content columns as well as preferred column order and set the layout and column widths. You can also drag & drop and nest both sub-templates and dummy content, display and output the complete code (XTHML markup and CSS) and switch between draft mode and preview of the finished layout.



The Blueprint CSS framework, created by Norwegian tech student Olav Frihagen Bjørkøy, is a very20 promising21 foundation for developing typographic grids using CSS. The framework offers an easily customizable grid, sensible typography, a typographic baseline and a stylesheet for printing. It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. The latter isn’t always true22.

Besides, you can also use the Blueprint Grid CSS Generator23 to generate more flexible versions of Blueprint’s templates. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint CSS Framework – a new “to-become-standard” in grid-based design approach.


Yahoo! UI Library CSS Foundation25


Yahoo! UI Library presents a set of CSS frameworks: the core YUI CSS foundation includes the Reset CSS27, Base CSS28, Fonts CSS29, and Grids CSS30 packages.

While Reset CSS removes and neutralizes the inconsistent default styling of HTML elements, Base CSS applies a consistent style foundation for common HTML elements across A-grade browsers.

Fonts CSS offers cross-browser typographical normalization and control; the framework provides consistent font sizing and line-height, supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes and works in both Quirks Mode and Standards Mode.

Grids CSS delivers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. The framework supports easy customization of the width for fixed-width layouts; it also supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. YUI also offers The YUI Grids Builder31 — a simple interface for Grids customization.

You should be aware that these frameworks are often criticized32 for bloating the code with non-semantic markup and generating too many unnecessary classes, IDs and div-containers in CSS. Yahoo! UI Library also provides a detailed documentation with numerous examples, tutorials, cheat sheets, templates and tools.

CSS Global Reset (CSS Baseline)

  • Global Reset is needed to ensure the more or less identical cross-browser presentation of your web-sites. By default different browsers use different values for margin, padding or line-height. Global Reset makes sure all (or probably most) browsers render sites identically.
  • * { margin: 0; padding: 0; } is a bad practice.
    “Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.” [CSS Techniques I Use All The Time33 by Christian Montoya]
  • Tripoli34
    Tripoli is “a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.”A set of default-CSS-files is supposed to give you a profound foundation for cross-browser compatible CSS-based designs. All default-values – including dozens of elements – tables, lists, typography, but also headers (h1 – h6), abbreviations, citations, quotes and forms are selected to enable an optimal legibility and well-structured text presentation.

  • CSS Reset Reloaded36 by Eric Meyer
    A “reset” or “baseline” set of styles, not based on the universal selector. As Meyer says, “the styles should list all the actual elements to be reset and exactly how they should be reset.”
  • Yahoo! UI Library: Reset CSS37
    YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.
  • CSS Global Styles Reset38 by Kyle Neath
    A simple CSS reset with some additional classes for better debugging.
  • CSS Global Reset39 by Christian Montoyacss40
    “It’s far better to have a complete list of default settings to apply from the beginning that targets the specific browser inconsistencies.”
  • CSS Global Reset41 by Mike Rundle (currently unavailable)
  • Master Stylesheet42
    This default-stylesheet takes some typographic rules into consideration, such as the spacing between heading tags, paragraphs, and blockquote elements.

CSS: Basic Styling

Develop Your Own CSS Frameworks!

Keep your CSS frameworks as abstract as possible. Usually the global reset style and basic formatting rules are a sound compromise which will give you a though-out starting point and won’t bound you to the rigid structure of the framework.

Developing your own default-styles, keep the numbers of classes, IDs and used html-elements to a minimum; keep the importance of semantic meaning of the classes in mind.

More ideas? Let us know — share your starting points and your knowledge in the comments!


  1. 1 http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  2. 2 http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/
  3. 3 http://www.cakephp.org/
  4. 4 http://www.panic.com/coda/
  5. 5 http://www.adobe.com/products/dreamweaver/
  6. 6 http://manwithnoblog.com/2007/09/09/treading-lightly-with-css-frameworks/
  7. 7 http://www.alistapart.com/articles/frameworksfordesigners
  8. 8 http://warpspire.com/features/css-frameworks/
  9. 9 http://warpspire.com/features/css-frameworks/
  10. 10 http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/
  11. 11 http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/
  12. 12 http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/
  13. 13 http://www.yaml.de/en/home.html
  14. 14 http://www.yaml.de/en/home.html
  15. 15 http://www.yaml.de/en/documentation.html
  16. 16 http://builder.yaml.de/
  17. 17 http://code.google.com/p/blueprintcss/
  18. 18 http://code.google.com/p/blueprintcss/
  19. 19 http://code.google.com/p/blueprintcss/
  20. 20 http://www.subtraction.com/archives/2007/0807_the_framewor.php
  21. 21 http://www.markboulton.co.uk/journal/comments/blueprint_a_css_framework/
  22. 22 http://www.monc.se/tripoli/
  23. 23 http://kematzy.com/blueprint-generator/
  24. 24 http://kematzy.com/blueprint-generator/
  25. 25 http://developer.yahoo.com/yui/grids/
  26. 26 http://developer.yahoo.com/yui/grids/
  27. 27 http://developer.yahoo.com/yui/reset/
  28. 28 http://developer.yahoo.com/yui/base/
  29. 29 http://developer.yahoo.com/yui/fonts/
  30. 30 http://developer.yahoo.com/yui/grids/
  31. 31 http://developer.yahoo.com/yui/grids/builder/
  32. 32 http://www.elliotswan.com/2006/05/10/yui-grids-css-framework-considered-harmful/
  33. 33 http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
  34. 34 http://monc.se/tripoli/
  35. 35 http://monc.se/tripoli/
  36. 36 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  37. 37 http://developer.yahoo.com/yui/reset/
  38. 38 http://warpspire.com/features/css-frameworks/
  39. 39 http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
  40. 40 http://lab.christianmontoya.com/initial-css/initial.css
  41. 41 http://www.businesslogs.com/blog_design/my_5_css_tips.php
  42. 42 http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/
  43. 43 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/
  44. 44 http://24ways.org/2006/compose-to-a-vertical-rhythm
  45. 45 http://www.darrenhoyt.com/2007/05/12/baseline-stylesheets/
  46. 46 http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
  47. 47 http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1


    Iove to read this.

  2. 52

    I think CSS frameworks can be great for beginners, but for professionals they are just “too much” and too restrictive. (Although they are still good learning material.)
    That is why I wrote one myself: CiSSi. (It is more a “master template” than a “framework”, really.)

  3. 103

    Juan Manuel Lucero

    April 14, 2008 4:38 am

    What about 960gs?
    Seems very promising too!
    960 Grid System
    It has some PDF’s to print too.

  4. 154

    Yet another framework: BlueTripCSS Link

  5. 205

    I think it’s a nice way to make all browsers understand your design the same way. Personnaly, I use typography from blue print css to get a clean design for all basic html tags then I make one of my own because I’m not used to design websites with grids yet.

  6. 256

    Not my cup of tea. I neither do templates nor web 2.0 simple-style-sites, each one of my design’s pretty different and I consider coding a site from zero as pro approach.

  7. 307

    Two Rockin’ CSS Grids mashed into one framework – 960.gs & Blueprint… http://rant.cc/TwP – 960.gs has both 12-column or 16-column grids ready to go. While Blueprint has more comprehensive element styles, a 18px baseline grid, and a few additional settings (e.g. the “pull” class to break outside the grid). So, I’ve taken the elements that I like best about each css framework and mashed them together into one.

  8. 358

    I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.

    Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.

    So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.

  9. 409

    very very useful articles thanks …

  10. 460

    Right now a new project has started and I compared a lot of (maybe not all) frameworks, to see wich fits my needs the most. But unfortunately none of them does fits my special needs enough to be my choice. So I have to do it by my slef again, but I’m ok with that.

    I’m not shure what to think about those resets.
    Sure, as seen above “Why reset? Set instead.”
    Reseting is too much…
    No reset messes everthing up…

    So I use to start with the reset und if a selector needs to be set I move it to my “setstyle”.
    So the reset only fixes the unused/unstyled/unset parts.

    And for now I’m doin’ well with that.

  11. 511

    Inspiring and creative article

  12. 562


  13. 613
  14. 664

    This is completely ridiculous. There isn’t such a thing as a CSS framework. You have no configuration files and not way to interject any process.

    What we have is copy&paste. And copy pasting a few strings of text does not make a framework. Plz!!!

  15. 715

    Mushex Antaranian

    February 12, 2009 6:13 pm

    thanks man, it’s really useful..
    and what about jQuery UI (Link )

  16. 766

    I like the idea of a reset css, I don’t know how fond I am of the css frameworks in general. I end up putting (with blueprint css) class=”span-10″
    How is that really any different than style=”width:400px” or even width=”400″ for that matter.

    Don’t get me wrong, I am not advocating the use of tables in layouts, rather I am saying that the point of css is to separate the data (html) from the presentation (stylesheet). A good css design should allow the designer to completely redo the design without ever needing to modify the html. Most of these frameworks don’t allow this. If you decide that you want to change the layout from a 66%/33% column layout to a 75%/25% layout then you have to modify the html. This goes against the whole purpose of css.

  17. 817

    Moataz El Wesimy

    April 13, 2009 1:32 am

    a very interesting one as well is Mechano Mechano CSS Framework

    give it a look, it is not a Copy / Paste code.

    the main idea behind Mechano or any other ” Good ” CSS Framework relies on the Designer or the UI Developer who is using the framework, it is only a tool that saves your time from writing the same code each time and keeps your layout bug free with minimum effort.

  18. 868

    Nice Tutorial.

  19. 919

    flexible framework Nivel Style

  20. 970

    There is also a small blueprint tutorial written in german.
    You can find it here: Link [www.cssguru.de]

  21. 1021

    Resets seemed cool to me at first but a major gripe of mine is the big mess of inherited css clogging up my firebug style panel when debugging. Anyone know how to remedy that?

  22. 1072

    ths for intro…

  23. 1123

    I used Blueprint CSS for a major website: the new CCA – Canadian Centre for Architecture. The site has a minimalist aesthetic with a lot of varying templates – over 18 basic configurations in all – that all adhere to the same basic grid – which is wrapped in a semi-liquid, multi-column layout. For the liquid elements of the site, I created my own solutions. But for most of the site BP was the obvious choice. For fixed width, pixel oriented layouts its great, and I wouldn’t characterize it as cluttered at all. As a professional with a lot of CSS experience on some very major sites, I’ve used multiple frameworks: YUI and BP, as well as my own custom CSS (which of course is required in every project, framework or no). Part of that means that if you find a framework cluttered, you un-clutter it a bit – its provided as is, its your responsibility, if you’re using it to clean if up if you see fit. Now, I’m going to go into a bit of a rant about frameworks here.

    To be honest, I find the whole idea that frameworks aren’t for professionals to be utter BS. YUI is developed by a major corporation that is a cornerstone of the net as we know it and is used by Yahoo on all of their sites… I doubt anyone here would consider them unprofessional. YUI is great by the way for liquid layouts – I used it on a very complicated (layout wise) site created for the Quebec government. Furthermore, BP has been used on many a major project, which presumably were all overseen by professionals like myself. As with any code, you must re-factor, and customize, and ultimately it should be minimized/compressed, but the idea that BP or YUI are not production ready is ludicrous. If you make the effort, either of these frameworks are more then flexible enough to handle just about any layout. To some extent, I think that the bias against frameworks boils down to arrogance. Face it, there are a million ways to skin a cat but speaking as a ‘pro’, there’s always a good chance someone else has figured out how to do it better, and by not acknowledging that you’re just shooting yourself in the foot. I could site a million examples of this, but I’ll just name a few from a different little world – JavaScript. How many ‘pros’ would care to try to reinvent all of the methods, objects and functions provided by: EXTJS, Mootools, JQuery?? The answer is probably zero. Sure, thousands of people patch, create modules, or customize all of the above (I have myself) but throw them out entirely because it seems some how more professional, no way! Oh yeah, and one more little example you might of heard of: Ruby on Rails! In my experience professionals use the tools that get the job done, and do not dogmatically adhere to only one approach. Just my opinion I guess, but one that I think is widely shared in other languages/technologies and ought to be more prevalent in CSS.

  24. 1174

    I totally agree with you. I work with CSS since a long time, and i think that the framework approach can be used in a very interesting way. There’s only place for improvements, and someone had to prepare the ground..

  25. 1225

    Umm, interesting, I cn consider myself a CSS-noob, I’ll try the BlueprintCSS framework, seems interesing.

    Will try!

  26. 1276

    RobotAyatollah got it right. A professional uses the best tool for the job giving the customer the best value for their money. To say that professionals don’t or shouldn’t use a framework is like telling a carpenter not to use an air nailer because you can do the same job from scratch, ie. use a hammer. Sometimes no doubt the good old hammer is called for. But it’s also clear there are many times the air nailer is the superior tool and should be used. The customer is nearly always only interested in getting the most for their money and if using a framework to get the job done quicker without paying a maintenance or performance penalty then it’s the right thing to do.

  27. 1327

    RobotAyatollah : I totally agree with you. As a new CSS developer I feel that some frameworks do an excellent work. Why people try to reinvent the wheel only to prove their are good, or professional enough?

    The final product and the result matters.

    And If myself as a new developer, manage to create a superb project with the help of a framework that it will take the same time as it will take for A PROFESSIONAL to build from scratch, then really who is the winner?

    By the way RobotAyatollah I love your work. Great stuff !!

  28. 1378

    Great thing,thank you :)

  29. 1429

    Can any one suggest me which one is easy and flexible framework ?

  30. 1480

    Nice article. thanks for sharing….

  31. 1531

    Nice artilce

  32. 1582

    …the web is the biggest farce for layout problems known to mankind.

  33. 1633

    …in fact alot of the layout issues known for web are to do with microsoft, they have a lot to answer for with regards web users and designers alike. If anything…microsoft do very little to help make the web move forward toward a standardised situation, but rather hinder the basics…also the fact that web browser developers can’t bash their heads together for once, goes some way to indicating what sort of organizations and personalities your up against…total joke!

  34. 1684

    Can we make our own theme for WordPress website ?… If yes than what types of web developing languages are necessary to make well SEO optimized Theme.

  35. 1735

    Layouts are a massive problem it seems now, how can we make a site look good on a computer and a mobile phone or tablet?

    Thanks for some of these tips.

  36. 1786

    Some of these are amazing, but at the moment im using rocketcss

  37. 1837

    I would suggest stop designing with tables


↑ Back to top