Flexing Design Chops

I've been working extensively with HTML and CSS the last couple of days, building out my site skeleton atop KeystoneJS. After doing some browser evaluation and thinking about who my audience is, I came to a couple conclusions:

  1. It's extremely unlikely that anyone looking to learn JavaScript is going to be using IE 8 or even IE 9. Therefore, I am comfortable targeting only modern browsers: Chrome, Firefox, IE 10+, Microsoft Edge, Safari, Opera, Chrome Mobile, Firefox Mobile, and Opera Mobile.

  2. Because all of those browsers support flexbox, I should be able to build out this site entirely without floats.

I'm pleased to say that, so far, it's been pretty smooth sailing. Flexbox has been great to work with, and it's allowed me to roll my own CSS rather than having to use a hefty framework like Bootstrap. The total minified weight of my site's CSS is currently 15 KB (and that's before gzip), and most of the styling is done. Bootstrap with flexbox support, minified, is 120 KB just for the CSS. That doesn't matter if you're on a 100/100 Mb connection in a city, but it matters a lot if you're on a sub-3G connection somewhere rural!

Now that I have the HTML and CSS mostly sorted, I am on to building out different page types. This has proven to be pretty easy with Keystone, just a matter of adding some router and view files. The next step, wich I'll start in on this afternoon, is building out models for things like posts, comments, and similar. That's a little more complex, but by Friday I should have the basics up and running, which should sync up perfectly with my latest milestone.

Author image
Founder and creator of CloseBrace
Providence, RI, USA Website