The idea here is to swap Bootstrap with Material Design and swap Sass with LESS. We will again try to get as much as we can from what comes by default with Material Design Lite (MDL).
The first step is to install MDL with npm:
>> npm install material-design-lite --save
Next, we need to rename all the SCSS files to LESS and all variable declaration to start with $
to @
.
Initially, a mobile framework/language, the navigation layouts in MDL are quite different from the Bootstrap defaults. The idea is to bring to the user a seamless transition between the native mobile apps and the web apps:
<div className="mdl-layout mdl-js-layout">
<header className="mdl-layout__header mdl-layout__header--scroll">
<div className="mdl-layout__header-row">
<span className="mdl-layout-title">Online Store</span>
<div className="mdl-layout-spacer"></div>
<nav className="mdl-navigation">
<...