CSS Frameworks + CSS Reset: Design From Scratch

Advertisement

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? Link

  • 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 Link

  • 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 Link

  • 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 Link

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.

Blueprint17

Blueprint18
Blueprint19

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.

24

Yahoo! UI Library CSS Foundation25

26

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) Link

  • 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.

    Tripoli35
  • 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 Link

Develop Your Own CSS Frameworks! Link

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!

Footnotes Link

  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.

Advertisement
  1. 1

    Thanx for providing nice article on this subject really loved it..

    1
  2. 2

    very informative article, bookmarked it, thanks.

    1
  3. 3

    Thanks for covering this topic! I am currently redesigning my blog, and this is a very timely article as I decide whether to use a framework or not in redesigning the site. :) But then, all your articles are simply smashing.

    0
  4. 4

    Here is another framework, Elements

    http://elements.projectdesigns.org

    1
  5. 5

    Oddly enough, I created my own framework beginning last year to make my work easier. It’s not as fancy or complete as some of those others, but it does have some very nice features that they don’t have (as far as I know, anyway). The main goal was to have a two column layout that was source reordered, while simultaneously centered and resizable. Need to update it though.
    Perfect Layout

    0
  6. 6

    Jonathan Christopher

    September 22, 2007 12:10 am

    I just wanted to note, as an additional reference, for your very comprehensive coverage, that I’ve written an additional piece regarding the semantics issue that has been brought up in this ongoing discussion.

    There are some great comment threads surrounding CSS frameworks, with a lot of very intelligent arguments coming from both sides.

    3
  7. 7

    Great article – thx a ton!

    1
  8. 8

    I feel like:

    CSS Reset Reloaded by Eric Meyer
    and
    font-size:62.5%; by Richard Rutter

    is all I need to get started.

    1
  9. 9

    Over the years I have created many CSS files and through that have built up a vast library of templates. My main CSS file is always basic styles etc. The next will always be more specific settings. I believe that by dividing the files up between basic and advanced helps keep you more organized.

    1
  10. 10

    I’m using Blueprint CSS along with the Django Framework and some filters for advanced typography on a german site for life hacks.

    It’s so beautiful to read, but you have to remember, the CSS will only do part of it and not the whole job.

    0
  11. 11

    I agree with Matt (#4). I used Eric Meyer’s reset sheet and changed the font-size to 62.5% and everything works perfectly.

    0
  12. 12

    I recommend everyone to avoid using css framework. Any website should have its own css files, instead of generic ones. The reset or generic css files from Eric Meyer or the one from Tripoli worth a look. I recommend these css files for content layout only, not the template structure…

    0
  13. 13

    I am currently developing my own CSS framework. I think it is much more important to do that then use someone else’s as it demonstrates your capabilities along with ensuring a strong knowledge of the language (in this case CSS).

    0
  14. 14

    I would say frameworks are great if you have the time to learn them and you are already familiar with the CSS code. If you are somebody who wants to try to learn it all with the quick framework method, you won’t be able to troubleshoot.

    I think the best way to go about it is to develop your own framework – which is what people end up doing over time anyways.

    Good article.

    0
  15. 15

    Nice article. First I saw it on 24ways.org but not so well explained. 2 thumbs-up

    0
  16. 16

    Well-researched article, thank you!

    However, you’ve missed ESWAT.

    0
  17. 17

    Great article! It’s great to see an honest open minded article on this topic. I have spent a great deal of time learning CSS and find these frameworks a great way to produce sites that work out of the box and deliver product to the client in a more efficient/quicker manner.

    We can now concentrate on design and not browser bugs!

    0
  18. 18

    I was not aware that CSS Frameworks existed. I have bookmarked this article and I will definitely refer to it in the future. Thanks!

    0
  19. 19

    Just in time for me with this one. I was just thinking the other day as I was developing a site, that I need to develop a css framework, but you provided it here for me. thanks

    0
  20. 20

    Great article, as usual. I’ve been giving a lot of thought to using frameworks and have spent some time with Blueprint and YUI. There’s some good work going on in the field and I have taken some of the ideas and incorporated them into my work.

    I think that instead of making a one size fits all framework, I’m more inclined to build a library of reusable text and layout styles that I can plug and play into a site.

    It starts with a reset modeled on Eric Meyer’s then a standard HTML element set of styles. I’ve been using the List-a-matic menu conventions for my navigation and have been saving some layout patterns with consistent naming of id’s and classes. The patterns are installed in my editor’s clippings library and ready to include with a few keystrokes. Common IE bug fixes are in their own library and ready to include.

    It certainly takes longer to build your own library than to learn how to use a framework but doing so brings the advantages of reusability and completeness and avoids the bloat of unused classes that a framework needs to include. It’s a work in progress that began with a site I built a year ago and have added to with each new design. So I’m not sitting down and trying to build a library but saving the best parts of sites as I go.

    0
  21. 21

    blueprintcss is a very promising framework

    -1
  22. 22

    Global resets and font-size 62.5% is where I always begin.
    Everything else is the fun part!

    Great article none-the-less.

    0
  23. 23

    What a coincidence! I just thought of developing my own framework before going to bed last night…and here I am reading this article! What are the odds of that happening?

    Thanks! At least now I know it’s called “frameworks” and although you gave a lot of predeveloped frameworrks to begin with, I’d still prefer to make my own.

    0
  24. 24

    another awesome article. Thanks guys.

    1
  25. 25

    I’ve been thinking about frame works recently and how to create a typography style sheet where you would only need to change the font-size, line-height and margins once (on the body element) and all subsequent elements would cascade to maintain the vertical rhythm.

    I set my line-height in pixels on the body element and it resized along with the font-size in Firefox!

    I’m unsure as to the next steps though…

    0
  26. 26

    Jean-Philippe Encausse

    September 24, 2007 9:53 pm

    Hi !

    Does any body know a serious website that list naming convention for css classes/ids ? In a large scope:

    – For layout: #Wrapper, #page, #column
    – For look: .colored, .float,
    – For …

    I’m not exactly talking about CSS Framework, the goal behind this is to design a generic part of a web site with a kind of css “contract” for other developers.

    Example ?
    – Login form of application
    – Facebook layouts
    – Generic poll design
    – …

    Regards,
    Jp

    0
  27. 27

    Further to my last comment, if you specify the margin-bottom in ems (say, 1.5) and then set margin-bottom to inherit on your headings and paragraphs, it should maintain consistent vertical rhythm.

    Working in Firefox.

    0
  28. 28

    “Assuming use of additional style sheets, these “reset” or “undo” style sheets are rarely necessary, and the redundancy created is probably neither wise nor professional”, may I even cite a recent UA CSS post … CSS frameworks and CSS “resets” may be seen useful in certain cases, but of course, they’re never an efficient solution (or even “the best”). Which might make them a real taboo anyway …

    However, nice roundup for everyone interested in the matter.

    0
  29. 29

    It seems like a lot of designer’s forget about print media these days. It would be nice for example, to print these articles without the comments, or perhaps hide things that don’t make sense on the printed page (e.g. navigation). Just a thought…

    0
  30. 30

    Nice post, too many tools to choose from 0_o

    0
  31. 31

    Oh forgot to mention NICE new layout! :)

    0
  32. 32

    You can also check out Wireframe which was developed from Blueprint and is moving in a new direction based on every new interface I develop with it.

    Basic improvements to Blueprint is the reduction of code bloat, fully customised grid settings, classes to deal with horizontal alignment issues(particularly in forms), improved grid structure to deal with graphic design assests and a class/es to id converter.

    0
  33. 33

    My company have a dozen of web designers who design websites with tables for layout. I was discourage with the way the code was made out there. The codes were so crappy, damn it !. I’ve decided to try all the CSS frameworks available on the net to make them available in my company and then provide a consistent look across all the website we would be making. Unfortunately, all the framework, I’ve tried break the table design. Some of them were horrible in display.

    I’m now sticking to Eric Meyer only global reset CSS with some added CSS to make it pertain to my company…

    0
  34. 34

    It seems like a lot of designer’s forget about print media these days. It would be nice for example, to print these articles without the comments, or perhaps hide things that don’t make sense on the printed page (e.g. navigation). Just a thought…

    0
  35. 35

    Hi, I’ve done a french translation of this greaaaat article on my blog! http://www.css4design.com/blog/index.php/2007/10/01/128-frameworks-css-reset-css-design-from-scratch
    Thanks again for the cool content you provide.

    0
  36. 36

    Is there any CSS framework for web designers that design with tables?

    0
  37. 37

    @shane If you’re still designing with tables it’s time to update your skillset.

    0
  38. 38

    @jef tables are good : I’ve put all of them in my chimney ;)

    0
  39. 39

    Just a note about last efforts on getting a Logic CSS Framework. It actually implements good typography and a totally flexible grid (em, % or px) thru a grid builder. If anyone cares, please take a look.

    Cheers !

    0
  40. 40

    everyone have their own’s habit,css Framework dosen’t fit for me!

    0
  41. 41

    Another good start for CSS-framework is here[1]

    The polarizer

    [1]http://intensivstation.ch/en/

    0
  42. 42

    hmm nice article, very interesting… hmm own framework….

    0
  43. 43

    Excellent article.
    I liked the Christian Montoya article so much.

    0
  44. 44

    Great article indeed!!!

    0
  45. 45

    Dennison Uy - Graphic Designer

    January 6, 2008 9:55 am

    I personally am not a big fan of frameworks, but if you work with a team enforcing frameworks is a good way of getting things done consistently and getting everyone up to par when it comes to CSS standards.

    0
  46. 46

    Nice idea, but I think, that almost all web sites or applications have own detailed stylesheets and there is some trouble to make one, perfect stylesheets for every html document.

    0
  47. 47

    Nice. While searching stuff to write about, did you happen to see any scientific articles about CSS Frameworks or reuseble web design / user interfaces? This is an interesting thing and I consider studying the subject for my master’s thesis. It seems there’s not much scientific, valid research on this matter. Yet reusable user iterface / layout components should be in the interest of many if you think about how huge the industry and opportunities are.

    0
  48. 48

    nice article. worth a try.

    0
  49. 49

    Great Article I Use Blueprint.

    0
  50. 50

    Nice article, in my opinion a css framework would only make sense on a large scale project where you have low to medium quality personnel working on this part of the project.

    0

↑ Back to top