Mini-Exercise: Digital de Stijl

The essential idea underlying de Stijl’s radical utopian program was the creation of a universal aesthetic language based in part on a rejection of the decorative excesses of Art Nouveau in favor of a simple, logical style that emphasized construction and function, one that would be appropriate for every aspect of modern life. It was posited on the fundamental principle of the geometry of the straight line, the square, and the rectangle, combined with a strong asymmetricality; the predominant use of pure primary colors with black and white; and the relationship between positive and negative elements in an arrangement of non-objective forms and lines.

– de Stijl, Guggenheim

Composition II in Red, Blue, and Yellow, Piet Mondrian, 1930

Although de Stijl’s intellectual project may seem unrealistic or misguided today, their impact on modern art and design is evident. Removed from their original context, Mondrian’s abstract paintings have become a pervasive visual signifier for Modern art. This phenomena is presumably at least in part to the strict rules behind Mondrian’s compositions which have in turn made Mondrian-like visuals easy to replicate and allude to.

Their strict compositional rules also make Mondrian-like works a helpful learning tool for CSS Grid. In this exercise, we’ll each create a Digital de Stijl ‘painting’ using CSS Grid.

Files

Instructions

  1. Working with the Grid Starter Kit, create a 3 by 3 grid within a 900px by 900px div using grid-template-columns and grid-template-rows
  2. Add at least one of each: red, blue, yellow, and white grid elements
  3. Using the de Stijl principles which favor asymmetry and a strong positive and negative figure ground relationship, experiment with: grid-row-start, grid-row-end, grid-column-start, and grid-column-end by adjusting the placement and size of specific grid elements. Consider adjusting the resolution of your grid to get a more complex composition
  4. Add a link from your class site to the exercise, upload, and then post a link to your Digital de Stijl in the [#weekly-updates]() channel

Note: This exercise is optional, if you choose to complete it, your composition will be added to a "Gallery" along with your classmates work

References

Resources