CSS Naked Day

“Show off your semantic <body>”: April 9 is CSS Naked Day!

If you’re participating, add or update a file in participants!

If you have been participating and are not listed, feel free to make a pull request and give us reasonable clues. A link to an archive URL documenting your participation is ideal, but you might also point to articles or online mentions of your participation.

Welcome to CSS Naked Day!

Data structure

We are using one file per website owner, with your websites and participating years in the same file! Simply add years or websites as they come.

We are using Toml configuration files to structure data. Here are examples of configurations:

Bare minimum

The following will show as “css-naked-day.org”:

[[websites]]
url   = "https://css-naked-day.org/"
years = [2006, 2010]

With a display name

The following will show as “Naked Days Corp”:

display = "Naked Days Corp"

[[websites]]
url   = "https://css-naked-day.org/"
years = [2006, 2010]

With a display name and one website

If you add homeURL = false to a website, the URL will not apply to your display name.

The following will show as “Naked Days Corp: CSS Naked Day” instead of “Naked Days Corp”.

display = "Naked Days Corp"

[[websites]]
url     = "https://css-naked-day.org/"
homeURL = false
years   = [2006, 2010]

With multiple websites

The following will show as:

display = "Naked Days Corp"

[[websites]]
url   = "https://css-naked-day.org/"
title = "CSS Naked Day"
years = [2006, 2008]

[[websites]]
url   = "https://js-naked-day.org/"
title = "JS Naked Day"
years = [2008, 2010]

Adding homeURL = true on a website will only merge this one with your display name.

The following will show as:

display = "Naked Days Corp"

[[websites]]
url     = "https://css-naked-day.org/"
homeURL = true
title   = "CSS Naked Day"
years   = [2006, 2008]

[[websites]]
url   = "https://js-naked-day.org/"
title = "JS Naked Day"
years = [2008, 2010]

Advanced formatting

By default, more than one entry will be listed as “display: website1, website2 & website3”. Tom Hazeldine’s config file is a good example of a more free-flow writing of entries.

His websites will appear as “Tom Hazledine: tomhazledine.com (some of which is always naked)

More than complete


We are not using all data yet, but feel free to add them, as we might improve the website with it!

External accounts can also be a good way to join you.

display   = "Joan Elisabeth Lowther Murray" # [optional]
firstname = "Joan Elisabeth"                # [optional]
surname   = "Lowther Murray"                # [optional]
email     = "joan@example.com"              # [optional]
username  = "jelm"                          # [optional]

# Websites
# ------------------------------------------------------------------------------

[[websites]]
url   = "https://css-naked-day.org/"
title = "CSS Naked Day"
years = [2006, 2010]

[[websites]]
url   = "https://js-naked-day.org/"
title = "JS Naked Day"
years = [2010]

# Accounts [optional]
# ------------------------------------------------------------------------------

[[accounts]]
type = "Mastodon"
url  = "https://mas.to.don/@jelm"

[[accounts]]
type     = "GitHub"
url      = "https://github.com/jelm.github"
username = "jelm.github"                    # [optional] The main one is used by default

Development

The site is built using Eleventy and npm.

Build website

npm run build

Host a local web-server and watch files (development mode)

npm run dev