Assignment 2: Draw two abstract compositions

John Caserta edited this page Mar 23, 2018 · 5 revisions

For your first assignment you figured out how boxes (divs) could form the basis of a simple drawing. A website is often made up of such planned interplays between space. Sites also may be more haphazardly produced — with elements colliding or interacting in unexpected ways based on the content or design itself. Assignment two asks that you play with css grid to come up with abstract compositions. The webpages should change when the browser changes viewport widths.

Make use of the following css properties to achieve a dynamic composition

  • z-index using explicit and implicit grids can create unexpected relationships
  • rgba colorspace
  • mix-blend modes
  • grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); see my example
  • Consider how multiple grids using absolute positioning and floats can add options

Produce two distinct compositions. You should use css grid as the core layout principle

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.