It's week three of the October 2018 Halloween #CodePenChallenge!

Last week, the prompt was Masks, and the Pens were a wonderful mix of scary and playful. Just like a perfect Halloween night! Check out our CodePenChallenge: Masks collection to see the Pens from the challenge.

This Week's Prompt: Skeletons 💀

Every-body loves skeletons. Get it⁉️ Every body? Is this thing on? And, front-end designers know that a skeleton screen is a good way to show the “bones” of your design before it fully loads in. But actual skeletons are cool too.

October's Challenge Sponsor: WordPress.com

WordPress powers 31% of the internet. Create a site for yourself with a custom domain name and 24/7 live support. Start writing, sharing, selling, and building your audience today.

Your Challenge

Create a Pen that incorporates a skeleton! Make a spine-tinglingly scary design or take a practical approach, it’s up to you.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-skeletons. We'll gather all those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  1. Build a skeleton screen! They are kinda like spinner alternatives. Rather than show nothing or a little animation as something loads, you load wire-frame looking UI that sorta mimics what the content will look like once it arrives. Max Bock explains one technique, but you can build your own.
  2. Go full on literal skeleton and craft the bones yourself like Jon Kanter did here.
  3. Can you combine the ideas? Skeleton loading screens full of literal skeletons?

Resources

  1. Read up Katerine Olvera and Kathryn Faulkner's in-depth study of user experience and skeleton screens.
  2. If you need vector art of a skeleton, Wikimedia has a whole lot of anatomically correct versions, and of course the Noun Project has simpler stuff.
  3. Remember the Skeleton framework? It's an oldie but a goodie. It has great bones, you might say.