Special Issue 26: Declarations – display & position
Over this trimester, we researched on CSS, exploring the CSS Working Group publications, email archives and drafts.
We learned a lot about the process of defining and naming properties; who are the most active members and how all this impacts the shape and uses of the Web.
Simultaneously, we built interests and projects directed by CSS possibilities, limitations and hacks.
Here is the digital flyer we made to promote our public event.
Specific Viewer
Fascinated by the new horizons brought by experimenting with browser extensions, we teamed up to work on one.
Specific Viewer is a playful and educational Firefox web extension that highlights and informs about the CSS values attached to display and position.
It helps finding and understanding the different values and involves a slight treasure hunt, taking away the intimidating looks of the web inspector!
How it works: When the extension is active, it displays an info box on the screen. When the user hovers any element of the page, that element is highlighted by a background colour and/or an outline.
Background colours refer to the display and outlines refer to the position.
The corresponding CSS values are also highlighted in the info box, and given a gem when found – that's the treasure hunt!
Finally, each value is pointing to its documentation page on MDN, inviting the user to learn and understand better how display and position work.
The extension has unfortunately not been submitted to the Firefox extension store.
Supervisual Hyperzine
The Supervisual Hyperzine is a thick zine grouping screenshots of the whole class' CSS experimenting over the trimester.
The images showcase typographic experiments, broken websites, shapes & colours or even pictures of screens!
It was put together through a meticulous workflow: people could upload their pictures to a shared cloud storage. As a team, we decided on different categories to group the images together and sorted them. To create the pubication, we created a Jinja template, allowing each one of us to modify it easily. This template was attached to paged.js to allow us to preview the paginated content and make on some layout decisions.
