14 DAY TRIAL // Barely a week has passed since Google released Material Design Lite and the project has already been stared 9,500 times, and forked 950 times on GitHub.
The success of this project reminds us of Bootstrap, a similar frontend UI framework, which in its beginning was backed by Twitter, being known as Twitter Blueprint, then Twitter Bootstrap, before being released as a separate open source entity as Bootstrap.
It is highly unlikely that Material Design Lite will ever be taken away from Google's stewardship, but the project is a bonafide success as it stands today.
Since both work in a similar manner, providing developers with a core of basic styles and UI components for their projects, we came to wonder how much these two projects have in common.
| Comparison Criteria | Bootstrap (3.3.5) | Material Design Lite (1.0.0) |
|---|---|---|
| External dependencies | jQuery | None |
| CSS pre-processor | LESS (future versions will be SCSS) | SCSS |
| CSS reset | normalize.css | normalize.css (via HTML5 Boilerplate) |
| Minified CSS size | 120 KB | 118 KB |
| Minified JS size | 36 KB | 56 KB |
| Build tool | Grunt | Gulp |
| Package managers | npm, Bower, Composer, Meteor | npm, Bower |
| Lowest version of IE supported | IE7 | IE8 |
| Support for themes | Yes | Kind of. There's a limited theme builder. |
| Built-in templates | No | No |
| Available components & widgets | Icons, Dropdowns, Button groups, Button dropdowns, Input groups, Navigation menus, Navbar, Breadcrumbs, Pagination, Labels, Badges, Pills, Jumbotron, Page header, Thumbnails, Alerts, Progress bars, Media object, List group, Panels, Wells, Grid system, Typography presets, Table styles, Form elements, Tooltips, Popovers, Modal windows, Error messages, Notifications, Slider, Accordion, Scrollspy, Animations & transitions | Badges, Buttons, Cards, Layout, Loading, Menus, Sliders, Toggles, Tables, Text, Fields, Tooltips |
| Default font | Helvetica/Arial | Roboto |
| Grid system | Classic fluid CSS grid, implemented in LESS | Flexbox grid with some CSS calc() |
| Does it work with AngularJS | Yes | Technically it should. Has not been tried until now. |
| Does it work with React | Yes | Technically it should. Has not been tried until now. |
| Overall style | Classic Bootstrap look. Pretty well-known. Will require designers to use themes and modify it. | Material Design. Looks like an Android app spread across a wider screen. |
| Responsive | Yes | Yes |
| Docs & Demos | A bunch. On official website and beyond | Yes, on official website |
| Versioning | Semver | Semver |
| License | Apache | Apache |