Topic #2 – Can I get a resource?

Designing with CSS Frameworks

What are they? Why use them?

A CSS grid or framework is like a template, or like a larger version of a code snippet that you use over and over again.

A framework serves two purposes. It keeps your design neat, clean, and balanced, like the classic graphic design grid, and it also helps you to eliminate some repetitive coding. A lot of designers start many of their web projects the same way, with the same basic structure, and customize it from there, so these grids do some of that repetitive work for you.

Things That Are Brown web site, built using the 960 Grid

To use these frameworks, you download a package containing  HTML and CSS files. These CSS files contain styles that corral your content into a neat little grid system, made up of several columns and gutters. Most frameworks also provides you with a CSS reset. These things provide the starting point for your web site, and you customize it from here.

Second & Park web site, build using the 960 Grid

You can use these frameworks with little CSS knowledge, but you will benefit the most if you are already familiar with CSS layout, and can tweak these files to meet your needs.

Why are CSS frameworks considered controversial?

HTML5

Frameworks are somewhat controversial because many of them do not use semantic markup, meaning that the class names like column1 or div7 or width3 used to organize the columns have no real descriptive meaning. With HTML5, we are moving toward more semantic html tags, with the addition of tags such as <header>, <article>, <section>, and <footer>.

For more on this, please see my related post:

Experimenting with HTML5 Structural Tags

There are some new HTML5 frameworks out there that are supposedly more semantic than the original CSS frameworks, which I link to further below in my list of frameworks.

How do I use them?

This awesome article from Six Revisions, titled The 960 Grid System Made Easy, makes all of the complicated stuff easy to understand, and goes into detail about how the columns are set up and how to adjust them.
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

Also, this article from A List Apart describes the reasoning behind CSS Frameworks very well:
http://www.alistapart.com/articles/frameworksfordesigners/

Which one should I use?

There are many CSS frameworks out there. Some are fixed, some are fluid, and some now use HTML5 and CSS3 (these new ones supposedly being more semantic). Here are a few:

960 Grid System

1. 960 Grid

The 960 Grid was one of the first, and is very popular. Their web site has lots of examples of designs built using their grid, and you can press a button to show the grid overlaid on the design, which really helped me to visualize the underlying structure. I especially love their printable PDF grids, because I like to hand-sketch a web page layout, and now I know it will correspond to my CSS layout.

http://960.gs/

Fluid 960 Grid

2. Fluid 960 Grid

A fluid version of the 960 grid. Use this if you want your layout to stretch and contract with the user’s screen size.

http://www.designinfluences.com/fluid960gs/

1KB CSS Grid

3. 1KB CSS Grid

A lightweight grid.

http://www.1kbgrid.com/

Tiny Fluid Grid

4. Tiny Fluid Grid

A fluid version of the 1KB Grid.

http://www.tinyfluidgrid.com/

YUI Library

5. Yahoo YUI

It’s been around for a while and is on its third iteration. Includes JavaScript as part of the framework.

http://developer.yahoo.com/yui/

Blueprint CSS

6. Blueprint CSS

This one includes styles for forms, for printer-friendly pages, and for typography:

http://blueprintcss.org/

52 Framework

7. 52 Framework

An HTML5 and CSS3 framework

http://www.52framework.com/

HTML5 Boilerplate

8. HTML5 Boilerplate

This boilerplate code can be integrated with other grid systems such as the 960 Grid, Compass, and Less, and even into your WordPress theme. Read the “Docs” page for details.

http://html5boilerplate.com/

Sencha Touch Framework

9. Here are some far-out frameworks, including those that use JavaScript, and ones for building HTML5 games and touch-screen apps. Check out this amazing collection compiled by another blogger:

http://rachit-myvoice.blogspot.com/2011/03/html5-and-css3-frameworks.html

Experimenting with HTML5 structural tags

HTML5

Using the new HTML5 structural tags requires a little bit of a shift in thinking. If you’re used to using <div> tags for everything, it can be a little hard to get used to. But, just think about it – you would normally name your <div> tags something like <div id=”header”> and <div id=”footer”>, so these new tags just make it a little easier to create those commonly used sections.

You can use the structural tags as-is, or you can apply styling to them with an id or class. It seems that the <header> and <footer> tags would most likely be used only once, and therefore, they would be used without any classes or ids applied to them. They would simply be styled with CSS selectors, like this:

HTML

<header>content</header>
<footer>content</footer>

CSS

header {property:value}
footer {property:value}

On the other hand, a tag such as <section> could be used numerous times, and nested inside of itself. Therefore, I would apply ids and classes to it, to further organize the content, and so I could apply different CSS styling to different instances of the <section> tag, like this:

HTML

<section id="mainpoemtext">

<section id="poempart1">
</section>

<section id="poempart2">
</section>

</section>

CSS

#mainpoemtext { }
#poempart1 { }
#poempart2 { }

I haven’t experimented with the rest of the structural tags yet, such as <article> but these three seem to work for what I need so far.

Something to remember is that currently, these tags have no default style, so think of them kind of like a <div> tag, which is almost like a blank canvas. (For an example of default browser styling, something like <h1> is larger and bold by default.) But, the difference is that browsers know that a <div> is a block level element, which means it takes up a whole block or line. Something like <span> is an inline element, which is why you can apply it to one word within a paragraph. So, for these new tags, if you want them to behave like block level elements, like how <div>’s normally behave, you need to tell the browser this in your CSS. When you create your CSS styles, either using selectors, classes, or IDs, you add a property to tell it to display like a block level element, like this:

CSS (Selectors):

header {display:block;}
footer {display:block;}

CSS (IDs):

#mainpoemtext {display:block;}
#poempart1 {display:block;}
#poempart2 {display:block;}

One other thing to keep in mind is that these selectors may need some JavaScript help, in order for them to work in Internet Explorer. I added this small script into the <head> section of my page, and it worked like a charm! It is creating “DOM (Document Object Model) nodes” for each of these tags. I would assume this is because these tags are not yet a part of the regular DOM. You would repeat what I did here for every tag you need. You can see I used <header>, <section>, and <footer>.

<script>
document.createElement('header');
document.createElement('section');
document.createElement('footer');
</script>

I want to say thank you very much to the web site Ordered List. Their article pointed out that the CSS styling needing display:block, and that we need that little bit of JavaScript in the head section. I could not have gotten these structural tags to work without these two tips!

http://orderedlist.com/resources/html-css/structural-tags-in-html5/

I’ll keep you posted as a work through the other HTML5 structural tags, and other aspects of HTML5!