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 Approach.
• You can find hundreds of CSS templates in our article Free CSS Layouts and Templates.
• Please notice that this article takes a closer look at CSS Frameworks, not at extensive server-side programming frameworks such as CakePHP and also not at Web Development Environments such as Coda or Dreamweaver.

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 Frameworks, 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 Designers, 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 frameworks]
• 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 frameworks]
• 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 Frameworks, 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 Frameworks, 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 Frameworks, 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)

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 documented in both English and German, supplemented by numerous examples.

You can also use a YAML Builder 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.

Blueprint

The Blueprint CSS framework, created by Norwegian tech student Olav Frihagen Bjørkøy, is a very promising 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 true.

Besides, you can also use the Blueprint Grid CSS Generator 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 Foundation

Yahoo! UI Library presents a set of CSS frameworks: the core YUI CSS foundation includes the Reset CSS, Base CSS, Fonts CSS, and Grids CSS 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 Builder — a simple interface for Grids customization.

You should be aware that these frameworks are often criticized 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 Time by Christian Montoya]
• Tripoli
  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 Reloaded 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 CSS
  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 Reset by Kyle Neath
  A simple CSS reset with some additional classes for better debugging.
• CSS Global Reset by Christian Montoya - css
  “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 Reset by Mike Rundle (currently unavailable)
• Master Stylesheet
  This default-stylesheet takes some typographic rules into consideration, such as the spacing between heading tags, paragraphs, and blockquote elements.

CSS: Basic Styling

• Web Typography: bottom margins of paragraphs and lists by Marko Dugonjic
• Compose To A Vertical Rhythm
  “The basic unit of vertical space is line height. Establishing a suitable line height that can be applied to all text on the page, be it heading, body copy or sidenote, is the key to a solid dependable vertical rhythm, which will engage and guide the reader down the page.”
• Baseline Stylesheets by Darren Hoyt
• One clean HTML markup, many layouts… by TJKDesign
• Mike Stenhouse’s CSS Framework
  There is a possibility of breaking down stylesheets into components that could be reused across projects. The next logical step is to extend this to become a CSS framework, allowing rapid development of sites with pre-written and tested components. All that’s really required to produce this is a set of naming conventions and a flexible base template…

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!

Every now and again we take a look around, select fresh high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.

This month we are glad to present you Goudy Bookletter 1911, Advent Pro, Ambrosia, Andale Mono, Telegrafico, Fonce Sans Regular and the Luxi Font Family. Please read the license agreements carefully - they can change from time to time.

• You can find over 70 more free fonts in our section Free Fonts.

Free Fonts Of The Month

Goudy Bookletter 1911
A serif old-style OpenType font. You need to scroll the frame to find the download link. [via derSven]

Advent Pro
A fresh, modern typeface coming in 7 weights — bold, bold extra, regular rounded, regular, regular oblique, light and light extra. Commercial work containing this typeface must include the reference to the author; personal projects don’t neccessary need to have a reference. The advanced version of the font can be purchased.

Ambrosia
This font is free to use for personal purposes only. This version doesn’t contain kerning, accented character and foreign currency symbols.

Andale Mono
Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. You might want to check out 22 more Monospaced/Fixed Width Programmer’s Fonts as well.

Credits: Hamish Macpherson

Telegrafico
Licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. TrueType (.ttf).

Fonce Sans Regular
A sans-serif typeface that includes old style (hanging) numbers, a number of english and non-english lettering, some additional symbols and complete punctuation. This typeface is considered a Trial Version, in which certain letterforms have been replaced. Available only for non-commercial use as .otf. The advanced version of the font can be purchased.

This typeface is being released as a sort of “beta,” in which people might become accustomed to the typeface and also voice their opinions on its usability.

Luxi Family
Luxi fonts are commonly found on free software operating systems, such as Linux. They are the default fonts in Red Hat’s Bluecurve theme. This family includes Luxi Sans, a family of four sans-serif fonts, Luxi Serif, a family of four serif fonts and Luxi Mono, a family of four monospace fonts. These fonts can be downloaded using OpenOffice.org’s FontOOo wizard. (via Chris Apalodimas)

RSS is extremely simple and yet so powerful. Not only does every weblog need it for content syndication; the number of RSS subscribers is a metric for weblog’s popularity and its success in the blogosphere. However, although millions do use RSS, hundreds of millions don’t. That’s no good news, since RSS offers a bunch of advantages that can boost your productivity and improve your information consumption in a quite elegant and easy-to-use way.In this article we give an overview of what RSS is and present best design and usability-practices for design and placement of RSS-buttons on a web site. We also showcase dozens of free RSS-icons and provide you with references to related tutorials and how-tos.

Please notice that

• you can find even more icons, buttons and design templates in our articles 20+ Free And Fresh Icon Sets, Freebies Round-Up: Icons, Buttons and Templates and in our Graphics category.

more>>

In many blogs header graphics often takes a prominent position as bloggers try to impress visitors with distinctive and appealing visual elements. In fact, designed properly, header graphics can create an appropriate atmosphere and convey the style the designer has chosen. Well-designed themes can be as useful as templates, particularly if you can download them and experiment with them as you wish. However, you won’t find that many sources on the Web. That’s time to change it.

We’d like to create a small smashing gallery of blog header graphics which every designer could use for free and without any restrictions whatsoever. To achieve this we need the help of our creative visitors. To achieve this we need your help. Which is why we announce a Header Graphics Contest.

Update (02.02.2008): please notice that this contest is not about designing a header for the Smashing Magazine web-site. Your header graphics don’t have to be related to Smashing Magazine at all. This is about sharing your skills with fellows designers and creating a free repository of downloadable header graphics.

 Examples>>