Comments on: A Calendar in Three Lines of CSS https://css-tricks.com/a-calendar-in-three-lines-of-css/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 29 Dec 2020 21:57:06 +0000 hourly 1 https://wordpress.org/?v=6.2.2 By: Sara https://css-tricks.com/a-calendar-in-three-lines-of-css/#comment-1766769 Tue, 29 Dec 2020 21:57:06 +0000 https://css-tricks.com/?p=331598#comment-1766769 While the CSS is really nice, I saw a conversation recently between some a11y people that suggested using tables for calendars is actually recommended. The argument was that a calendar is essentially tabular data.

]]> By: Emma Humphries https://css-tricks.com/a-calendar-in-three-lines-of-css/#comment-1766435 Sun, 27 Dec 2020 08:18:24 +0000 https://css-tricks.com/?p=331598#comment-1766435 I had an eInk display for a Raspberry Pi looking for a project, and that link inspired me to build a project using that technique: https://glitch.com/edit/#!/7-calendar-cafe

]]> By: Atumah Daniel https://css-tricks.com/a-calendar-in-three-lines-of-css/#comment-1766401 Fri, 25 Dec 2020 20:10:25 +0000 https://css-tricks.com/?p=331598#comment-1766401 Pretty sweet trick

]]> By: Russell Heimlich https://css-tricks.com/a-calendar-in-three-lines-of-css/#comment-1766397 Fri, 25 Dec 2020 06:15:35 +0000 https://css-tricks.com/?p=331598#comment-1766397 Oh man I remember doing calendars with

<

ol> elements back in 2009. https://www.russellheimlich.com/frontend-tips/ordered-list-calendar.htm

It’s like the ghost of Christmas past.

]]> By: Hashim Warren https://css-tricks.com/a-calendar-in-three-lines-of-css/#comment-1766395 Fri, 25 Dec 2020 03:28:44 +0000 https://css-tricks.com/?p=331598#comment-1766395 You’re right – that is a weirdly specific website. I searched Twitter to see if the person outed themselves, but couldn’t find anything

I love the internet.

]]> By: Robert https://css-tricks.com/a-calendar-in-three-lines-of-css/#comment-1766386 Thu, 24 Dec 2020 17:45:46 +0000 https://css-tricks.com/?p=331598#comment-1766386 I haven’t done a lot of work with CSS Grid yet and this seemed like a great opportunity to test it out. For my Calendar I moved the dates into a pseudo element that uses counter() to increment them automatically, so that I could allow for content to be written inside each date without also having to have additional elements to separate them.

I also made the Grid offset a CSS variable so that it was easier to repurpose the same code for more months, and used a bit of simple vanilla JS to apply an extra class to today’s date so that it is showcased a bit more.

But like I said… I’m new to Grid and the biggest ‘oopsie’ I keep running into is how the Grid collapses on smaller screens.

https://codepen.io/rkieru/pen/JjROdEe

Looks great on desktop, but once you hit a certain breakpoint the actual calendar elements become subject to the dreaded CSS flow issues. I’ve tried adjusting the wrapper element to specify a maximum width but that doesn’t seem to resolve the issue. So is this a Grid thing that someone could enlighten a newbie to, or am I just missing something?

]]>