Navigation

3 fantastic CSS frameworks you won’t want to miss

By Ezequiel Bruni | Resources | Jul 1, 2014

Personally, I prefer to start coding any project with just a grid, and build from there. I’m picky like that, and I like to have control over as many variables as possible.

There are times, however, when this just isn’t practical. Maybe you’re building an app, or an exceptionally large and complicated site. Maybe you just don’t have time to style every single element from scratch, and you don’t need to. That’s when you want a complete framework, with extras.

Well, a lot has been written about the “big name” frameworks—Bootstrap, Foundation, Gumby—so we’re not going to talk about those here. I’ve been playing wi… I mean rigorously testing three of the lesser known options. Take a look, one of them might be exactly what you need.

 

Kube

Kube is definitely a tool for the modern front-end developer. Only modern browsers—and IE9+—are supported. The default styles are pretty, but bland enough to be adapted for use with almost any branding.

It is, in short, a good-looking but plain and simple framework, designed with near-universal visual appeal, and meant for heavy customization.

The features

To describe all of the features in depth, or even to simply list them all, would probably take up too much space in this article, so I’ll give you the highlights: The framework itself is LESS-based, and modular. If you want everything except the button styles, for example, it’s a very simple matter to “compile” your own. Just remove the corresponding @import rule from kube.less, and go. It’s safe to say that there are styles for just about every HTML element you can think of, and the usual extras like buttons, basic navigation bars, helper classes, and a pretty solid grid layout system.

In a sense, Kube is defined in part by what it doesn’t have. For example, it doesn’t have an overabundance of UI elements and extra styles. There are no jQuery plugins for UI functionality whatsoever. And it certainly doesn’t come with the impression that you are “stuck” with any of it.

Conclusion

Kube is a solid offering. Its creators didn’t skimp on the fundamentals, but there’s a definite sense of “only what you need” that comes with this framework. It’s a good place to start, and so it embodies the true purpose of any framework. Color me impressed.

kube

 

IVORY Framework

IVORY, like Kube, is designed to be easily understood and quickly implemented. The typography looks good, but is bland enough for use with almost any project, and the general default styles are too.

It’s a framework designed to give you just enough to get started, and a few extras.

The features

The features are what you’d normally expect: solid and flexible grid system, styles for typography and all the forms, and so on. However, IVORY differs from Kube in that you are given a few extra UI elements: buttons, alert boxes, pagination, toggle switches, tooltips, breadcrumb navigation, tabs, and accordions.

What sets these UI components apart from many others is that they are all implemented with CSS3, and no JavaScript. The only reason that jQuery UI is linked to at all is to make the date-picker work.

Just two things I don’t like: some of the UI component styles are very reminiscent of Bootstrap 2.0 styles. So yeah, you’ll probably want to change those. Additionally, the grid system requires the use of an extra class on the last column in any row; I just hate that.

Conclusion

Those two small caveats aside, IVORY Framework is a good option for any number of projects. It’s not the most easily customizable of options, but if you just need to get started with a good set of defaults, and some extra UI components, give it a whirl.

ivory

 

Base

Base, by Matthew Hartman, takes a somewhat more trendy (at the moment, in any case) approach to the CSS framework. Based on Normalize.css, it starts with thin heading fonts, and flat boxes for buttons. There’s no denying that the default styles are downright pretty.

This may not be to everyone’s liking, depending on branding concerns, but it’s simple enough to change. After all, Base is all about customization.

The features

Base is provided in both LESS and SASS versions, so you can quickly alter the variables and “recompile” it to suit your needs. Built-in variables include font sizes, break points, main container widths for each break point, and more.

Plenty of extra classes are provided to help you set up your mobile-specific layouts, and there are “mixins” in a separate file to help you on your way.

Like Kube, there are no extra UI components beyond the ones that come with HTML by default, so if you want tabbed interfaces, accordions, and the like, you’ll have to make them yourself. Base seems to be geared toward building beautiful websites as opposed to webapps.

Conclusion

If you’re building a site that doesn’t need too many app-specific UI components, then Base is a fantastic resource. Pages built with it already look pretty; but if you don’t like the default styles, it’s not too difficult to change them.

base
Share this post
Comments (no login required)
  • Danny Feliz

    Excellent :D

  • Danny Feliz

    Oh boy, i’ve been testing imperavi and this is amazing :D Thank you

  • Nethawk

    I think Layers CSS is worth to mention: http://eiskis.net/layers/. Light, very useful defaults. I really like it.

  • http://www.letsnurture.co.uk/ ilesh Raval

    Thanks for sharring the excellent blog with us… i enjoyed reading the kube and ivory both are important for every designer to know

  • http://balticdev.pl/ Łukasz Lubiński | balticdev.pl

    Very nice collection :)

  • Theracoon

    Can I plug my own framework? http://rachelreveley.co.uk/css-cement/ It’s built with Less is style agnostic i.e. designed for you to style yourself and has lots of features though is configurable so you only compile what you need.

  • http://siamkreative.com/ SiamKreative

    Depending on the project’s scope, I use either Bootstrap or Preboot (from Mark Otto as well).

  • http://www.coffeedeisgn.net/ Ahsan Idrisi

    I have used BASE on more than 4 or 5 Responsive Landing pages projects and it is really good, loved it….a lot of helper classes like no-mobile and no-tablet

  • Âñäs Shåh

    Excellent :)

  • Neeraj Kumar

    When i upload this theme in my weebly website.. it says main.css missing.
    I didnt understood this thing.
    can anyone please help me with this?

  • http://www.letsnurture.co.uk/ ilesh Raval

    That was really helpful post thanks for sharing your knowledge with us

  • Carl Smith

    It’d be helpful if you mentioned licences.

  • http://www.cliftwalker.co.uk/ Jonathan Clift

    I’ve used the Base framework a number of times and would certainly recommend it. I specifically use it for prototyping, which rapidly speeds up the development process. The ‘initial download’ includes all the files and structure to get thing started quickly and provides both LESS & SASS versions making it incredibly easy to change the styling up if you need to. (It looks good out of the box though!)

  • matthewhartman

    Thanks for the feature guys! :)