W3.CSS
Equality for all browsers: Chrome. Firefox Edge. IE. Safari. Opera.
Equality for all devices: Desktop. Laptop. Tablet. Mobile.
Standard CSS only (No jQuery or JavaScript library).
W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks.
W3.CSS can also speed up and simplify web development because it is easier to learn, and easier to use than other CSS frameworks.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
credit : source
Be the first to comment