DivitoDesign » CSS Frameworks http://divitodesign.com Articles, Tutorials and Resources for the Webdesigner Fri, 07 Oct 2011 18:47:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Building HTML/CSS Sites: Use a Template http://divitodesign.com/css/building-html-css-sites-use-a-template/ http://divitodesign.com/css/building-html-css-sites-use-a-template/#comments Fri, 27 Feb 2009 13:04:51 +0000 Stefan Vervoort http://www.divitodesign.com/?p=1494 If you are developing HTML/CSS websites with occasionally a little bit of JavaScript (just like myself), it can be very un-productive to write your basic codes over and over again.

For example, if you want to include a JS file for your dropdowns, a CSS framework file and print CSS files every time you start working on a new project, you better read this article for some time-solving solutions.

Create a Template for Starting From Scratch

We are going to make a Template Folder we use every time on a new project. This includes a basic index page, the JS files, the CSS files and our basic images. In my projects, I use these files almost every time:

JavaScript (folder /js/)

CSS (folder /css/)

Images (folder /images/)

I suggest you take a look at some of these links I provided in the list and check out what you need yourself in a regular project. If you need other JavaScript fixes or basic CSS code, be sure to use them instead and add them in the same way I will describe below.

Let’s build our Template’s Index page

I hope you have placed all the files you need in an appropriated folder. For example, I have placed my images in /images/, my CSS files in /css/ and my JavaScript files in /js/.  This will make things look pretty structured.

Alright, Let’s start with a standard HTML page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Description + Keywords + Robots

Any site needs a proper description and maybe some keywords. They won’t do much to your SEO rankings, but they will help you displaying your search engine results in a proper way. It could also be a good idea to add a meta tag for robots, so your search engine knows they can index your site.

Here is what I have added to my standard META tags. You should add all the following codes + inclusions between the <head></head> tags in your HTML page.

1
2
3
4
5

<meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />

CSS Framework

We have to add our CSS Framework first. Depending on the way your framework needs inclusion, here is the Blueprint way:

1
2
3
4
5
6
7

<!-- blueprint -->
    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
    <!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

Custom Styles

Next, I think it’s important to have a custom stylesheet at hand, so let’s add our custom.css stylesheet.

1
2
3

<!-- custom stylesheet -->
    <link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />

JavaScript files

Now we have added style to our template, let’s add some JavaScript. I suggest you include jQuery first, because if you include jQuery plugins before the original library, they won’t work. So, here’s how I include my JavaScript files:

1
2
3
4
5
6
7

<!-- JavaScript -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!--[if lte IE 6]><script type="text/javascript" src="js/transparant-png.js"></script><![endif]-->

Everything we needed to include is done right now. We can now start adding some more code to our template’s Index file.

Structuring codes

Depending on your framework, you could add a basic structure between your <body></body> tags. Most sites I developed have this structure:

  • Container

    • Header
    • Content
      • Content
      • Sidebar 1
      • Sidebar 2
    • Footer

That’s why I have already created the structure so I can start right away.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="container" id="container">

    <div class="span-24" id="header"></div><!-- end header -->

    <div class="span-24" id="content">

       <div class=""></div>
       <div class=""></div>
<!--	<div class=""></div> -->

    </div><!-- end #content -->

    <div class="span-24" id="footer"></div><!-- end #footer -->

</div><!-- end container -->

As you can see, I haven’t given my DIV’s inside my Content DIV any ID and I even commented one of them. This is for the simple reason I don’t know what I will be adding to the content area yet. Every project is different, however, I usually choose two or three DIV’s inside the content.

Our Custom CSS Files

Next thing we will do is creating some basic CSS styles.

For example, it is important to structure your codes pretty well. When you need to work fast, you often work less structured and nice. With the use of a template, the structure is already there. You only need to fill it up.

Comments

I am not going to teach you how to write structured code as Woork has some great tutorials on them. You should always start with the basics details on your project. You can add more or less details in here, that’s up to you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
Author:           Stefan Vervoort
Author URI:       http://www.divitomedia.com/
Version:	   0.9

Project:
Description:
*/

I think next, a table of contents is appropriated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*
---------------------------------------------------------------------------------------
TABLE OF CONTENTS
	-- RESETS
	-- BASICS
	-- CUSTOM
---------------------------------------------------------------------------------------
*/

You should add a heading above each section of your stylesheet. For example, when styling basic stylesheet attributes, you can do it like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
body { }
a { }
a:visited{ }
...

And, next, you add this section to your table of contents. I suggest you only place only your larger sections in your table of contents. This is just a basic lesson in structuring your CSS file.

CSS Resets

First, I have added a Reset. My personal favorite is the Eric Meijers’ Reset Reloaded. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

/*---------------------------------------------------------------------------------------
--- RESETS
---------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
	p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	:focus {
		outline: 0;
	}

	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

The basics

The next thing I have added are a couple basic styles, without adding to much behavior. I have added default font sizes, some classes I always use (like .left, .right, .clear, .padding) and some image styles. Be sure to include your own preference in there too.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
html{		font-size:100%;	min-height:101%;}
body{		font-size:62.5%; color:#666;}

a{		}
a:hover{	}
a:active{	}
a:visited{	}

.left{		float:left; }
.right{	float:right; }
.clear{	clear:both; }

img.left{	margin:0 1em 1em 0; }
img.right{	margin:0 0 1em 1em; }

.padding{	padding:10px; }
#content p{	margin:1.1em 0; }

Dropdown Menu

Because I tend to use a dropdown menu in all my latest projects, I have all the styles added to my stylesheet to make the dropdown menu work proper, just without color styles. This makes it easy for me to style these menu’s easily.

If you want to use the suckerfish dropdown menu and want to add some basic behavior to your stylesheet, here are my codes. I always place my navigation menu inside a DIV with ID navigation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* ------------------------------------------------------------------------------------
NAVIGATION MENU				 */
#navigation, #navigation ul {		padding:0;	margin:0; list-style:none; line-height:1; float:left;	}
#navigation a {			display:block; padding:6px 10px; text-decoration:none;	}
#navigation a:hover{			text-decoration:underline; padding:6px 10px; }
#navigation li { 			float:left; width:auto;	}
#navigation li{			padding:0; margin:0; }
#navigation li ul li{			padding:1px 0px;}
#navigation li ul li a{		padding:6px 10px; width:110px; }
#navigation li ul { 			position:absolute; padding-top:1px; width:130px; left:-999em; }
#navigation li ul ul {			margin: -1.5em 0 0 130px;	}

#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {	left: -999em;	}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul,
#navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { left: auto;	}

Site Structure

It’s easy to gather all your structure DIV’s and put their ID’s under each other. This way you always know where to look when something isn’t right in your structure.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* ------------------------------------------------------------------------------------
STRUCTURE					 */
#container{	overflow:hidden; border:solid #000; border-width:0 2px; font-size:1.5em; }
#header{}
#footer{	clear:both; }
#content{}
#right{}
#left{		}

Time for the custom code

My default styles I use in any project are in my stylesheet now. One thing I do next is adding this comment:

1
2
3

/* ------------------------------------------------------------------------------------
CUSTOM				 */

Which means, we are ready to start.

Template Done

We are ready to start developing with our new template system. Remember to always make a copy of your template before you start editing there. If you don’t do that you will loose your basic template, because you’ll save custom files over your original.

One tip I can give you is to email your template to your own email address. Once you, accidentally, lost your original template, you will be able to retrieve your original one! A backup is a live saver.

Download my Template

I can give you my template to use on your own projects and you will have everything all together. I hope you see the advantages of this way of starting on a project and I hope it’ll save you some time.

Download HTML-CSS-Template.

Any Tips?

If you spot any faults in the code, or if you think some code can be optimized, or if you have some tips to add to the template, don’t hesitate to leave a comment!

]]> http://divitodesign.com/css/building-html-css-sites-use-a-template/feed/ 59 Blueprint CSS Framework – Learn The Basics http://divitodesign.com/css/blueprint-css-framework-learn-the-basics/ http://divitodesign.com/css/blueprint-css-framework-learn-the-basics/#comments Sun, 01 Feb 2009 18:17:56 +0000 Stefan Vervoort http://www.divitodesign.com/?p=1419 Because of the success of the latest “Learn the Basics” article about the 960 CSS Framework, I feel there is a need for detailed tutorials on how to start with CSS Frameworks. It’s not uncommon that people don’t know the basics before they start. It’s time to change that.

blueprint-1

In the mentioned article, many people commented they like the Blueprint CSS framework more than the 960.gs. They feel it gives them more flexibility and works easier. That’s why I took a better look at this CSS framework and decided to teach you exactly how the basics work.

This tutorial will only gives you the basics of the Blueprint CSS framework. You need to understand CSS before you should be using CSS frameworks.

The Basic Principles

Before you can really develop with this framework you need a few things up-front.

Which files do you need

We need to download the CSS framework first. You can download the files here. Once you have opened your .zip/.rar, you will notice a lot of files. That’s because this isn’t your basic CSS framework alone, there are many other features we won’t discuss today.

We only need screen.css, print and ie.css, which you can find in the blueprint folder.

Do not edit templates

I suggest you don’t edit these CSS files, because they are part of a template. A template that might gets a few updates in the future and if you add customizations there, you won’t have an easy updating procedure.

How to add Blueprint to your site

Adding Blueprint only requires these lines of codes. You need to insert these between the <head></head> tags of your site.

1
2
3
4
5

<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->


But, of course, you want to add some custom styles too. We have to create another separated CSS file that does that. For example, you can call that file style.css. Use this line of codes to add this file to your site.

1

<link rel="stylesheet" href="style.css" type="text/css">

What Can Blueprint Do?

We have a number of classes in the blueprint stylesheets we can use. I will explain the most important ones for our grid layout first.

Container

We have to start with a container. By default, this container is 950px width and is centered in the middle of your screen. You can add 24 columns in this container, with a width of 30px per column. A margin of 10px is added to the right side of the column.

1

<div class="container"></div>

Columns

There are 24 columns you can choose from. For example, you can choose a layout with 4 boxes with boxes composed of 4, 12, 4 and 4 columns. Here’s the structure:

1
2
3
4
5
6
7
8
9
10
11

<div class="container">
<div class="span-4">Sidebar</div>
<div class="span-12">Content</div>
<div class="span-4">Photos</div>
<div class="span-4">Sponsors</div>
</div>

As you can see, blueprint uses the span-x class to determine how many columns you need to add.

Margins.

As you all know, every column in blueprint has a margin-right of 10px. When we leave the structure this way, the last column in the layout will have that margin as well. We don’t need it there because it’ll break our layout.

Blueprint has a solution for that in the form of the .last class. Where you add that like this, your layout will render perfectly.

1
2
3
4
5
6
7
8
9
10
11

<div class="container">
<div class="span-4">Sidebar</div>
<div class="span-12">Content</div>
<div class="span-4">Photos</div>
<div class="span-4 last">Sponsors</div>
</div>

Styling Your Columns

Now that you know how to build your structure with Blueprint, it’s time to add some padding and maybe a background color. So how are we going to do that when we can’t touch the original screen.css and print.css? Simple. Remember the style.css file I asked you to make?

First we have to do something about our structure. Due CSS specificity an ID is more important than a Class and we are going to add ID’s to all our boxes. When we style ID’s, we will overrule the styles the classes give.

1
2
3
4
5
6
7
8
9
10
11

<div class="container">
<div id="sidebar" class="span-4">Sidebar</div>
<div id="content" class="span-12">Content</div>
<div id="photos" class="span-4">Photos</div>
<div id="sponsors" class="span-4 last">Sponsors</div>
</div>

We can now open up our custom stylesheet (style.css or any other name) and style the ID’s we have given here. If you don’t understand what I mean, I suggest you start learning CSS from scratch first.

As an example, I have made a small layout and added some style myself, check it out.

blueprint-1

More Practices

Blueprint is much more than all the above. For example, you can add classes like .hide (to hide an element), .highlight (to give an element a specific background and highlight the text), add borders, and the default styles for typography and forms are pretty nice as well.

Position classes are added as well, but I haven’t really worked with that yet. I will post a follow-up article on the Blueprint CSS framework once I have experienced to this CSS framework’s full potential. You can get a message when this article arrives by subscribing to the RSS feed or via email.

More Reading About Blueprint CSS Framework

There are numerous articles, tutorials and site out there, so if you want to learn more about this framework, check out the links below:

]]> http://divitodesign.com/css/blueprint-css-framework-learn-the-basics/feed/ 29 Tricks to Solve 960 CSS Framework Problems http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/ http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/#comments Sun, 04 Jan 2009 15:57:26 +0000 Stefan Vervoort http://www.divitodesign.com/?p=1317 A couple weeks back we have learned about the basics of the 960.gs CSS framework. Today we will talk about 2 problems with the 960 framework you might have struggled with. This post acted like a problem solver.

Many of these “problems” are very simple to solve. You will need a basic understanding of the framework though to understand why and how things get solved. You should learn the basics here.

Add padding

All the boxes in the framework have a specific width and margin and this creates the grid look and feel. However, sometimes you want to create a “box” or just want to add padding to your div.

As in any framework, this isn’t possible in the regular way. When you add padding to the div, the div will become wider and this will screw up your whole grid layout.

Solution

There is a simple solution to solve this problem. We will add another div inside the div you want to add padding to. We don’t give the new div any width declarations. So, we don’t give it a .grid_xx class.

Now, if we want to style this box and you have added a class or ID, we can add padding. Because we didn’t specific any width declaration, it is automatically 100%. If we add padding, the width of your div will stay the same. Take a look at our example to clear things up.

1

<div class="container_16"></div>

Let’s say we want to add padding to the div with ID “left”. Usually, like this:

1
2
3
4
5

div#left{
padding:10px;
}


However, this gives your div an extra 20px width. We work differently today:

1
2
3
4
5
6
7
8
9

<div class="container_16">
     <div id="left" class="grid_8">
          <div class="special-div">example</div>
     </div>
</div>

Together with this CSS:

1
2
3
4
5

div#left div.special-div{
padding:20px;
}

Take a look at our live example to see this works. As you can see, things are doing fine and the grid isn’t screwed up! I have added a border/background to the style declaration to make sure you can see what I mean

Tip! You can also do this with borders!

Wider or Narrower 960.gs Layouts

Width is a specific part of the 960.gs CSS framework. What if you want to create a layout that is wider or narrower? The facts first.

The 960.gs framework is called 960 for a reason: it’s 960px width. The whole grid is based on this 960px. You can’t make everything narrower or wider because everything gets screwed up. For a narrower layout however, we can use a trick. The wider layout isn’t possible with 960 gs and you should pick another framework like blueprint CSS.

Let’s create that narrow layout.

Solution

There are more CSS codes that can do the job, but I will just use the 960 way today.

Say we have this basic grid:

1
2
3
4
5

<div class="container_16">
     <div id="layout">layout</div>
</div>

This means that inside our basic “container” div, we have another div. This div with ID “layout” will be (surprise!) our layout. You see this div don’t have a .grid_xx class? Explanation will follow.

We have to put another div behind our “layout”-div, so we can position everything. I will give this div the class .grid_12. You can of course change this in an appropriate width. Our grid now looks like this:

1
2
3
4
5
6
7
8
9

<div class="container_16">
     <div class="grid_12">
          <div id="layout">layout</div>
     </div>
</div>

As you can see in the our HTML file, our container’s width “is” 16. Our container div’s width “is” 12.

Simple math shows that 16 – 12 is 4. We have the width of .grid_4 left. Because we need the same amount of space on both sides of our div, we can do some simple math again. We have .grid_4 / 2 sides = .grid_2 on both sides.

There are classes included in the 960 framework that can add a number of default padding like that .grid_1, .grid_2 etc. Padding-left is .prefix_xx and padding-right is .suffix_xx. Let’s add a padding-left of .grid_2 to our example.

1
2
3
4
5
6
7
8
9

<div class="container_16">
     <div class="grid_12 prefix_2">
          <div id="layout">layout</div>
     </div>
</div>

Check out our basic example to see that our grid is in the middle of your screen, and narrower as our original 960 layout.

Conclusion

These are the problems I was facing when using the 960.gs CSS framework. I don’t have other problems I think that should be tackled in 960.gs. It works good for me.

Perhaps you?

You might have a questions or problem you are facing when using 960 CSS framework in development environments. Don’t hesitate to point them out in the comments and I will see if I can add a solution in a follow-up post.

]]> http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/feed/ 13 960 CSS Framework – Learn the Basics http://divitodesign.com/css/960-css-framework-learn-basics/ http://divitodesign.com/css/960-css-framework-learn-basics/#comments Mon, 15 Dec 2008 14:14:41 +0000 Stefan Vervoort http://www.divitodesign.com/?p=1292 CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here.

I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.

This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.

The basics principles

You have to know a couple basic principles to “learn how the framework works“. You can learn these during the experimenting process, but I will explain them here for you, too. Let’s start.

Do not edit 960.css

A small note before: do not edit the 960.css file. If you do this, you won’t be able to update the framework in the future. Because we need to style our HTML though, we will create a separated CSS file.

Loading the grid

Before we can use CSS codes in an external file, we have to load these in our own HTML site. Which can be done via these codes:

1
2
3
4
5

&lt;link rel="stylesheet" type="text/css" media="all" href="path/to/960/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="path/to/960/960.css" /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="path/to/960/text.css" /&gt;

Once we have this ready, we have to include our own CSS file. For example, you can call this file style.css or site.css or anything else. Include this file with these codes:

1

&lt;link rel="stylesheet" type="text/css" media="all" href="path/to/style.css" /&gt;

Containers

In the 960 framework, you can choose between 2 container classes namely .container_12 and .container_16. These containers are always 960px width (thence the name 960!) and the difference lies in the number of Columns. The .container_12 container is divided  into 12 Columns and the .container_16 container is divided in 16 columns. These 960px width containers are horizontal centered.

Grids / Columns

There are numerous column widths you can choose from and these are different in the 2 containers. You can find these widths by opening the 960.css file, but this isn’t necessary to design a proper website. There is a smart trick that make the framework even easier.

For example, if you want 2 columns in your container (say sidebar/content), you can do that this way:

1
2
3
4
5
6
7

<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>

You can see that the sum of your first column (grid_4) added with the second column (grid_8) is exact 12. That’s for a reason, you don’t have to know the widths of these columns, you can choose column widths doing a very easy bit of math.

Let’s say we will create a layout with 4 columns. The codes will be these:

1
2
3
4
5
6
7
8
9
10
11

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>

As you can see, this system works pretty well. If you try to load this in your browser however, you see something that isn’t right. That’s the introduction of our next topic.

Margins

By default, the columns have some margin between them. Every grid_(insert number here) class has 10px left and right margin. This means that in total, between 2 columns, we have a total margin of 20px.

20px margin is great to create a layout with enough white space to make everything looks smooth. That’s one reason I enjoyed using 960.

With our example from earlier, we had a problem when we loaded the page in our browser. We are about to fix that.

The problem is that every column has Left and Right margin. The first column and the latest column in the container doesn’t need any margin. Here’s the solution.

1
2
3
4
5
6
7
8
9
10
11

<div class="container_12">
<div class="grid_2 alpha">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2 omega">advertisement</div>
</div>

You can simple add the class alpha for no left margin, and the class omega for no right margin. This example layout we made is now aligned perfectly in any modern browser (and yes, also in IE6).

Styling

Perfect, you know all the basics to create a grid layout with the 960 framework. Of course, we would like to add some style to our layout, too.

1
2
3
4
5
6
7
8
9
10
11

<div class="container_12">
<div id="sidebar" class="grid_2 alpha">sidebar</div>
<div id="content" class="grid_6">main content</div>
<div id="photos" class="grid_2">photo's</div>
<div id="advertisements" class="grid_2 omega">advertisement</div>
</div>

Because CSS uses specificity to determine which style declarations have priority above the other, the id is more important then the classes.

This way we can overwrite rules that have been set by the classes (like width, padding, borders etc) in our own CSS file.

I have added some style too, which took me exactly 5 minutes to get this whole example together. Check the source for the example and style declarations.

We are done

That’s it. You have just learned how to use the 960.gs framework to build cross browser compatible and smart layouts. When you have completely mastered the 960 framework you will greatly decrease the time you are writing CSS.

If you haven’t already, check out the example.

My questions for you!

Do you use the 960 CSS framework? Or any other framework? Do you think a framework help you to improve your code?

Excellent printing brochures available at PsPrint.com

]]> http://divitodesign.com/css/960-css-framework-learn-basics/feed/ 61