At the beginning of December as I started enjoying a new round of Web developer "Advent Calendars" like 24ways.org, I thought about a project that I was involved in 6 years ago. I was part of a scrum team for SAVEUR, a food, entertaining, and travel magazine. The SAVEUR team had an idea for a cookie advent calendar.

I really liked working with the SAVEUR team because they always had creative ideas for layouts. I also appreciated that they valued the input of the developers to help improve the project by bringing our code creativity to the table.

When we met for a scrum meeting, we were shown a mockup of what they wanted. They had hired a New York illustrator who created 5 rows of 5 cars each. The cards were slightly different sizes and had different skews. They wanted it to have an organic feel. They had some ideas for what they wanted the interaction to be like.

They wanted some kind of action when the user hovered over the individual cards and then they wanted the cards to flip to reveal the cookie card that linked to a recipe. They wanted it to act as a true Advent calendar where users would return to the site to click on other recipes that became available on a daily basis. Finally, they wanted the page to remember the cards that the users had already chosen and flipped.

Final solution on SAVEUR.com

For the original layout, I decided to use absolute positioning for each of the different cards. I am not quite sure why I chose to do it that way. I am guessing some of it had to do with where I was at in my CSS skills at the time and some of it was influenced by browser capability at the time. The project had a quick turn-around time so I am guessing that was also a factor in my decision at the time.

CSS Animations were pretty new at the time. I was looking forward to dabbling into it. My first pass at the hover animation for the cards was a type of "pulse" animation. We decided against it for a variety of reasons including it might be problematic for those with seizure disorders. After some experiementation, we decided on a "shake" type animation. It ended up being implemented in JavaScript. My skills were not advanced enough at the time to tackle the JS so that was done by the back-end developer.

Re-creation

As I revisited the project, I was thinking about how I could easily recreate it using CSS Grid. I started learning and implementing Grid layouts about a year ago and have continued to build my skills this year. I thought it would be fun to re-create this project with my new skills.

As I looked at the screenshot I had of the original page, I determined the sizing I needed to create it in Grid. I still used some absolute positioning to offset the individual cards and allow some of them to bleed into the grid gaps. I realized as I was writing this that I did not need absolute positioning but could just use negative margins. This simplifies the code just a bit.

The original layout was a fixed width layout and I decided to stick with that for this re-creation. I defined a simple 5 column grid of 181 pixels width with a vertical gap of 10 pixels and horizontal gap of 15 pixels between the columns.

Thanks to a Little Snapper Web Archive, I was able to get the image sprites and CSS code I had used in the original project for background positioning of the the different card images.

The original shake animation was written in JavaScript, I updated this version to use CSS animation. I wrote brand new scripting for the functionality that included:

  • Flip the card on click
  • Only enabling cards to be flipped if they were the current date or past date in the month
  • Created a cookie to keep track of the cards that had already been flipped
  • Added the functionality to reset the calendar (the cookie) so that none of the cards were flipped


2,403 1 14