So sánh bootstrap và material lite năm 2024

Sắp xếp theo: Bài viết mới nhất

May 29th, 2016 10:54 p.m. 3 phút đọc

May 28th, 2016 8:11 a.m. 5 phút đọc

May 25th, 2016 6:28 p.m. 15 phút đọc

Apr 25th, 2016 6:35 p.m. 9 phút đọc

Apr 24th, 2016 6:47 p.m. 4 phút đọc

Apr 22nd, 2016 12:29 a.m. 3 phút đọc

Mar 26th, 2016 4:50 p.m. 5 phút đọc

Mar 24th, 2016 6:37 p.m. 3 phút đọc

Mar 22nd, 2016 6:35 p.m. 3 phút đọc

Mar 21st, 2016 6:35 p.m. 6 phút đọc

Feb 26th, 2016 10:13 a.m. 8 phút đọc

Feb 23rd, 2016 4:09 p.m. 15 phút đọc

Jan 28th, 2016 5:26 p.m. 3 phút đọc

Trending Sep 30th, 2022 1:22 p.m.

Jan 28th, 2016 12:26 a.m. 7 phút đọc

Jan 27th, 2016 5:02 p.m. 27 phút đọc

Jan 26th, 2016 5:40 p.m. 9 phút đọc

Jan 25th, 2016 3:22 a.m. 9 phút đọc

Dec 28th, 2015 1:31 a.m. 4 phút đọc

Nov 28th, 2015 11:01 p.m. 10 phút đọc

Nov 28th, 2015 2:37 a.m. 11 phút đọc

Google recently announced Material Design Lite which lets your website easily adapt Material Design with minimum effort. It’s a bunch of CSS and Vanilla Javascript code which doesn’t have any other dependencies and that makes it awesome!

Twitter’s Bootstrap has dominated the front-end design pattern in the past couple of years. The real question is, “Will Bootstrap continue it’s dominance?”. With more than 6,000 stars on MDL Github repo in less than 72 hours of it’s announcement, Material Design Lite definitely challenges Bootstrap head-on.

Since both of them serve as the base layer for the front-end world of HTML and CSS, they are different in some ways while very similar in some fashion. Let’s have a look!

Material Design Lite

• Follows stricter pattern of Material Design Concept. The concept includes plenty of information about metrics, breakpoints, animation, typography and other code-able values.
• MDL can be customized but one may easily lose the concept of Material Design.
• MDL is built using SCSS preprocessor
• No external dependencies, just plain vanilla JavaScript
• Components include cards, mega footer, slider inputs and toggle switches which isn’t supported by Bootstrap
• Package managers: Available on npm and bower
• Build process using Gulp
• Less number of extensions available because of its newness. But the community is growing rapidly, so expect a lot more plugins in the coming days.
• Base font: Roboto
• Color variations: Usually shades of two colors
• Support in JS frameworks: and
• Browser Support: Fully supported on all the major browsers across devices which includes IE 10+, Chrome, Firefox, Opera, Safari, Chrome for Android and Safari Mobile. It degrades gracefully on IE9
• File size: Latest MDL (v1.0.0) has a gzip size of ~27KB which is pretty neat.

Bootstrap

• Works more like a base which can be customized to your creativity
• Built using LESS (also has a SASS version)
• jQuery dependency
• Components include panel, popover, breadcrumb, thumbnails, inline alerts and wells which aren’t present in Material Design Lite.
• Package managers: Other than npm and bower. Bootstrap is also available on composer
• Build process using Grunt
• A lot of extensions and third-party widgets are available for Bootstrap because of it’s dominance and duration in the field.
• Base font: Helvetica Neue
• Color variations: Bootstrap uses context based colors like primary, info, danger and warning.
• Support in JS frameworks: Angular UI Bootstrap and React Bootstrap
• Browser Support: Bootstrap supports all the major browsers and has a backward compatibility upto Internet Explorer 8, though it needs Respond.js polyfill for CSS3 Media-queries support. Official documentation also says that “Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported”
• File size: Bootstrap depends on jQuery and the latest build (v3.3.5) has a gzip file size of ~64KB including jQuery and ~31KB excluding jQuery.

  This is an ongoing article and it will be improved as we receive more in-depth knowledge about Material Design Lite.

My opinion and choice

If you’re looking for heavy customization and you don’t want to remain in the constraints, Bootstrap is a clear winner. If you love bright colors and modern Material concept, you must go with Material Design Lite.