Skip to main
Article
Generated art using CSS Grid inspired by Jared Tarbell

Beyond Tellerand

Grid Systems & Vue Invaders!

I love when conferences give me the opportunity to travel around the world. I love it even more when conferences go beyond the web to find inspiration from other fields. Beyond Tellerand (Düsseldorf, Germany) was the best possible combination.

Amazing talk by Miriam Suzanne at the Beyond Tellerand conference about the benefits of using plain CSS instead of heavy library for your grid! Very useful and inspiring. Thanks!

Right from the start, Beyond Tellerand was unlike other conferences. Rather than hearing familiar talks about familiar technology, the first day took us on a journey through web annotations, intricate illustrations, design for non-designers, robots with personality, stop-motion tinkering, and programatically-generated art.

I spoke on day two, followed by “bleeding edge” accessibility, large-scale projection-mapping, the women who built the internet, and a lesson on ethics in tech. How could I even begin to match the inspirational scope of these other presenters, while talking about layout?

I couldn’t – but I did have some fun. Inspired by the generated art from Jared Tarbell and the Levitated Toy Factory, I picked one of his art pieces to recreate with CSS variables (aka custom properties) and CSS grid layouts.

Miriam showing a slide of the CSS Grid generated art inspired by Jared Tarbell

I spent that evening studying his image, and translating it into HTML and CSS. My first draft relied heavily on :nth-child() selectors, leading to an absurd 3MB CSS file. By adding custom properties in the HTML, I was able to streamline things dramatically. This second draft relies on HAML to generate the required HTML for a static (but responsive) result.

That went over well at the conference, but I decided to improve it after the conference was over. By moving the component logic into Vue, I could interact with the controls dynamically – and animate the changes: shuffling, resizing, and more. Finally, I pulled in an Asteroids-inspired browser snippet so you can destroy your creation. Enjoy the invasion!

See the Pen Vue Invaders! by Miriam Suzanne (@miriamsuzanne) on CodePen.

I highly recommend watching the other talks. Here are a few of my favorites:

Recent Articles

  1. see all Article posts
  2. Nested semicircles,
from innermost and slowest
to outermost and fastest-moving:
nature, culture,
governance, infrastructure,
commerce, fashion
    Article post type

    When Our Tools Hold Us Back

    What happens if the ‘pace layers’ get out of sync?

    Ask not just: How well does it work? But also: How well does it fail? What happens when something goes wrong? —Jeremy Keith

    see all Article posts
  3. Wireframe of card elements
in different sized containers --
some laid out vertically in small spaces,
others horizontal when there's room.
    Article post type

    Use the Right Container Query Syntax

    Size queries are stable, and shipping in browsers

    Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

    see all Article posts