Final Resource: Grids

Grid Structure is worth 10 points

Here are the notes from the grading rubric:

  • A grid is used with both valid and semantic HTML and CSS applied.
  • Grid properly applied to HTML
  • CSS for grid properly linked
  • Content fits inside the grid (intentionally breaking grid for visual effect is OK)

You can use the same 960 grid system, http://www.960.gs, we used in class, or you can pick your own system. You just need to use one and I need to see it in use.

960 Grid System

This page on the system has many of the same resources as on the current page, but it also goes into more detail about downloading the 960.gs.

960 Grid System Resources

Here are more resources:

CSS BEHIND THE GRID SYSTEM

Many of you are not sure on the CSS underlying the Grid System so watch the screencasts that help explain that more clearly. There are three of them and they go from basic CSS (also one I linked to in the CSS section here) to using the 960 grid system.

CSS and the Box Model

CSS and Positioning with Float

More Info

Read this tutorial to help you understand 960.gs better if you are having problems
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

CUSTOM GRIDS

Here is some information on creating a custom sized grid that uses the same grid classes as the 960.gs (so you can use the size and number of cols you want and still keep what you’ve learned about applying the 960 grid classes).

These screencasts show how to use the Variable Grid system to create a grid with the widths and number of columns of your choosing. There are a number of tools out there that help with this but the cool thing about this one is that it writes a CSS file for you that uses the exact same classes as the 960.gs grid system. That way you can use everything your learned about the .container and .grid_x and .alpha and .omega classes but using your own grid dimensions.

YouTube Custom Grid Tutorial

httpvh://www.youtube.com/watch&v=P7iwf84aTgA

These links are to the screencast broken up into three parts. They are also the straight video files so you can right-click and download them. To see the tutorial as one movie watch the YouTube video
CustomGridsTutorial_1_CalculatingTheGrid
CustomGridsTutorial_2_ApplyingTheGrid
CustomGridsTutorial_3_AddingMoreStyles

There are a few other tools and links used in the tutorial. All of them are listed here:

One response to Final Resource: Grids

  1. [...] View Full Resource [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © MMP240 Fall 2012
Just another BMCC Multimedia Blogs site

Built on Notes Blog by TDH
Powered by WordPress

That's it - back to the top of page!