Proj
2

Tapestry, totem, and collaborative weaving in CSS

Scope

Using visuals derived from a story of your choosing, design and architect a visual environment within a 12 column, 12 row grid using HTML and CSS. Environments should respond to and take advantage of the materiality of the web; scroll, touch, refresh, depth, space, time etc. Projects will be shared and interwoven into collaborative whole.

Project time = 4 weeks in total.



Phase 1 (Week 1)

Submit a written text of your choosing in a new folder within your user folder in our Google Drive. Include the title, author and why youve chosen it. This story will act as a source for all visual content within the project.

Create a static 12 X 12 column grid measuring 1200px X 1200px, using HTML and CSS.

Mine looks like this for demonstration purposes, but go nuts though, make pixel art.

Here's the HTML you should end up with

Mine your story for visual ideas; images, movement, themes, tone etc. Create a list of these ideas and then collect or create them for use in your project.

Phase 2 (Week 2)

Develop your tapestry. Sketch on paper then use Indesign to layout the visuals you mined and created into static grids. Here is an inDesign file that uses compound shapes. Feel free to use this to start from.. You'll notice that positioning this many background elements is tedious, I introduce a script below which addresses this in browser. You can simulate this in Indesign by creating compound paths out of groups of boxes. Select the boxes that you want to share a single background image and then choose Object > Paths > Make Compound Path.

You can even do 'File > Export > as HTML' from Indesign. It does a crappy job, but its a start. Heres an experiment I tried by exporting from inDesign.

Here's one I made of Kate Moss.

Move your design into the browser Use HTML and CSS to position your visuals into the grids assigned last week.

You may find jQuery helps You can position your background images across multiple divs, just like we did in Indesign with compound shapes, by using a jQuery loop to look for and measure them. This requires two things;

1. A jQuery library (there is one in the 'js' folder in the demo download below. Heres how to link it up; in HTML head write the following (where 'assets/js' is the path to the file) <script src="assets/js/jquery-1.12.1.min.js">.
2. A little inline script like this to intitiate the call (this should go near the top of your <body> tag:

All the demo files including HTML, CSS and jQuery are zipped here. Please feel free to use this as a codebase.

Design interactions that support your concept/story (purpose is not to retell the narrative story but to practice abstracting written information into a visual, web context). Focus on styling elements, layering, backgrounds, and using CSS transitions, with interactive operators like hover to build up density.

A brief primer on CSS Transitions is here.