{"id":3094,"date":"2021-12-30T15:36:06","date_gmt":"2021-12-30T15:36:06","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3094"},"modified":"2023-06-12T14:38:25","modified_gmt":"2023-06-12T14:38:25","slug":"css-tutorial-a-calendar-in-three-lines-of-css","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-a-calendar-in-three-lines-of-css\/","title":{"rendered":"CSS Tutorial &#8211; A Calendar in Three Lines of CSS"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; <a href=\"https:\/\/calendartricks.com\/a-calendar-in-three-lines-of-css\/\" rel=\"noopener\">This article<\/a>\u00a0has no byline and is on a website that is even more weirdly specific than this one is, but I appreciate the trick here. A seven-column grid makes for a calendar layout pretty quick. You can let the days (grid items) fall onto it naturally, except kick the first day over to the correct first column with\u00a0<code>grid-column-start<\/code>.<\/p>\n<p>Thoughts:<\/p>\n<ul>\n<li>I\u2019d go with an\u00a0<code>&lt;ol&gt;<\/code>\u00a0rather than a\u00a0<code>&lt;ul&gt;<\/code>\u00a0just because it seems like days are definitely ordered.<\/li>\n<li>The days as-a-list don\u2019t really bother me since maybe that makes semantic sense to the content of the calendar (assuming it has some)<\/li>\n<li>But\u2026 seeing the titles of the days-of-the-week as the first items in the same list feels weird. Almost like that should be a separate list or something.<\/li>\n<li>Or maybe it should all just be a\u00a0<code>&lt;table&gt;<\/code>\u00a0since it\u2019s sort of tabular data (it stands to reason you might want to cross-reference and look at all Thursdays or whatever).<\/li>\n<\/ul>\n<p>Anyway, the placement trickery is fun.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"calendar\"&gt;\r\n  &lt;header&gt;\r\n    &lt;h1&gt;November 2022&lt;\/h1&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;ul class=\"weekdays\"&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"S\"&gt;Sunday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"M\"&gt;Monday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"T\"&gt;Tuesday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"W\"&gt;Wednesday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"T\"&gt;Thursday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"F\"&gt;Friday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;\r\n      &lt;abbr title=\"S\"&gt;Saturday&lt;\/abbr&gt;\r\n    &lt;\/li&gt;\r\n  &lt;\/ul&gt;\r\n\r\n  &lt;ol class=\"day-grid\"&gt;\r\n    &lt;li class=\"month=prev\"&gt;29&lt;\/li&gt;\r\n    &lt;li class=\"month=prev\"&gt;30&lt;\/li&gt;\r\n    &lt;li class=\"month=prev\"&gt;31&lt;\/li&gt;\r\n    &lt;li&gt;1&lt;\/li&gt;\r\n    &lt;li&gt;2&lt;\/li&gt;\r\n    &lt;li&gt;3&lt;\/li&gt;\r\n    &lt;li&gt;4&lt;\/li&gt;\r\n    &lt;li&gt;5&lt;\/li&gt;\r\n    &lt;li&gt;6&lt;\/li&gt;\r\n    &lt;li&gt;7&lt;\/li&gt;\r\n    &lt;li&gt;8&lt;\/li&gt;\r\n    &lt;li&gt;9&lt;\/li&gt;\r\n    &lt;li&gt;10&lt;\/li&gt;\r\n    &lt;li&gt;11&lt;\/li&gt;\r\n    &lt;li&gt;12&lt;\/li&gt;\r\n    &lt;li&gt;13&lt;\/li&gt;\r\n    &lt;li&gt;14&lt;\/li&gt;\r\n    &lt;li&gt;15&lt;\/li&gt;\r\n    &lt;li&gt;16&lt;\/li&gt;\r\n    &lt;li&gt;17&lt;\/li&gt;\r\n    &lt;li&gt;18&lt;\/li&gt;\r\n    &lt;li&gt;19&lt;\/li&gt;\r\n    &lt;li&gt;20&lt;\/li&gt;\r\n    &lt;li&gt;21&lt;\/li&gt;\r\n    &lt;li&gt;22&lt;\/li&gt;\r\n    &lt;li&gt;23&lt;\/li&gt;\r\n    &lt;li&gt;24&lt;\/li&gt;\r\n    &lt;li&gt;25&lt;\/li&gt;\r\n    &lt;li&gt;26&lt;\/li&gt;\r\n    &lt;li&gt;27&lt;\/li&gt;\r\n    &lt;li&gt;28&lt;\/li&gt;\r\n    &lt;li&gt;29&lt;\/li&gt;\r\n    &lt;li&gt;30&lt;\/li&gt;\r\n    &lt;li class=\"month-next\"&gt;1&lt;\/li&gt;\r\n    &lt;li class=\"month-next\"&gt;2&lt;\/li&gt;\r\n  &lt;\/ol&gt;\r\n    \r\n&lt;\/div&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">header {\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: calc(16px + (26 - 16) * ((100vw - 300px) \/ (1600 - 300)));\r\n  justify-content: center;\r\n  margin-bottom: 2em;\r\n  background: #000;\r\n  color: #fff;\r\n  min-height: 10vh;\r\n  text-align: center;\r\n}\r\n\r\nul, ol {\r\n  display: grid;\r\n  grid-template-columns: repeat(7, 1fr);\r\n  grid-gap: 1em;\r\n  margin: 0 auto;\r\n  max-width: 64em;\r\n  padding: 0;\r\n}\r\n\r\nli {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  list-style: none;\r\n  margin-left: 0;\r\n  font-size: calc(16px + (21 - 16) * ((100vw - 300px) \/ (1600 - 300)));\r\n}\r\n\r\nul.weekdays {\r\n  margin-bottom: 1em;\r\n}\r\n\r\nul.weekdays li {\r\n  height: 4vw;\r\n}\r\n\r\nol.day-grid li {\r\n  background-color: #eaeaea;\r\n  border: 1px solid #eaeaea;\r\n  height: 12vw;\r\n  max-height: 125px;\r\n}\r\n\r\nul.weekdays abbr[title] {\r\n  border: none;\r\n  font-weight: 800;\r\n  text-decoration: none;\r\n}\r\n\r\nol.day-grid li:nth-child(1),\r\nol.day-grid li:nth-child(2),\r\nol.day-grid li:nth-child(3),\r\nol.day-grid li:nth-child(34),\r\nol.day-grid li:nth-child(35) {\r\n  background-color: #fff;\r\n}\r\n\r\n@media all and (max-width: 800px) {\r\n  ul, ol {\r\n    grid-gap: .25em;\r\n  }\r\n  \r\n  ul.weekdays li {\r\n    font-size: 0;\r\n  }\r\n  \r\n  ul.weekdays &gt; li abbr:after {\r\n      content: attr(title);\r\n      font-size: calc(16px + (26 - 16) * ((100vw - 300px) \/ (1600 - 300)));\r\n    text-align: center;\r\n    }\r\n}<\/pre>\n<h2><a class=\"button\" href=\"https:\/\/calendartricks.com\/a-calendar-in-three-lines-of-css\/\" target=\"_blank\" rel=\"noopener\">DIRECT LINK \u2192<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; This article\u00a0has no byline and is on a website <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-a-calendar-in-three-lines-of-css\/\" title=\"CSS Tutorial &#8211; A Calendar in Three Lines of CSS\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[268,289,197,103,227],"newstopic":[573,572],"class_list":{"0":"post-3094","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-grid","10":"tag-css-grid-calendar","11":"tag-css-tutorial","12":"tag-web-design","13":"tag-web-designer","14":"newstopic-css","15":"newstopic-html"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3094"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3094\/revisions"}],"predecessor-version":[{"id":3775,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3094\/revisions\/3775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3774"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3094"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}