Assignment 2_2 Responsive Grid Layout: Adding Lines

Design due: Thursday, Sept 15 / Coding due: Thursday Sept 20.

Here we'll be adding lines to the compositions. Lines shouldn't be simply used for the purpose of decoration.

Lines should rather be used to:

• Enforce/enhance visual hierarchy (combined with headlines, for example)
• Separate or highlight information/sections
• Visually group information/sections

Restrictions and Rules

Same as in previous assignment (no color, just black, no shapes, only 1 font (Proxima Nova).

CSS styles for this assignment

Write the CSS rules using so called short-hand border properties. In the case of lines it's a combination of thickness, kind and color values. For now, only use the "solid" kind with different thicknesses .

In the first example below the border is applied to each side of the h1 element. In the second example the border is applied only to the top side. If you don't define a side the border will be allied to all sides (third example). The fourth example is identical with the third but doesn't use the short hand property (combined properties and values = more code).

Task

As a start pick one of the previous compositions. Then create at least three responsive compositions with added lines. Before you start coding, make sure you start new HTML and CSS files for each of the composition. Avoid overwriting previous assignments or variations. Keep each result of each phase.

Due for review Tuesday, Oct 10 (beginning of class).

Tips

• Don’t mix up too many different sizes and weights
• Avoid centering elements
• Combine different proportions
• Create contrast (big/small, thin/bold, tight/open, narrow/wide..)
• Group chunks of information and look for relations between those groups (sizes, spaces, alignments)