Skip to main content

Greg McVerry

Learning to Make Pretty Cards at #IndieWeb Summit

3 min read

I enjoy designing web pages with a card metaphor. I can grasp the idea of stacking, expanding, rearranging, and styling a card.

Want to make it bigger? Change the grid rows. Color? Just add a dash of CSS.

Symmetry? I had difficulties.

No more. Enter CSS Subgrid.

My Demo

As the lights got shut down and the wires packed up I finally pushed an update to my my test website that used CSS Grid in the card layout.

screen shot of firefox nightly with dev tool open


 In the screenshot above you see my demo not working, I have Firefox Nightly open but subgrid is being read as an invalid property using the inspector in dev tools. . Trust me it worked. Witnesses exist.


CSS Subgrid does not work  in any browser people use. In fact you have to use Firefox Nightly, the bleeding edge of Mozillas browers with nightly updates, to try Sub Grid.

Moments before I finally figured out what to change I had climbed up to the podium to deliver a failed demo. Seeing people not succeed canoften help learners as much as the greatest triumphs. After trying to show my changes I realized I was demoing on Chrome and all would be for naught. So I blamed the browser and started to bang away.

A brace not a browser did me in. I had an extra "}" in my stylesheet making everything run amock.

How Did I Do It?

I asked for help. Specifically I proposed a session on making pretty cards. Luckily I had the expertise of mJordan step up and join the session. Her designs just inspire me to make better webpages. Together we went through all of Rachel Andrews tutorials, and then I waited for mJords to finish a CodePen.

Next I copy and pasted, and switched this and that until I got it right.

Where Did I Struggle?

I at first tried to section each article into header, body, and footer. Yet no matter how hard I tried to style these sections using card .header my main styles on my website header and footer were coming through. This may have also been caused by the extra bracket but I am not going to waste time finding out.

So I dropped the sectioning tags. Just makes more sense to have just one header and footer on a page for me. So I got a bit of a div soup going on, currently hader, futer, and buty.....I was trying everything until mJordan spotted my extra brace.

I also had to learn a bit of how Kirby templates and PHP specifically. I needed to create an extra div for the card container and place it correctly in the template.

Concerns I Have

 Not many. I am excited to play and style cards in cool ways with subgrid. I do think I might miss the constaint of exact copy. Before subgrid I had to think about each title and summary. They needed to match in length of word and character count. Otherwise asymmetrical cards....ewwww

So a constraint like that lead to great creativity and fun copy. Still as I start to include h-cards and publication info in a card I have begun to use flexbox and CSS Grid together. Doing this right takes too much time and can keep me from content. I think subgrid is going to make card design pretty.


Prev | Home | Join | ? | Next