The motivation of this project is to use plain vanilla HTML, Javascript, and CSS with the help of web toolkits like Bootstrap to build websites and web applications.
The project will try to minimize additional third-party Javascript framework (with the notable exception of Bootstrap) in the interest of making the project as vanilla as possible.
ES6 is widely supported in modern web browsers - see ES6 compatibility table. We will be using ES6 Javascript in this project.
We all want our websites/applications to look and function well. It's just impractical to do everything from scratch. So it makes sense to use a web toolkit like Bootstrap for a web project even if the website/application is intended to be simple.
Most of the examples in this project is based on Bootstrap 5.
Material Design is an awesome project provides many great looking UI. On React, there's a well-implemented library that provides great support for incorporating Material Design look and feel in a React project.
Material Design libraries that support vanilla HTML, CSS, and JavaScript aren't as good as their counterpart in React. Here's our options.
- MDB5 - 21.5k stars, last updated 6/2021
- MUI CSS - 4.4k stars, last updated 6/2020
- Materialize - 38.8k stars, last updated 6/2020
- Material Design Lite - 31.9k stars, last updated 6/2017
Played with all the above frameworks and found MDB5 (Material Design for Bootstrap 5) to be the most versatile and stable. The downside to MDB5 is that some of the more advanced UI components require paid subscription.
Material-UI | MDB 5 | Bootstrap 5 | |
---|---|---|---|
Album | live | live / source | |
Sign-In | live | live / source | live / source |
Admin Console | live / source | ||
Modal | live / source | ||
Form Validation | live / source |