css dollhouse

what is the css dollhouse?

The CSS Dollhouse is an academic resource for my students and people new to web design who want to learn the ways of web standards and responsive web design through a lens of artful possibilities, a spirit of experimentation, and creative inspiration. Cascading style sheets (CSS) is a programming language that shapes the presentation of html content on web pages. Without it, all web sites would have white backgrounds, black text at different sizes, and links would be blue with underlines — super default-y. CSS can “talk” to html, telling it how to display (or “style”) itself through hundreds of properties and innumerable values for them. The properties encompass everything from layout, images, and typography to videos, interactivity, and animation. CSS is capable of sophisticated visual and interactive richness, all while being friendly to devices of all kinds and sizes, which is why it’s the preferred choice for responsive and intrinsic web design.

While not all designers need to be able to code to design for interactive media on the daily, knowing how it works, what it’s capable of, and how to design for it accurately as a professional part of a team, is a huge advantage. Plus, with tools like Webflow — a rich, no-/low-code design and visual development platform — designing and producing custom, non-templated sites independently with this knowledge is more possible than ever.

why a dollhouse?

The box model in web design is a foundational concept connected to the basic structure of html elements and their relationship to other elements on the screen. In the box model, it’s understood that every piece of html content — from an individual element, like the text inside a button, to invisible containers that hold entire pages together — is comprised of a transparent box with content in it that has spatial and structural characteristics on all four sides. And can be visually controlled with CSS. Efficiently. Because the box model is literally rectangular in structure —  a skeletal view of a web page would reveal a stacked, brick-like structure with worlds of content nested inside of the rectangles. A cross-section of a dollhouse is a good mental model to be able to visualize this. I use this model to open up the medium of web coding to show how it works. This model also helps me present it to designers in an approachable, and visually interesting way. The dollhouse model allows for numerous vignettes that contain micro-demos of individual and/or combined css techniques served up in bite-sized chunks. Artistically, it also allows for visually rich, interactive material as a point of engagement in the process of learning.

design perspective

In a medium that tends to intimidate when it’s unfamiliar, the CSS Dollhouse site design prioritizes liveliness and graphic play to help visual learners of web coding to think imaginatively when learning sometimes-complicated techniques. As Jen Simmons is known to express, and as Dann Petty has more recently stated (er, shouted), the web needs a jolt of some new and strong creative direction. Much of what we experience on the web is overly standardized/conventionalized, leading to sameness and staleness, but the medium is capable of so much more. While the dollhouse itself feels a bit like being a kid in an interactive candy store, I’ll reiterate here what I emphasize in class — that techniques should be used judiciously. Good design doesn’t have to equate to excessive visual gymnastics. Artistry in UI/UX design — framed around a meaningful and memorable point of view (concept), good structure & hierarchy, a great sense of space and typography, and awareness of human behavior — is a strong form of interaction in and of itself.

The design of this site is intentionally unlike other technique-based sites, which can be visually characterized as either painfully dry and low in visual sensitivity (due to being code-centric), or easily identifiable with a now-common aesthetic language for web-centered content; that is, a look that’s a visual shorthand for high-tech (think dark and moody with LED-style purple gradients and thin lines all over, for example). I believe this, in part, can limit how designers visualize for the web. In short, I noticed a void in instructional resources that emphasize visual delight and artistic variety in the demonstration process.

content

In addition to the vignette demos themselves, the CSS Dollhouse is labeled with short, tag-like keyword-based captions. An icon system for the vignettes provides more information: concise notes on technique/coding with links to resources for further learning, and citations with source links for the art. All of this is discoverable via the simple, find-in-page search feature of every browser and observable in detail via the inspect element feature of the major web browsers.

Additional rooms will continually be added to the site as separate pages to demonstrate some subjects in more depth. There are links ready for these future spaces, which will be activated as they’re completed. Another feature I built in that will be developed is the “guest house” on the grounds, where guest designers will be invited to do a css demonstration of their choosing in their own, named room. An image of a single, domestic object from my CSS Dollhouse image bank and a color palette will be provided as a starting point for the designer to creatively play with in their room.

imagery and the use of material in the public domain

Images in this site are a combination of original images of my own and images of artifacts and artworks in the public domain. Some of my images used in this site were created prior to the inception of this project, while some were made specifically for this site after the concept came into focus. My images are primarily colorful photographs and scans of old toys and objects from another era, and vector elements. I use this material as creative fodder and placeholder images in technical experiments and demonstrations in order to create a lighthearted, engaging experience that invites/encourages a student’s imagination and problem-solving skills for web media and interactive, experience design challenges.

Images from the public domain are incorporated to flesh out the conceptual environment of the site, and have been edited or remixed for visual story-telling. This has the additional benefit of casting light on artifacts that may otherwise go unknown and unseen because of the necessary storage, conservation, and preservation of rare and special objects. Regarding the use of material in the public domain, Grammy award winning musician/composer/singer/songwriter and maestro Jon Batiste said this about his own re-imagined versions of Beethoven’s work while learning it when growing up: “… It’s been 256 years. It’s due for a update. You know, music is, is… everything in the public domain — especially in New Orleans — you’re in conversation with it. You mold it and you add to it. And it won’t revoke anything that exists. It’s only adding to the continuum of human creativity, baby.”* [ raucous applause by this author :D ]. I cite sources in the site for anything not my own, giving proper credit to collection holders, where known. //// Badminton illustration, above left: Unknown creator, “French Peddler's Trade Catalog (Echantillon 1),”1806–1813. Folio 89, (64X68.1); courtesy Winterthur Museum, Garden & Library.

colophon

Designed in a Bechmore Books large-format sketchbook and in Figma. Built on a 16" Apple Macbook Pro in Webflow, using css grid, flexbox and design system tooling: classes (influenced by Finsweet’s Client-first system), variables, components, component slots, and component variants. Some code is AI-assisted with Claude by Anthropic. Tested on cinema displays and phones for responsiveness.

Typography includes Verdana, a screen-centered sans serif designed in 1996 by internationally lauded type designer, Matthew Carter; and Playfair Display, a serif designed by Claus Eggers Sørensen in the tradition of 18th century transitional typefaces like Caslon.

credits

This project was done while on a summer fellowship and fall-semester sabbatical in 2024, made possible through professional development support from NKU and the School of the Arts. It was partially made on a two-week Maker-Creator Fellowship residency at Winterthur Museum, Garden & Library during the sabbatical. Winterthur’s environment, collections, and its position as a place of cross-disciplinary research for diverse scholarship and creativity in the realm of historic, American decorative arts made it an extremely rewarding source of inspiration for the project. The enormous, former house-turned-museum of the of the Henry Francis du Pont family and vast collections of rare books, designs, and ephemera within the Winterthur Library were particularly inspiring. I studied graphic objects from the museum and library’s special collections, including paper toys, and print-based artifacts such as “Mechanical Animal Series,” by Father Tuck, “Catalog of Doorknobs,… Etc,” and exquisite, chromolithographed package designs, among other stunning artifacts. Inspiration was also drawn from the Thorne Miniature Rooms and other unique holdings at the Art Institute of Chicago, as well as the Schiff Library at the Cincinnati Art Museum, the KSB Miniatures Collection at the Kentucky Gateway Museum Center, and via NKU’s Steely Library and interlibrary loan.