1 reply [Last post]
ARNK's picture
Last seen: 3 years 7 weeks ago
Timezone: GMT-4
Joined: 2016-12-04
Posts: 2
Points: 4

Hey guys, it's been a very long time since I've touched HTML/CSS but I'm moving back in that direction. I need to build an online portfolio, and was wondering which method is more usable in December 2016. For instance, would a grid layout even hold up across browsers? Should I rely on the old float and absolute positioning techniques from years ago? What say you?


gary.turner's picture
Last seen: 1 year 12 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IM (not so humble) O

Grid systems do not hold up, period. They are applications of print methods to the web, and the web is not print. They tend to fail catastrophically in smaller viewports, e.g. mobile devices. Further, the way they are applied removes semantic context in the form of using presentational class tokens.

Now, Bootstrap is very popular and does use grids. An acquaintance calls it Bootcrap and says the best thing you can do is get a stick and scrape it off before you track up the house. If you view source, you'll know exactly what he means.

Bootstrap incorporates Less and Sass, two CSS preprocessors. These are additional layers of unnecessary abstraction that make maintenance and debugging a nightmare. (There is no sane reason to create an object-oriented CSS.)

It also uses jQuery, a ridiculously bloated (105kB the last time I looked) javascript library. If your site requires javascript to be functional, it is a massive FAIL for the many who disable it or use a UA that doesn't support it. Consider that js is a massive battery drain. Lots of mobile users kill it to save their batteries, and most assistive technologies (think Braille devices, screen readers {audio}, large font, plain text devices, &c.) don't support js.

So, don't use Bootstrap or another of that ilk. Don't even consider a grid system. And forget about the silliness that is the CSS reset. See my post, Global resets considered harmful, for the reasoning. The post is almost eight years old and still as applicable today as it was then.

If you use flexbox, keep in mind that it is still a working draft (though pretty much the final version). IE11 works, IE10 is buggy and IE<10 says, "Wha'choo talkin' about, Willis?" See browser compatibility.

There are methods to provide graceful degradation for non-supporting browsers; Google will be your friend.

Don't forget our friend, the float. It still works just fine, if not as flexibly as the flexbox.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.