CSS Frameworks

Mashael  ALDrees 

KSU 

mashael.me@gmail.com

ABSTRACT
If you want to  build a new web site and you  want to use CSS for styling the webpage .
But you want to use  professional , faster and Without errors way .Read this  paper 
to find the Characteristics you're looking for and  To relieve yourself, It present The 
CSS Frameworks . 

Keywords

CSS, Frameworks, style , outlay, design .

1.INTRODUCTION
You don’t have to write the same CSS­code 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” one. 
And this is where CSS Frameworks becoming important.

The structure of the paper as follows:
Section 2 The Meaning  of  the word "Framework ", Section 3 The Meaning  of "CSS Framework" and some 
examples, Section 3.1 When to use CSS framework , Section 3.2 Who should use CSS framework,
Section 3.3  Advantages of CSS Frameworks, Section 3.4 Disadvantages of CSS Frameworks,
Section 3.5 Different CSS Frameworks ,Finally the  conclusion .

2.FRAMEWORK
 The word framework means a set of tools, libraries, conventions, and best practices that attempt to
 abstractt  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.

A framework is a basic conceptual structure which you can use in your web­projects.[1]

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies 
are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy 
otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini­Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia
3.CSS FRAMEWORK
A CSS framework is a library that is meant to allow for easier, more standards­compliant styling of a webpage 
using the Cascading Style Sheets language.  Just like programming and  scripting language libraries  CSS 
frameworks (usually packaged as external .CSS sheets inserted into the header) package a number of ready­
made options for designing and outlaying a webpage[2].

CSS frameworks are usually just a collection of CSS files that set up things like basic typography, form 
styling, grids/simple layout, and resets, such as

• typography.css for basic typographic rules.

• grid.css for grid­based layouts .

• layout.css for general layouts.

• form.css for basic form styling[3].

3.1When to use CSS framework
      If you have a very big site and work in a team (or alone) and you must have “standard” (universal) code 
that can  cover all the scenarios, the best solution is ­ CSS Framework[4].

3.2Who should use CSS framework
For  the CSS beginners  that they can web web design faster. Maybe you can save a lot of time in the 
beginning but you will lose a lot of time at the end for debugging or for implementing some specific code. 
after almost everything being done, you must implement some features that the Framework does not cover.
the CSS Frameworks are not for CSS starters (newbies) , They are for people who know CSS but want more 
organized approach[4].

3.3Advantages of CSS Frameworks
­ They usually have multi ­ browser support.

­ A lot of bugs and problems are fixed. 

­ They usually have 80% of all the CSS code that you will ever need. there is  a lot of code examples.

­ You can learn a lot from the CSS Frameworks .

­You normalize your code/class base.

­ You have a better workflow within a team[3].
3.4Disadvantages of CSS Frameworks
­ There will be some CSS code from the framework that you will never use.

­You need time to fully understand the framework.

­ Bug fixing is not always simple (first you have to learn how the framework works)

­ It’s not so “semantic” (class=”menu­left” – semantic v.s class=”div­xyz” not so semantic)[3].

3.5Different CSS Frameworks

3.5.1Elements CSS Framework
Elements is a CSS Framework that was developed by Ben Henschel It was built to help designers write CSS 
faster and more efficient. This framework is like a template which has all of the things you end up typing in 
over and over for every website you create. It is very lightweight, with only 4 files. They are :­

­ Elements ­ Which is a collection of preset classes that are commonly used 

­ Reset ­ A mass reset 

­ Typography ­ Basic Typography 

­ External Links ­ Stylizes different external links to improve usability for the user[5]

3.5.2YUI Grids CSS

Yahoo   UI   it's   so   comprehensive   ,but   the   comprehensiveness   makes   it   a   bit   hard   to   use   because   it   is 
complicated. YUI Grids CSS offers 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[6].
3.5.3YAML CSS Frameworks

YAML is designed to allow easy structuring of a layouts, offers various tools for rapid development of modern 
and accessible CSS layouts. The most important aspects are :­

Documentation , Community , Browser , Stability , Accessibility , Design Freedom , Tested in Practice , 
Flexible Licensing Model , Further Development[7].

3.5.4Blueprint CSS

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid 
CSS foundation to build your project, with an easy­ to­use grid, and even a style sheet for printing. It‘s based 
on the idea  of splitting the width of a page into 24 columns [8].                                                             

3.5.5Schema Web Design Framework

Schema is a presentation layer web framework designed to provide essential CSS and HTML markup that is 
used repeatedly in design tasks. Rather than build your  HTML/CSS from scratch for each new web project, 
Schema provides the necessary foundation to get up and running with your design in no time.

Schema comes with pre­built HTML+CSS specifications. You can tweak these to fit your design needs.

­CSS resetting for optimum cross­browser compatibility .

­Standard HTML elements (a, img, table, ul, ol, p, h1­h5, and more) .

­Minimal, but powerful, div/block layouts .

­Photoshop document files for adapting graphics[9].

3.5.6Clever CSS

CleverCSS is a small markup language for CSS that can be used to   build a style sheet in a clean and 
structured way. In many ways it’s cleaner and more  powerful than CSS2 is. The most obvious difference to 
CSS is the syntax: it is indentation  based and not flat[10] .
3.5.7Tripoli CSS Framework

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli 
forms a stable, cross­browser rendering foundation for web projects.                       

Tripoli completely resets all default browser standards and rebuilds them quietly with modern web 
development in mind.

Tripoli is not a CSS framework. It doesn't tell you how to code your web site. Instead, it forms a solid HTML 
rendering engine and a base for creating dynamic layouts without interfering with typographic 
measurements[11].

3.5.8WYMstyle CSS Framework

The WYMstyle aim of this project is to provide a set of well­tested modular CSS files, that can be used for fast 
design of web sites. It is a set of CSS files, that you can easily combine to very quickly create the layout of 
your web sites. It is  aims to suppress the tedious compatibility testing across browsers for each created 
website, by providing CSS modules  which are reliable and well­tested[12].

3.5.9Logicss CSS Frameworks

The Logic CSS framework is a collection of CSS files and PHP utilities to cut development times for web­
standards compliant XHTML layouts[13].

3.5.10960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used 
dimensions, based on a width of 960 pixels. There are two options : 12 and 16 columns, which can be used 
separately or in tandem[14].

3.5.11Emastic CSS Framework

Emastic is interesting looking CSS Framework, it’s go where no CSS Framework has gone before. It is 
Lightweight, It is designed for both fixed and fluid layout. It looks like a nice alternative to fluid layouts than 
YUI Grids, with simpler and more flexible column structuring and class naming[15].
4.CONCLUSION
CSS Frameworks  can make designer more productive with ready­made code. It's also a good way to reduce 
redundant work.

CSS Frameworks are useless if they don’t serve your specific needs properly.

CSS frameworks are pretty advanced and if you have the time to learn it, go ahead. It may get your work

Better and You gain more skills . 

5.REFERENCES
[1] Article by  Jeff Croft available from 
    http://www.alistapart.com/articles/frameworksfordesigners 
[2] wikipedia.
 [3] Smashing magazine Located on the Internet at 
http://www.smashingmagazine.com/2007/09/21/css­frameworks­css­reset­design­from­scratch/ 
[4] Carrer web log Located on the Internet at  
http://www.vcarrer.com/2008/08/when­to­use­css­framework.html
[5] Web Scripts Located on the Internet at
http://webscripts.softpedia.com/script/Development­Scripts­js/Elements­­38993.html
[6] Yahoo developer network Located on the Internet at
http://developer.yahoo.com/yui/grids/
[7] Yet Another Multicolumn Layout (YAML) Located on the Internet at
http://www.yaml.de/
[8] Blueprintcss  Located on the Internet at

http://www.blueprintcss.org/
[9]DIVE COLDING DESIGN (DG) Located on the Internet at
http://www.davidgoldingdesign.com/schema.html
[10] POCOO SANDBOX Located on the Internet at
http://sandbox.pocoo.org/clevercss/
[11] DEVKICK Located on the Internet at
http://devkick.com/lab/tripoli/
[12] WYMstyle Located on the Internet at
http://www.wymstyle.org/en/
[13] LOGICSS Located on the Internet at
http://code.google.com/p/logicss/
[14] 960 Grid System Located on the Internet at
  http://960.gs/
[15]URL GREYHOT web log of Michael Angeles, a user experience designer
http://urlgreyhot.com/personal/weblog/emastic_css_framework