Due For This Class

Grids & Positioning

This lesson will introduce you to using a grid system for positioning content. We have already done this in previous lessons - remember the activity we did in lesson 17 (layout activity) - using columns to lay out our content and creating sidebars and main content areas.

To design with a grid, you need to consider that your content can be broken up into rows and columns. Every row can have any number of columns, but it looks nice if your columns are of predictable width.

Resources

• http://www.thegridsystem.org/
• http://jordanlev.github.io/grid/

Grid Systems

There are probably over a hundred grid systems out there. Here are some that I have used and liked.

• 960 Grid System (Note - this is NOT responsive)
• Skeleton Grid (This is one of the simplest frameworks - and one of the first responsive grid systems I encountered!)
• Base CSS (another framework, a bit more complicated to get set up but really simple code-wise)
• Unsemantic Grid (The successor to 960 grid).
• Gridism (Very different, but simple!)

Homework

• Read CSS Layouts - Fixed vs Fluid
• Read All About Grid Systems and Choosing a Grid System

Content Planning Homework - due Monday, November 3

• Sitemap
• Initial content planning documents (answer the first two sets of questions from Monday's lesson)

Content

• What content will you need to have?
  
• What content is already created? What will you need to create?
  

Navigation

• What will your menu items be?
• What pages will you need?
  
• What content will go on each page?
  
• How will people navigate through your website?