Commit 2c23357d authored by Laura Kalbag's avatar Laura Kalbag 😴

Remove styles and write post about no styles for CSS Naked Day

parent 89e5a2d4
---
title: "CSS Naked Day 2020"
date: 2020-04-09T10:05:18+01:00
tags: ["CSS", "semantics", "HTML"]
categories: ["Website"]
body_classes: "blog"
colours:
primary-bg: "58,95%,83%" # hsl(58,95%,83%)
secondary-bg: "60,76%,76%" # hsl(60,76%,76%)
text: "212,47%,25%" # hsl(212,47%,25%)
linktext: "193,100%,19%" # hsl(193,100%,19%)
darklinktext: "0,0%,0%" # hsl(0,0%,0%)
brilliant: "208,100%,44%" # hsl(208,100%,44%)
tab-two: "83,45%,80%" # hsl(83,45%,80%)
tab-three: "152,28%,74%" # hsl(152,28%,74%)
tab-four: "189,37%,64%" # hsl(189,37%,64%)
tab-five: "200,54%,57%" # hsl(200,54%,57%)
tab-six: "205,68%,51%" # hsl(205,68%,51%)
---
Today is [CSS Naked Day 2020](https://css-naked-day.github.io). Inspired by [Eric Meyer](https://meyerweb.com), I’m joining in for the first time in *years*, so today my website has no CSS.<!--more-->
## What’s the point?
The point of removing the CSS on your website is to draw attention to how the content still works in just plain HTML. It’s close to a visual equivalent to how screen readers access a website’s text content. Screen readers can’t interpret the fancy styles (mostly), but they still understand the content. You can still read the links and know heading text from body text. This is all because this website and its contents were written using [semantic HTML](https://24ways.org/2017/accessibility-through-semantic-html/). If you can see the page in your browser, the browser’s default styles present you with a little bit of formatting based on my HTML choices.
## You should give it a try!
You don’t need to make your site naked for all the public to see. Maybe just try it in the privacy of your own home. Use it as an opportunity to find out where you’re using `<div>`s and `<span>`s where you could be using a more descriptive element. Try disabling styles in your developer tools and browsing other sites without CSS for the day.
If you want to know more about semantic HTML, [Eric Bailey published a blog post about using semantic markup](https://ericwbailey.design/writing/how-to-not-make-a-resume-in-react.html) just a couple of days ago, and it’s a great place to start.
\ No newline at end of file
......@@ -12,7 +12,7 @@
<meta name="description" content="{{ .Summary }}">
<meta name="author" content="{{ .Site.Params.publisher }}">
<link href='{{ "css/style.css" | relURL }}' rel='stylesheet' type="text/css" />
<!-- <link href='{{ "css/style.css" | relURL }}' rel='stylesheet' type="text/css" /> -->
{{- partial "palette.html" . -}}
{{- block "favicon" . -}}
......@@ -42,6 +42,7 @@
{{ end }}
<main id="content">
<p>Why does my website look so naked? It’s only for 24 hours! <a href='/css-naked-day-2020'>Read my blog post about CSS Naked Day</a>.</p>
{{ block "main" . }}{{ end }}
</main>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment