New Pen
User Avatar of Chris Coyier

Chris Coyier

Milwaukee, WI PRO

CodePen's CSS

Inspired by Mark Otto's tour of GitHub's CSS and Ian Feather's tour of Lonely Planet's CSS, I thought I would join the party and talk about how we do CSS at CodePen.

A (Closeable) <noscript> Warning Modal

Here on CodePen we display a modal window (just like the one you just had to close to read this) to users with JavaScript turned off. We like to make it very clear that CodePen isn't a terribly wonderful site without it, but be clear about why. Here's the real one we show:

Please Don't Learn To Code From Stock Photos

Is that a random document.write in the <head> not in <script> tags? Good luck with that hoss. Nice charset too. Wait. Does that say <script type="text/computert">?

Some Mini Sass Mixins I Like

There is one block of CSS that I find myself writing all the time. It's this:

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

The ol' cover e-v-e-r-y-t-i-n-g block. That's the kind of thing I like to turn into: