神刀安全网In this post I will give you a quick overview about some CSS and UI frameworks. If you are building a rich admin dashboard, Bootstrap is totally fine, but for smaller projects you might not need all the features or you are just looking for a different look and feel. All frameworks in this post are actively maintained and Open Source.
Bulma
Bulma is based on flexbox and SASS. It offers everything you need for the creation of a web site or web app. It has a grid system, single elements and more complex components. There is no Javascript included, so if you are working with modals for example you have to come up with your own implementation. This makes it easy to integrate it in your react app for example.
Installation:
npm install bulma uikit
Uikit is based on LESS & SASS. It has standard UI components like buttons, form elements and navigation bars but also Javascript helpers to trigger events while scrolling for exmaple. It is easily themable with the uikit customizer .
Installation:
npm install semantic-ui Materialize
As the name implies the look and feel follows the Material Design concept. Materialize comes with basic components like buttons or form elements and complex ones that depend on Javascript like modals or parallax effects. There are also mobile helpers for creating a “drag out menu” or “swipe to dismiss” a notification.
Installation:
npm install materialize-css MUI
MUI also follows the guidelines of Google’s Material Design. What is special about this one is that it is also available as a REACT, Angular, WebComponents or HTML Email framework. The documentation says that it has an “extreme hackability”. I didn’t tried it out yet. But that’s a feature you might need 😉
Installation:
npm install muicss PURE
PURE is created by Yahoo. It’s a lightweight framework with only very basic elements. It is divided into “Base”, “Grid”, “Forms”, “Buttons”, “Tables” and “Menus”. You can use all of these pacakges or just load the ones you need in your application.
Installation:
npm install purecss Cardinal
Cardinal is a good starting point. It’s “leaving the design and creativity up to you” so there are only basic styles and no fancy components. It is mobile first and has a flexible grid system.
Installation:
npm install cardinalcss BASE
BASE comes with a HTML template and a gulp config with Livereload and image optimization you could use. The framework is based on SCSS and doesn’t include Javascript. For CSS Animations the library Animate.css is included. BASE is not about fancy UI elements but about a solid foundation with a good grid system and a lot of helper classes.
Installation:
npm install getbase Tacit
Tacit is special. It calls itself a “CSS framework for dummies” because it doens’t use classes but styles just the HTML elements (for example <input> or <button> ).
Installation:
No npm package here :/
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://yegor256.github.io/tacit/tacit.min.css"/> </head> </html> Milligram
Milligram is a “minimalist CSS framework”. There are no Javascript features included. It’s not an UI framework but more a starter kit for your website/ web app.
Installation:
npm install milligram Semantic UI
Semantic UI is big. You should use this if you are looking for a framework with lots of features. It offers simple elements and components but also views and modules in various themes. You can also build your own themed version with only the features you need.
Installation:
npm install semantic-ui