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.
Here are more resources:
- Overview: http://youtu.be/ynkcejrTb20
- Using Columns, the Box Model and Float in the 960 Grid System
- 960 GS Hands On: http://youtu.be/r2QFh87lShg, uses this zip start.zip
- Using full width backgrounds: http://youtu.be/3Cif6eCxAi8
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
Read this tutorial to help you understand 960.gs better if you are having problems
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.
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
There are a few other tools and links used in the tutorial. All of them are listed here: