matstc / css-frameworks-comparison Goto Github PK

Here is a quick comparative analysis of a lot of CSS frameworks. Some of them are quite minimal and only offer a way to layout your components in a grid (unsemantic, fluidable). Others give it to you whole and offer a grid layout, a CSS reset, icons and styles for all the components you'll want to display (Bootstrap, Foundation, UIkit).

I have used or would be happy to use any of the five frameworks I linked to above. My notes on these and other frameworks are below.

If you would like to quickly try it out for yourself, feel free to clone this git repository and fiddle with the file index.html for each framework.

Also, see this cool chart for a quick overview of all the frameworks.

Pros:

• Simple to use
• Images and icons and widgets
• Large user base
• Good documentation
• Usable

Cons:

• A lot of extra html needed

Pros:

• Good doc
• Lots of widgets
• Icons, though separate from the main release
• Advanced layout options
• SCSS

Cons:

• Default styling not so usable
• Layouts can get complex

Pros:

• Advanced layouts
• Icons
• Javascript stuff
• Minimal looks
• Good doc

Cons:

• Lots of classes to add

Pros:

• Simple and small
• Some icons
• Responsive layout
• Fairly good documentation

Cons:

• No stylings for things like headers and action buttons
• Strange class names

Similar to Knacss. Documentation lacking.

Pros:

• Simple to use
• Some widgets like insets and blockquotes and buttons and lightboxes

Cons:

• Documentation looks weak
• No images
• Not lots of widgets

Pros:

• Advanced layouts with simpler alternatives if the 12-column layout is not needed
• Lots of widgets
• Sass
• Some icons

Cons:

• A lot of classes required + unclear conventions for class names
• Not lots of icons
• Lots of files to include to get started

Pros:

• Minimal
• Styles a lot of things by default
• Very simple to use

Cons:

• No widgets
• No icons

Pros:

• Minimal
• Easy to use

Cons:

• Nothing but a grid layout (could be a pro too)

Pros:

• Has widgets and icons and stuff
• Good documentation
• Easy to use and customize

Cons:

• Weird classes for buttons
• Strange UX choices (default style hard to read or icons in the wrong place)

A minimal grid-only framework.

Not tested.

Looks good. Has widgets and icons and other things.

Not tested.

Has lots of stuff. Documentation and default theme look quirky.

Not tested.

Looks good. Has grid, typography and forms but no widgets or icons.