• Get application security done the right way! Detect, Protect, Monitor, Accelerate, and more…
  • I once heard a front-end developer joke, “The NASA has landed robots on Mars, and here we’re still struggling to center-align our divs!” And it makes me feel bad that this joke has a lot of truth in it. Doing something that sounds as easy and common-sense-driven as centering a box within a box is incredibly difficult to work out in CSS. Unless you’ve encountered it before. And saved the code snippet somewhere. And even if you manage to pull it off, there’s always the lurking fear that it might just break horribly on some stupid browser somewhere! CSS ties for the first spot of “necessary web evils” along with JavaScript. It’s a standard that evolved haphazardly, was interpreted differently by different browser manufacturers, and is now so full of contradictions that nobody dares call themselves a “CSS expert”.

    No wonder, then, that CSS frameworks emerged over time and took most of the pain away. Today we can’t imagine coding without our favorite CSS framework, as targeting multiple screen sizes has become a necessity.

    But how do you know your framework is the best for the job at hand? Also, if you’re new to front-end development, which framework should help you pick?

    This post casts a sweeping glance at the front-end development landscape and compares the front-runners among CSS frameworks. So if you’re tired of hand-coding CSS rules, dive in for some quick relief!

    Bootstrap

    An initiative by Twitter, Bootstrap takes credit for introducing responsive design on a large scale. It was the first framework to promote the philosophy of “mobile-first.” No longer was designing for smaller screen sizes a separate project in itself; all you needed to do was include the relevant Bootstrap classes, and the design would automatically adjust for different screen sizes (well, almost).

    Responsive design in Bootstrap (4.0 vs. 3.0)

    Bootstrap achieved responsive design by introducing the idea of a grid. A grid is an invisible partition of the screen into columns (along with the width). For example, if you have three “boxes” you want to position side by side on large screens, but vertically on smaller screens, this is what you’d do:

     <div class="container">
      <div class="row">
        <div class="col-md">
           One of three columns
        </div>
       
        <div class="col-md">
          One of three columns
        </div>
    
        <div class="col-md">
          One of three columns
        </div>
      </div>
    </div>
    

    The current popular version of Bootstrap is 4, which was a major overhaul over the 3.3 series. The above syntax is how you’d code in Bootstrap 4, which owes a lot of its elegance to the raw power of Flexbox and other modern layout features supported by browsers directly. In the lower versions of Bootstrap, the grid was defined as a total of 12 columns, which resulted in code such as

    <div class="col-md-6 col-lg-4"></div>

    to make a div take up one-third of the screen width on large-size devices, and half the width in medium-size devices. The syntax now is a lot more pleasant, though it demands familiarity with Flexbox.

    Bootstrap Pros

    There’s much to like about Bootstrap, especially for full stack developers:

    • Rapid prototyping: With Bootstrap, there’s almost no need to spend thought on tricky CSS positioning and browser incompatibilities. All you need to do write out the HTML, and then applying the appropriate CSS classes causes the responsiveness to come alive.
    • Large ecosystem: As of today, Bootstrap has the largest ecosystem among front-end frameworks. The number of website layouts, themes, admin panels, UI components, etc., built using Bootstrap is mind-boggling, and it keeps getting better. For consultants and product companies alike, this means pre-built items and community support will always be plenty.
    • Backed by Twitter: An emerging trend in open source is the rise of projects sponsored by a commercial entity. More often than not, these entities build profitable businesses around their offering. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), etc., are some examples. When a project is backed by an established entity and is not a one-person show, it gives faith to the community (especially the enterprise customers) that the project will have a clear roadmap and long-term future.
    • Large collection of components: Bootstrap offers, out of the box, almost all the UI components you’re ever likely to need. Navigation, forms, cards, modals, buttons, badges, progress bars, alerts . . . You name it, and Bootstrap has it. For many companies, this practically cuts down the need to have a dedicated front-end team.
    • LESS and SASS support: Among the massively popular CSS frameworks, Bootstrap is the only one that supports both LESS and SASS. Yes, I know, you don’t use LESS (as no self-respecting developer should, right?), but hey, there are massive projects out there that rely on LESS. Of course, you can choose neither and write out your plain CSS files.

    Bootstrap Cons

    Nothing is without a price, eh? Well, Bootstrap is no exception. Over time, Bootstrap has come under heavy fire by designers and UI experts. Here’s why:

    • UX monotony: The very fact that Bootstrap has such a large collection of built-ins results in websites that look all-too-familiar, and quite honestly, dull. You only need to head over to the official examples to see just how much of an eyesore the defaults are.  Just search for “all bootstrap websites look the same,” and you’ll know what I mean. 🙂
    • Styling woes: Bootstrap is what might be considered an opinionated framework. In other words, it has ideas about layouts, and it makes you work extra hard if you want it to look/behave differently. Consider the default CSS breakpoints for screen widths: a medium-sized screen for Bootstrap is one that starts at a device width of 768px. And what if you want to target, say, the limit of 600px? Well, good luck with that! It’s the same with almost every other component in bootstrap: rows and containers have their default padding, buttons have colors and borders that are very tricky to override without a lot of work, and so on.

    Want to master the Bootstrap? Check out this online course by Brad Traversy.

    Foundation

    If technologies were religions, the Foundation and Bootstrap guys would be out for each other’s blood. No discussion of modern CSS frameworks is complete without mentioning Foundation, so here we go.

    Head over the Foundation website, and you can’t help but notice the byline: “The most advanced responsive front-end framework in the world.” At first glance, it looks like a tall claim to go with a marketing campaign.

    However, adherents of the Foundation framework know there’s at least some truth to that. Foundation was developed to go naturally with the Rails framework, and several of the Rails’ “zen-like” guiding principles can be seen at work.

    For instance, if you wanted a row that contained two elements on small screens, three on medium, and four on large ones, the equivalent code in Foundation will look like this:

     <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
      <li><!-- Your content goes here --></li>
      <li><!-- Your content goes here --></li>
      <li><!-- Your content goes here --></li>
      <li><!-- Your content goes here --></li>
      <li><!-- Your content goes here --></li>
      <li><!-- Your content goes here --></li>
    </ul>

    As compared to earlier Bootstrap versions, I find this very intuitive and easy to memorize. No more twelve column grids and figuring out what 4/12 is supposed to be!

    While Foundation is much less popular than Bootstrap, it’s a trade secret for many expert front-end developers.

    Pros of the Foundation Framework

    Foundation has some unusual characteristics out of all the CSS frameworks we are going to consider in this article:

    • Full tooling: It’s technically wrong to say that Foundation is a CSS framework. I mean, it is, but it’s been built as a large and modular collection of tools that aims to solve almost all kinds of front-end problems. There are separate framework offerings for websites and emails, heavily optimized for their respective domains. Foundation also comes with a command-line interface (CLI), which will sound like music to the ears of developers used to working with Webpack or other module bundlers.
    • Extreme flexibility: Unlike Bootstrap, Foundation was built to give the front-end developer full control over their UIs. As a result, Foundation will feel bland and enormously complex to the newcomer. However, the reason is that Foundation doesn’t force any style language on you, but aims to be just what it is: an excellent CSS framework.
    • More than just UI components: While Foundation has the usual collection of UI elements, it goes much beyond the call of duty. The developers have included an advanced responsive image system, a pricing table component (yes, the one used to show various pricing plans), form-validation, right-to-left support, responsive embeds, and more. I’d like to emphasize again that this is an overkill for most simple websites, but for large ones, it’s a boon the experienced developers will recognize.
    • Training and consulting: Now, while Bootstrap is created by Twitter, it’s a side project and a very small part of the overall picture. The company behind Foundation (ZURB), however, is committed to using, developing and promoting it. Training courses and professional consulting are offered for large customers, which is great for companies that are targeting massive projects and are willing to pay.

    Cons of the Foundation Framework

    The strengths of one framework become its weaknesses when viewed from the opposite point of view. Here’s why Foundation may not be the best choice for your project:

    • Small(er) community: The Foundation community is much smaller than that of Bootstrap, and if you’re trying something exotic and get stuck, the chances of finding relevant help are lower. However, I would add that for all practical purposes; there’s enough of a community out there. It’s just that it’s several orders of magnitude smaller than Bootstrap’s, so you might not find solutions instantly.
    • Complexity: If you’re used to Bootstrap or something simple, or worse, to vanilla CSS, Foundation will feel like an infinite explosion of complexity. Layers within layers, components with components, endless customization options . . . Pretty soon you’ll begin to question the usefulness of life itself! But then again, Foundation has a very different aim and can’t be blamed for that.
    • Too many options: Sometimes you just want to get shit done and worry about perfection later. During such times, it’s frustrating to be presented with too many options with minor variations. For example, think of having to order a Subway sandwich when you’re so hungry painstakingly you could eat mud. Naturally, Foundation isn’t for times like that.
    • Talent availability: Since Foundation is (much) less popular than Bootstrap, the available talent is much less. As a general rule, any new hire is almost likely to know Bootstrap but won’t have a clue about Foundation. Learning takes time, and it’s a luxury not all teams can have.

    Bulma

    Bulma is a relatively new entrant to the battleground of CSS frameworks and has made a name for itself in a short time. Its attractiveness lies in a strict, CSS-only approach (there are no JavaScript components), and elegant defaults, which is something many developers with a good eye for design have a problem with when working with Bootstrap.

    Much of the momentum of Bulma comes from high rates of adoption with the Laravel (a PHP web framework, in case you didn’t know) community, which I’m sure is pretty much what helped Vue.js rise to the heights of popularity among JavaScript frameworks.

    Why choose the Bulma CSS Framework

    There are many reasons to like Bulma and use it for your next project:

    • Quite popular: Okay, it’s not more popular than Bootstrap, but it is more popular than Foundation. As of writing, Bulma has 30k+ stars on Github, around 3k+ more than Foundations. Of course, a number of Github stars is no metric of merit, but it does say that the community approves of Bulma.
    • Extremely readable classes: Bulma, for me, has the most readable CSS classes of all the frameworks I’ve tried. There’s also a ridiculously powerful and simple system for creating Metro-style grids, called tiles (just look at the code in the second-half of the screenshot, and tell me you’re not impressed!).

    • Flat learning curve: Bulma is highly modular and was created to solve the practical, everyday problems that smaller teams and individual developers come across. You’ll find that Bulma is very easy to learn, though I think that a decent background in CSS is always good to have an idea of what might be going on under the hood. This will help you when you want to override the default behavior.
    • Elegant: Well, take a look at the default Hero section for Bulma below. Enough said!

    Bulma has a small, but an extremely passionate community, so if you want to do away with all the fluff and yet want to come up with elegant-looking UIs in record time, Bulma is the way to go. For Bootstrap developers, Bulma has a separate section to convince and help them migrate over.

    UIkit

    The thing that comes to mind when thinking of UIkit is minimalism. Minimalism not in features (in fact, it offers perhaps the most features of all frameworks), but in design. If super-clean, elegant, non-whitespace-shy designs are your thing, UIkit has you covered.

    For instance, take a look at the progress-bar component:

     

    Or the image marker component (a JS-driven interactive marker for images):

    Or even the humble HTML form:

    If this doesn’t scream elegance at the top of its lungs, I don’t know what does. Just head over to the UIkit website and check out all the incredible components it has on offer. Unless your project manager or customer forces a particular style language on you, I think Uikit takes the crown for UI design and is several miles ahead of Google’s Material Design.

    But is there a catch, you’re wondering. Yes, there is. Like Bootstrap, UIkit works with its JavaScript and while you can use jQuery for DOM manipulation, using a virtual DOM framework like React is impossible.

    Also, Uikit is a self-contained system, and you won’t be able to modify or extend it without putting in considerable effort.

    Semantic UI

    Another contender in the race is Semantic UI, which tries to distinguish itself with a lot of themes and customization. There are more than 3000 theming variables, which results in a massive breadth. Or so the docs say.

    Bootstrap 4 kind of covers all this and is fully customizable as well, but one advantage with Semantic UI is that it results in nice-looking layouts by default. Still, it’s not the best-looking out of the box, which is why I put it later down on my list.

    It also has one of the steepest learning curves, and coding conventions are much more strict. Try it; I’d say, and see if it looks like something you might prefer.

    Susy

    Susy is a little-known framework at this point, but it’s a fascinating and refreshing idea. Another pure-layout framework, Susy does away with all predefined ideas of float, grid, Flexbox, tables, or anything else, and lets you compose the kind of layout you want. “Compose” is the keyword here, as Susy is meant for creating highly modular, staggering layouts with ultra-complex, unusual, and precise needs.

    In the hands of the expert developer, Susy is like a flamethrower than blows everything else away. Lesser mortals, of course, will manage to burn their hands.

    To get an idea of the power of Susy, sample this default setting (SASS):

     // 4 symmetrical, fluid columns
    // gutters are 1/4 the size of a column
    // elements span 1 less gutter than columns
    // containers span 1 less gutter as well
    $susy: (
      'columns': susy-repeat(4),
      'gutters': 0.25,
      'spread': 'narrow',
      'container-spread': 'narrow',
    );

    I think that the code is pretty self-explanatory, though it’s not for those in a hurry. 🙂 Susy makes perfect sense if you’re tired of all the bloat that modern frameworks impose on you, and you have layout needs that you know no ordinary framework can serve.

    Materialize

    If you’re in love with Google’s Material design, Materialize is a framework you’ll enjoy. The best thing is that it has only a handful of components and classes to learn, and is focused on getting you productive as fast as possible. There are few customization options, and Materialize follows the popular 12-column grid format established by Bootstrap.

    If you ask me, though, a Material design is becoming so common, and is so . . . Flat by default, that pretty soon we’ll be complaining about it as we do about Bootstrap’s all-websites-look-the-same problem. Still, it’s a nice framework to start with.

    Pure

    Is Yahoo dead?

    No, this question is not a diversion, but highlights an important observation: Yahoo built the Pure framework and released under the BSD license.

    A quick look impresses me, and I wonder why this offering is not known to more people. Anyway, what makes Pure, well, pure, is that it’s a pure CSS framework. 🙂 In fact, the developers have gone the extra mile and broken it up into different CSS modules that you can import as needed. So, if you need only the grid system, there’s no need to import the entire CSS and add to the site’s load time.

    The Pure grid comes in several flavors: 5-point, 2-point, 24-point, etc., so when it comes to creating columns, you have a lot more flexibility. Pure isn’t the best-looking CSS framework by default, but I can see how it adds value to those who want to solve a tiny CSS problem in their UI and cringe at the “helpful” defaults other frameworks come with.

    Skeleton

    As you can see in the screen shot, Skeleton is so minimal that it doesn’t even call itself a CSS framework, library, or even module. It’s boilerplate, and contains only 400 lines of source code! Incredible? I think so, but to put things in perspective, Skeleton was designed for tiny or small projects that need little more than layouts and positioning.

    Worth a look; after all, who knows, Skeleton might be what you were looking for all along!

    Milligram

    The last on the list is Milligram, a CSS framework designed for speed and productivity. The developers have kept it under 2 KB in size, which by today’s standards, means a lot.

    A milligram is a fun little take on CSS frameworks that you’ll appreciate working with. Extending it is easy, and with a few lines of custom CSS, you can change its look to the way you want.

    So, which CSS framework is the best?

    Admit it, you’ve asked similar questions before and received the following disappointing answer: none. 😀 Selection of a framework (or a tool, or even a person in your life, for that matter) depends on a lot of factors. If you want my advice, here it is: Cut out the noise. Just because people are going crazy over something new and shiny doesn’t mean you have to learn it or you’ll be left behind. Trying out new things is great, but running around in circles in search of the perfect tool is, well, a waste.

    So, which of these frameworks have you tried? Or perhaps something is astonishing out there that I’ve just missed? Let me know in the comments, please. Love, hate, random hi’s, all are welcome!