HN Explorer

Show HN: CSS with no px units (thesundaybe.st)

8 points by MRSallee ↗ HN
I recently built a new template for my rather basic WordPress blog. I wanted to avoid using px units wherever possible, so that I could have a design that would scale uniformly across multiple device resolutions.

It started as an experiment, to see how far I could get without px units. The more I learned, the more excited my campaign to eliminate px from the stylesheet.

I ended up eliminating px units entirely. Everything is sized with vw units (relative to the width of the viewport).

The last remaining px units were sizing standard Facebook and Twitter buttons. I got frustrated by not being able to control the size of Facebook's Like button and ended up making my own buttons in CSS...with vw units, naturally.

The only references to px units are in the media queries, because at this point I know of no better way to responsively serve different style sheets. For now, they don't bother me.

Known issues:

On a big enough viewport, it starts to get very big.

I have no idea what it looks like in Internet Explorer and I don't think I want to know.

1 comment

[ 3.5 ms ] story [ 9.3 ms ] thread
[dead] MRSallee
I recently built a new template for my rather basic WordPress blog. I wanted to avoid using px units wherever possible, so that I could have a design that would scale uniformly across multiple device resolutions.

It started as an experiment, to see how far I could get without px units. The more I learned, the more excited my campaign to eliminate px from the stylesheet.

I ended up eliminating px units entirely. Everything is sized with vw units (relative to the width of the viewport).

The last remaining px units were sizing standard Facebook and Twitter buttons. I got frustrated by not being able to control the size of Facebook's Like button and ended up making my own buttons in CSS...with vw units, naturally.

The only references to px units are in the media queries, because at this point I know of no better way to responsively serve different style sheets. For now, they don't bother me.

Known issues:

- On a big enough viewport, it starts to get very big.

- I have no idea what it looks like in Internet Explorer and I don't think I want to know.