Declarations is an ongoing artistic research into the poetic materiality of the CSS web-standard.

Declarations vitrine in Constant


blowing on our collective pad at local windspeed
printing a scrollbar from the browser to a thermal printer
is web-design like fashion design?
some work of the worksession displayed in the vitrine of Constant
printing the Declarations guestbook

With

What is CSS ?

CSS (Cascading Style Sheets) tells browsers, phones, apps, computers, eBooks, some printed books, desktop environments, receipts and smartwatches how information is displayed. It declares how text flows, spaces are divided, typography is materialised and different planes are layered. It takes care of color, sizing, depth, movement, animation, responsiveness and (to some extent) accessibility. Every "sentences" of the CSS language is called a declaration.

CSS is a declarative programming language, meaning it "expresses the logic of a computation without describing its control flow". Programming languages that we most often use and quote aren't declarative, but imperative: we precise explicit steps for the program to execute, called algorithms - like a recipe. Here we don't explicit algorithm, but we declare (or describe) the outcome directly.

Worksession

During a one-week worksession with artists, writers, amateurs, designers and hackers, we inspect a shift in design practices emerging from the nature of the web: as it is made of text, designing become writing. This fundamentally differentiates it from other design paradigms that imposed themselves as the normative way to publish with software (namely Adobe software). We no longer place elements or delimit spaces with gesture but with words.

We explored how the malleability of this language is used to dialogue with technology. Similarly to choosing words to tell a story, designing with declarations means we state our intentions and encode narrations into the things we make.

workspace of the worksession participants
the participants cooking together
crafting a flower bouquet out of thermal printed CSS gradient
presentation on CSS stories given on the first day

Declarations guestbook

Declarations has a guestbook, where every artists or collaborators can sign. In the guestbook you don't sign by picking up what you write but by shaping the writing itlself through CSS. The same overly simple HTML structure become a playground of expression, a collections how of everyone write CSS differently, of our favorite properties of the languages, of our cultural situation, of expressions that matter to us.

We printed the guestbook on a thermal printer and made it physical.

extension.shovel

This experiment tries to look at user customisation, and how can we redesign websites that we didn't made? On myspace or tumblr, people made custom themes for their webpage, and before that on neocities. Nowadays social websites like instagram or twitter are smooth and their design is imposed and alienating.

We made a firefox browser extension that show the root CSS element on every page, and allow us to modify those exposed variables. Those can be the background colors, the font-size, or other more surprising ones. What hides in the roots of a website?

Our modification are uploaded to a server, and every user of the shovel extension is connected to the same server. So if someone change a root variables on a website through the extension it does it for every users of the extension.

shovel.declarations.style

shovel on gitlab

extension.weather

This experiment uses a weather station API (Application Programing Interface) and connect it to your daily browsing experience. If there is wind outside the wind also blows on the element of any webpage. If there is humidity outside elements become more blurry. During the sunset, images turn sepia.

The weather extension is a poetic way of showing how websites are continuously changing, how they were never meant to be a fixed version of themselves. Designing for the web means embracing change, connectivity, and being surprised.

weather on gitlab

Where is te sky of a website?

On February 15, 2024, Melooon asked on the melonland forum the following question: Where is te sky of a website?: "Everything has an up and a down, everything has an under and an over, and there is always a place that you come from and go to :eyes: So is the sky of a website at the top of the page (with the ground in the footer)? Or are you in the sky looking down onto the site like a bird looking onto the earth? Or is the site the sky itself and visiting it is like looking up at the clouds? Are websites skies that we look into and away from our world? Or the other way around? Or are they equal to us, sharing the same horizontal horizon we see when we look out over a sea? And vice vera is code the underworld watching us, or are we the underworld looking into our browsers? :evil: :eyes: :tongue:"

Playing with every english propositions such as "on", "above", "around", "below", we created a metaphor playground, a narrative website that unfold the question in a surrealist and playful manner.

tell.declarations.style/skies

a thermal printed scrollbar (4m x 68mm)

During the worksession, we used a thermal (ticket) printer a lot.

The standard format, alongside with its strong limitation was an interesting tool to play with: what happens if we print whole website on it?

A website is a media that scroll, like a codex. Contrary to a book, where the content is divided in pages. The thermal printer lies at the intersection of the two: it prints on paper, but there is no page, it preverses the scrolling structure of a website.

declarative fashion & ChattyLARP

Through conversations we started to think about Drag as a somehow related to CSS, as an act of changing shapes through performativity and protocols. It is about expression of the self, and there is some sort of declarativeness to it. Later the discussion unveiled another forum thread of Melonland stating: "Web design is fashion design ?? Your thoughts on self expression online?".

We translated this idea into a LARP session, through Chatty-pub...

What is LARP?

LARP stands for live-action roleplay. Like Dungeons & Dragons, it involves taking on the role of a fictional character and navigating a story run by a game-master (GM). Unlike Dungeons & Dragons, you physically embody your character rather than narrating their actions out loud. It's immersive, collaborative storytelling - with lots of spontaneity and unexpected twists!

There are many different LARP traditions, but the one we're going to focus on is parlour LARP: indoors, no foam weapons, just walking around and talking in a smallish group of people.

What is Chatty-Pub?

Chatty Pub is a design tool built by Hackers and Designers. It uses the Zulip chat interface, a messaging system similar to Discord or Slack. Chatty Pub allows you to write CSS styles in a special channel (#rules), and then apply those styles to different messages by 'reacting' with emojis. Each emoji has its own bit of code attached to it.

More details on Chatty Pub can be found on www.hackersanddesigners.nl/chattypub

Bringing the two together

On Thursday 4th April 2024, we ran a LARP with eight players and one GM to test out the storytelling potential of Chatty Pub.

The premise of the LARP was a digital seance. There had been a vicious murder - but the evidence was inconclusive enough that the detective called in a psychic. The Ghost of the deceased was summoned into the chatroom, where it could only communicate by applying CSS code to other players' messages. No one else could use CSS code.

Each player had a special role. The identities of the Ghost, the Detective, and the Psychic were known to everybody. The remaining five players - all of whom were suspects - each had their own relationship to the murder. We did some collaborative world-building to establish the details of the murder, then got straight into it.

Ultimately, although the Psychic correctly determined the identity of the Killer, enough doubt was created that justice was not served!

Reflections

While the LARP went well overall, we had a lot of thoughts on how it might be improved. Allowing some CSS code to be prepared beforehand might help the Ghost engage in roleplay more; we would love to try a version with only messaging and no verbal communication around it.

Protocols like such felt a good entry point to explore the performativity of the CSS language further. Could it become a theater piece? A video game to play with long-distances friends? Can the writting of CSS go into the world of electronic litterature?