Reading Discussion

• Class Feedback

Grid-Based Design

•  Grid-Based Design |  What is it? | Examples | Resources
  • Generate a Grid
  • Class Example (960 / 10 Col)
    • Grid Tile (For Visual Reference)
    • Column Dimension Reference (Pixel Reference)

The Flexible Grid

Converting Static Grids to Responsive Grids

The Future of the Grid

• CSS Grid Spec Explained

Assignment

Read Chapter 3
Create your own grid based page using the sample html we generated in class. You should use different dimensions and gutters for this assignment. Use the approach we covered in class to make sure you understand the process. Please upload the assignment to your web space in a directory on your web space and send me the url. If you need a bit of help here is the general workflow…

1. Create directory structure and base html
2. Generate a Grid ( Experiment with Different Tools )
3. Implement grid on the sample html file using pixels
4. Convert to percentage-based grid
5. Publish