Why you should look for Twitter Bootstrap alternatives?
Bootstrap is the most popular HTML, CSS, and JS framework that is used for building responsive web interfaces. Nowadays, Bootstrap is not only an adaptive grid system but a full-fledged toolkit with components and JS plugins. A part of Flatlogic web templates is made with Bootstrap (check out a bootstrap dashboard theme). In this article, we will speak about different frameworks that can offer a grid system and look through popular toolkits with components and UI elements.
But first, answer the main question: if Bootstrap is so popular and recognized, why should we use alternatives?
The answer is simple: you may find a front-end framework from this article that will be convenient for your project. It doesn’t imply that that grid system you like is better than Bootstrap, as well as it doesn’t mean that it gives you all components you need for any app (it can be either a framework or toolkit with a prebuilt grid system).
If you feel overwhelmed with Bootstrap, or think that it doesn’t fit your programming style, or if development with Bootstrap becomes a headache, you should give a try to another technology. Don’t forget that all frameworks are tools to achieve some specific purposes, so it’s a good practice to clearly define your task before you start looking for instruments to complete it. We are here to help you get acquainted with these instruments that can become viable alternatives for Bootstrap. We divided the top into two blocks: first includes all frameworks and libraries that are built according to Material Design principles, frameworks from the second block doesn’t use Material Design.
|Twitter Bootstrap Alternatives||Website||Additional Features||Start|
|Material UI||https://material-ui.com/||Thanks to the crowd-funded principle of the project, the team of developers continue to develop Material UI and support users.||npm install @material-ui/core
yarn add @material-ui/core
|Vuetify.js||https://vuetifyjs.com/en/||Vuetify supports more than 30 languages||npm install -g @vue/cli|
|Angular Material||https://material.angular.io/||Theming system for individual configurations of components.||ng add @angular/material|
|Materialize||https://materializecss.com/||Materialize goes with two starter templates: one is a simple starter page with the familiar structure like header, footer, banner, etc.; another is a similar page, but with additional parallax effect.||npm install [email protected]|
|Vue Material||https://vuematerial.io/||Relatively young UI toolkit||$ npm install vue-material –save
$ yarn add vue-material
|Material Tailwind||https://material-tailwind.com/||Material Tailwind also comes with 3 fully coded sample pages: Landing Page, Profile Page, and Login Page||$ npm i -E @material-tailwind/react
$ yarn add @material-tailwind/react -E
|Skeleton||http://getskeleton.com/||The max width of the grid is 960 px.||You can start using Skeleton by downloading the repository from the official website|
|Ink||http://ink.sapo.pt/||You can find a Cookbook page on the official Ink website.||To get started simple use CDN Fastly|
|Foundation||https://get.foundation/||There is no incompatibility with any server technologies. Mobile First approach.||git clone https://github.com/foundation/foundation-sites
|Bulma||https://bulma.io/||There are several related projects from Bulma’s developers on GitHub that can be useful. For example, Bloomer – a set of React components for Bulma||– npm install bulma
– yarn add bulma
– bower install bulma
– download package from CDN
|Semantic UI||https://semantic-ui.com/||Semantic UI offers several additional versions: CSS only, LESS only, LESS plugin, EmberJS, Meteor-Less, Meteor-CSS, Bower||npm install semantic-ui # Use themes, import build/watch tasks into your own gulpfile|
Twitter Bootstrap Alternatives with Material Design
The additional feature that we should mention:
Developers used Material UI framework to build premium and free admin templatesand kits so users can either quick start a new project with the help of ready-to-use components in templates or improve current project and redesign it.
Thanks to the crowd-funded principle of the project, the team of developers continue to develop Material UI and support users.
To start using Material UI you can:
Install as npm package
npm install @material-ui/core
yarn add @material-ui/core
Or download from CDN
Vuetify.js is another Material Design framework. That is a very popular and loved Vue component library for building awesome web applications. The developers tried their best to decrease the bundle size and to provide wide customization opportunities. The grid system from Vuetify is a 12 point grid system that uses breakpoints to control the layout of the application for different window sizes. Breakpoints can be customized with special Breakpoint service.
Vuetify is also sponsored by anyone who wants to take part in the project development via Patreon and OpenCollective web platforms for donations. The developer community with 27 k stars on GitHub is not as big as Material UI one. However, the whole community is vibrant and active and you can use several channels for communication (twitter, discord, GitHub, Reddit, official Vuetify website support). You can also use premium themes, kits, and dashboard if you need to speed up the development of your project. The last release of a new version of Vuetify was less than a month ago.
Vuetify supports more than 30 languages. The top developers provide paid consulting services.
To get started you need to download Vue CLI. It’s a specific tool for Vue.js development, that you can install with one npm or yarn command
npm install -g @vue/cli
yarn global add @vue/cli
(more info you can find on the official website: https://cli.vuejs.org/).
Then use the next command for your Vue.js project:
$ vue add vuetify
Several other options to install Vuetify are available (via Vue UI, Nuxt, CDN, etc.) in the official documentation of the framework.
Angular Material is a framework that contains a high-quality UI component for development and gives the developers tools to build custom components with predefined patterns. The main focus of developers stays on building well-tested and customizable Material Design components, so a grid system is not a cornerstone in that framework. The grid system goes with some setting for row height, gutter size, multiple rows or columns, etc, and it is not the strength of Angular Material.
The developers team of the framework consists of a part of Angular team at Google and community contributors all around the world. They are constantly improving their product that got more than 20 k stars on GitHub.
Theming system for individual configurations of components.
Angular Material offers very qualify components with clean code and comprehensive documentation.
How to start:
Run the command in the Angular CLI’s:
ng add @angular/material
Materialize goes with two starter templates: one is a simple starter page with the familiar structure like header, footer, banner, etc.; another is a similar page, but with additional parallax effect.
You can start using Materialize by downloading CDN at cdnjs or you can get it via NPM command.
npm install [email protected]
Vue Material is a relatively young UI toolkit that helps to build interactive and adaptive web apps. The first version of the toolkit was developed by a passionate developer who wanted to find a fast and lightweight solution with Material Design for Vue. The project has gained the support of sponsors and developers community and now it has almost 9k stars on GitHub. You can import and use different parts of Vue Material pack: separate components or whole developer tools, such as batteries-included webpack boilerplate, a SSR template for Nuxt.js, and a Single HTML file.
There are several premium themes of dashboards and Material Kit that are built on top of Vue Material.
To get started install through NPM or Yarn:
$ npm install vue-material --save
$ yarn add vue-material
Additional features: Material Tailwind also comes with 3 fully coded sample pages: Landing Page, Profile Page, and Login Page.
To get started install through NPM or Yarn:
$ npm i -E @material-tailwind/react
$ yarn add @material-tailwind/react -E
Twitter Bootstrap Alternatives without using Material Design
Skeleton is a rare beast on the Internet. The developers name it “a dead simple, responsive boilerplates”, and this is the absolute truth. Why so? All other libraries and frameworks go with tens and hundreds of inbuilt components and elements, that stay with the app whether it uses them or not. Hence, frameworks increase the weight of the code and the number of lines in the code. The core idea of Skeleton is to be as lightweight and “dead simple” as possible, and the developers succeeded. That boilerplate contains approximately 400 lines of code and the whole documentation that contains information about the grid system and several components (like forms and buttons) with code samples takes less than 5 minutes to read. Skeleton provides adaptiveness through a 12-column flexible grid system. It’s a very popular boilerplate on GitHub with almost 18k stars and 3k forks, but the last update was in December 2014.
The additional information you need to know:
The max width of the grid is 960 px. That means it’s OK to use Skeleton if you want to see your design adapt comfortably to small viewports. But computer screens are getting bigger every day (and we speak not only about the standard and widespread 1900 x1280 resolution but about MacBook pro laptops with 2500 + screen resolutions), and that layout with 960 px max width looks a little ridiculous on that screens. So, think about your target users and devices they use before developing your app with that grid system. If you know that 80 percent of them use apple products it’s better to use an alternative grid system.
The second point is worth noting is that although Skeleton supports nested columns, the grid has %-based gutters that result in different gutters inside the nested grid and poor readability on small screens.
You can start using Skeleton by downloading the repository from the official website or cloning it from the GitHub.
You can find a Cookbook page on the official Ink website. This is a page that contains ten free examples of common layouts you can use to start the development quickly. You can either view demo for every sample or download the source code.
Even though the last big update of Ink repository was in 2015, the development team still supports users that use their product.
Foundation is notable for the fact that it implements a convenient XY grid. The framework contains all the interactive components necessary for modern web development, such as navigation, buttons, tables, menus, and so on. The framework is focused on working with the Mobile First approach. From the beginning, the mobile version is being developed, new elements are gradually added, and thus the desktop version of the application appears. This is very convenient and saves a lot of time, as it immediately introduces design restrictions on the product. Foundation uses jQuery, Normalizr, Boilerplate.
There is no incompatibility with any server technologies. Mobile First approach.
To get started use
# Install git clone https://github.com/foundation/foundation-sites cd foundation-sites yarn
Bulma is a pure CSS framework (no JS files at all), that helps developers to create a quality web interface without the need to include additional JS files into your project. This is one of the main features of Bulma and exactly that one why developers love it. That framework has more than 40 k stars on GitHub and 3,5 k forks. Bulma is the most popular JS free alternative to Bootstrap.
Additional features you should know about:
You can find a lot of developers, that use that framework, open community, and free support. Although it’s quite easy to start using Bulma, it becomes even easier when thousands of developers are ready to help and a vast amount of tickets have been already solved.
There are several related projects from Bulma’s developers on GitHub that can be useful. For example, Bloomer – a set of React components for Bulma.
Bulma goes with detailed and comprehensive documentation for classes, colors, elements, and modular architecture.
If you decide to give a chance to Bulma, there are several ways:
npm install bulma
yarn add bulma
bower install bulma
download package from CDN
Easy integration with React, Angular, Meteor, and Ember frameworks.
Semantic UI offers several additional versions: CSS only, LESS only, LESS plugin, EmberJS, Meteor-Less, Meteor-CSS, Bower.
If you decide to start using it:
You need to install Node.js and Gulp first. Then use the next command:
npm install semantic-ui # Use themes, import build/watch tasks into your own gulpfile.
In closing we want to quote the words of full stack developer Brad Traversy:
“The more you learn, the easier it is to learn more and to fit all of these technologies together. Try not to get overwhelmed. Take it one step at a time and do some research, and figure out what you want to do.”
Thanks for reading!