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.
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.
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.
Post Comments on your Views about this three Frameworks
ConversionConversion EmoticonEmoticon