Project 2_2: Responsive Grid Layout: Adding Lines

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

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

Generate 3 versions — one that is extreme (a) / one opposite of extreme (b) / one that combines the 2 previous (c). One of your variations will be used for part 2_3.

**2_2 — Due 10am Thursday September 19**

Below is 2_2 — focus on text and lines only:

Restrictions and Rules

Same as in previous assignment (no color, just black, no shapes, only 1 font (Inter). You may have rounded corners for 1 version. 

CSS Styles for 2_2

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).

See the Pen CSS Border Declarations by Oliver Roeger (@uic-des) on CodePen.

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.

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)