Quick review of “Almost Flat UI”

I’ve been working on a theme for re-doing this site.  While digitalnature’s Mystique has served me well over the last couple of years, I’ve been feeling it’s time for a facelift.  Since I’ve been working with Zurb’s Foundation, I stumbled across Amit Gaur’s “Almost Flat UI“.  It’s inspired/drawn from Designmodo’s Flat-UI for the Bootstrap Framework, but adapted to be used with Foundation.  You might see it in action here in the next few weeks.

At first glance, it’s an impressive work.  He’s adding more “button styles” and other such tweaks to what already seems to be a pretty solid framework.  But I have to say that I’m a bit disappointed when I start digging into the code.

All of these “major” frameworks are written in SCSS or LESS or some other CSS pre-processor.  I haven’t gotten that far yet (in learning the methodology behind pre-processor styles), so I’m still using the basic CSS file.  The one site (Greensboro Pony Run) I’ve taken start to finish with Zurb uses v3 (which still supports IE8), but I’m using v4 for my re-design.  Quite frankly, on my own site, I don’t care if scare away IE8 folks.  I don’t think that I’ll ever have enough of a corporate following (the only ones still forced into older versions of IE either due to upgrade policies or OS support policies) to justify using v3 on this project.  But I digress….

The “stock” full version of Foundation stands at 116KB, 91KB minified.  The CSS file for Almost Flat UI is 341KB, 295KB minified.  That’s humongous!  Both files are 3x the “stock” versions!

While it’s true that more and more of the web these days connects via broadband, I’m still not sold on forcing end-users to download nearly half a Megabyte of data before you start accounting for images.  To be fair, I’m beginning to be of the opinion that 100KB of CSS is too much.  By the time WordPress plugins add in their own CSS and JS files, you’re asking a user to download 1 Megabyte.  On a standard cable connection, it’s not too bad, but when you’re building for mobile, connection speeds are spotty at best.

Near as I can tell from his CSS file, what he’s done is rather than just adjusting the original Foundation CSS for the Almost Flat design, he’s recreated the original with his own changes.  Sometimes repeating some sections at least once, sometimes twice.  It seems like a bit of overkill.  (I don’t want to call it laziness just yet, because I don’t think that I have the “community standing” to call it that when my own CSS files are sometimes un-ordered and messy).  To me, it would have made more sense if you’re repeating code to just strip out everything but the color, background-color, etc. so you could still leave the original CSS intact.

I bring this up because while I’m working on my re-design, I’ve been debating how I want to use everything in terms of a framework.  Overriding specific colors in the CSS seems to make a lot more sense than re-building the entire code base, although at this point, v4 is pretty mature.

Just food for thought.  I don’t want to take away from the strong work that Amit’s done already, but if anyone wants to use it in their own projects, just be prepared that it’s not quite ready for a development environment, I think.