CodePen Snippets

I’ve started a new Code Snippets collection on CodePen. It will be populated with the little and sometimes peculiar CSS techniques I’ve used. Mostly CSS but with occasional JavaScript sprinkles. Progressively enhanced, of course.

Stuff like this styled range input:

See the Pen Styled input range (slider/progress) by David Bushell (@dbushell) on CodePen.

Who would have guessed each browser requires proprietary code?

I’ll add a new Pen whenever I find a common design pattern that provokes a ‘how do I build this?!’ If the browser ballet insists on unusual CSS trickery I’ll log my findings. As with all web development anything older than a few months is likely a bit dated. Browser support will vary but tested to my satisfaction for at least one project. That’s at least all modern browsers with a graceful fallback in older IE.

not a guarantee.

If you’d like to share an improvement – fork away! Or leave a comment. Please use the CodePen comments so others’ can learn from you. I may or may not update older snippets. Some may become irrelevant as CSS specs develop.

This isn’t a polished portfolio. Just raw code. But if I do have time I will try to pretty things up. Any superfluous, non-functional CSS will be kept separate.

This new collection exists for two reasons:

  1. I keep solving the same problem over and over again because I can’t remember what websites I’ve worked on.
  2. Highly focused code demos are my most popular content.

I encourage all front-end devs to do something similar. We have to feed those insatiable “how do I…” Google and StackOverflow searches!

Follow @dbushell for updates.

More from me…

Read more on my blog and follow @dbushell. If you like what I do:

Why not hire me!