Booklet

author

Hack University

Development

These Are The Top 7 CSS Frameworks

These Are The Top 7 CSS Frameworks

Bootstrap

The most popular one, Bootstrap is directed at responsive and mobile-first interfaces.

Pros:

- Easy to learn.

- Make beautiful sites, fast.

- Hundreds of templates and online resources to learn from.

- Great documentation.

Cons:

- Harder to learn at advanced levels.

- Adding too many classes from Bootstrap can make it harder for custom styling.

- Can feel pretty complex.

https://getbootstrap.com

Foundation

Created by Zurb, Foundation provides a responsive grid, HTML and CSS components, templates, and code snippets.

Pros:

- Uses REMs by default.

- Very responsive design for websites with simple I-Jl.

- Used by large companies like Disney and Mozilla.

Cons:

- Not beginner friendly. Many will recommend prior experience with vanilla CSS or other frameworks.

- The designs of the components are not as visually appealing.

https://foundation.zurb.com

Materialize CSS

Based off of Google's Material Design, it provides floating action buttons, cards with drop shadows, layering, and other UI elements.

Pros:

- Easy to learn.

- Simple grid system for fast page layouts.

- Clean and modern.

- Wide variety of components and effects.

Cons:

- Components aren't as beautiful as others.

- It's easy to recognize sites that use this framework.

https://materializecss.com

Semantic UI

Powered by LESS and jQuery, Semantic incorporates a sleek, subtle, and flat design that provides a lightweight user experience.

Pros:

- Great naming conventions.

- Beautifully designed components and styling.

Cons:

- One of the more challenging frameworks to learn.

https://semantic-ui.com

Material UI

Provides React components for faster and easier web development. This is a combination of both Materialize CSS and Bootstrap.

Pros:

- Beautiful and flexible design capabilities.

- Great documentation with ready-to-use components.

- Up to standard with Google's Material Design.

Cons:

- Hard to learn and fully understand everything.

- Requires knowledge of React JS and JavaScript to implement.

https://material-ui.com

UIKit

A lesser-known web UI design framework, UIKit is lightweight and great for developing fast and powerful web interfaces.

Pros:

- Highly coveted modern design.

- Has a large variety of components.

- Components won't affect other styles.

Cons:

- Primarily for more experienced developers.

- Lack of thorough documentation.

https://getuikit.com

Bulma

Based on Flexbox and built with Sass, Bulma is fully responsive and fully modular.

Pros:

- Based off of Flexbox.

- Has a community of more than 200,000 developers.

- Very simple grid system.

Cons:

- Lack of thorough documentation.

- Still hasn't reached v1.O.O (Latest version is vO.8.O).

https://bulma.io

In summary...

Bootstrap

https://getbootstrap.com

Foundation

https://foundation.zurb.com

Materialize CSS

https://materializecss.com

Semantic UI

https://semantic-ui.com

Material UI

https://material-ui.com

UIKit

https://getuikit.com

Bulma

https://bulma.io

Join our tech and design community! @hackuniversity

More booklets by Hack University

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets