• Ê
  • Â

5 Outline

( Download options
Sep 10

Version 1.05

Get the theme:

Updates tracked through Github repository and on Twitter #charrettetheme

A design charrette traditionally involves reviewing visual work for classmates, colleagues and mentors to interrogate and improve. The studio classroom of today hinges around a projector, unprinted assignments, digitized readings, video demos and online projects. Charrette was initiated in 2011 to welcome this shift from physical to digital, to facilitate the workings within the classroom, and to encourage sharing between classes and institutions. It’s quick for the instructor to set up, the students to use, and for your community to access with a Web browser and a link. It is being released today as a free theme for WordPress under the MIT Open-source License (revise and use as you wish). I hope it leads to some interesting discussions and gets put to good use.

Download zipped theme

4 Overview   b Add comment

Leave a Reply

B Content Strategy and theme features

The following philosophies and features drive the design and functionality of the theme:

Posts, posts and more posts

Charrette uses standard WordPress posts and categories to help store and organize the slew of material that arises during a semester-long course or intensive workshop. Forget about pages. Forget about custom post types with custom taxonomies. The post is the smallest unit and can be attached to as many categories as you need. Content can often be described and categorized multiple ways. It’s a reading and belongs to Unit 2. It’s a link and a reading. It’s an assignment and part of Unit 3. Charrette uses standard posts and special category names to organize course content.

Prioritizes what’s new, but with easy access to all content

The latest activity appears by default as an infinitely scrolling feed. The outline tab takes the place of a traditional syllabus — with posts, readings and other content organized into chunks (units, assignments, by week). Categories within the “Outline” category get placed in the outline. Posts categorized as Assignments get placed in the Assignments tab.

Searching works well in WordPress

Searching in WordPress is a great way to find content. That’s why the search icon is played up so highly.

Take attendance with the “Absences” custom post type

Note and record absences as they happen, with full disclosure to the student. The absences custom post type is an admin-edit-only area where you can keep track of attendance. The attendance record only shows up if a user is logged in.
More on attendance

Author pages act as a class portfolio

Students can upload their work to the website and connect it to the assignment. Each student’s final page becomes the student’s class portfolio. WordPress stores the high-resolution files and the Contact Sheet plug-in displays images at the sizes that you set in the Media settings panel.
See an example

b Add comment    

Comments are closed.

B Installation instructions

A theme in WordPress is the design and functional layer that sits on top of the WordPress content management system. If you’ve used WordPress, you’re already up to speed. Simply install the theme (with or without Contact Sheet image plug-in).

Step 1: Download the theme for free

Download a zipped version of the theme with the Contact Sheet plug-in (for image handling), or fork/download the theme from Github.


Step 2: Install WordPress.org on a Web server, upload theme

If you don’t have a hosting account (Dreamhost, school server, etc.), nab a domain name and a shared hosting account. Most hosting services have one-click installations for WordPress and automatic updates. Upload the theme and plug-in as .zip files.

Step 3: Add users

circle_fade1Add yourself, your TA, and your students as users. Have all users set up a Gravatar, bio and URL
More on Gravatars

Step 4: Change your Discussion Settings

Be sure to limit discussions to registered users. This way, you won’t have to worry about comment spam. It also encourages your class to be logged in, which encourages more activity.


Step 5: Add posts and categories

Add an Outline and an Assignments category to be parent categories for your curriculum. Add other magic categories as you add content.
More on magic categories

b Add comment    

Comments are closed.


w Material Explorations in Digital Tectonics
Aug 24

Boston Architectural College

í Sample Assignment: Draw found objects with CSS

Posts categorized as “Assignments” or “Homework” will be listed underneath the “Assignments” tab on the main index. This tab is where the instructor’s assignments can be easily seen in reverse chronological order.

The below project is something I assign to sophomores at RISD as part of a three-week formmaking Web workshop titled “Digital Bits.”

Above: Specimen of Paul Elliman’s, “Bits” typeface

Designer Paul Elliman has been collecting small found objects that resemble typographic glyphs. Whether found on the side of the road, at someone’s house or at the hardware store, the objects become silhouetted and kept at actual size. He calls the monochromatic collection of objects, “Bits”. The formal language used can be traced to photograms, a one-to-one photographic black and white copy of an object. The photogram effectively makes two dimensional and graphic any three-dimensional object.

This assignment asks you to collect objects of your own, whether in your home, around town, at RISD 2nd life, etc., and draw them using HTML and CSS. Do not choose electronics. Try a band aid, for example. With CSS3, it is possible to draw non-rectangular shapes right in the browser. You may use any foreground and any background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your original object as needed, but the goal is to make a faithful copy of the object. Consider the perspective that you choose for the object. You are encouraged to sketch out your objects in your F&C course notebook first.

Make five digital bits. Create an html file for each digital bit, and upload your html files into a post on the class website. Attach the post to the category Assignment 2. Title the post with the names of your bits (if they have names).


  1. Bike Lock Example
  2. You may make use of these CSS-drawn shapes from Ali
  3. See results from the previous years
b Add comment    

Comments are closed.


w Relational Design
May 27



w Visual Systems
May 27