6:47 AM
Good news for every web designer out there. Google has cooked up a new
package that spruces up your web pages. Earlier this year, Material Design has
been introduced to the public. Heading on for an all encompassing
solution, the company eventually launched Material Design Lite (MDL) a few
months ago.
Material Design Lite (MDL) layout component is a comprehensive approach
to page layout that uses MDL development tenets, allows for efficient uses of
MDL components, and automatically adapts to different browsers, screen sizes,
and devices.
Essentially, MDL lets you add a Material Design look and feel to your
static content websites. It doesn’t rely on any JavaScript frameworks or
libraries. Optimized for cross-devices uses, gracefully degrades in older
browsers, and offers an experience that is accessible from the get-go.
Material Design Lite and Material Design for Bootstrap
Material Design for Bootstrap is a theme for Bootstrap 3 which lets you
use the new Google Material Design in your favorite front-end framework.
source: http://fezvrasta.github.io/bootstrap-material-design/#about
source: http://fezvrasta.github.io/bootstrap-material-design/#about
Let us take a look at this.
Source: http://everythingme.github.io/openspace/
Bootstrap and Material Design for Bootstrap were used for layout, elements, icons and colors in the above website photo. You can check out the site to observe some difference.
Material Design Lite: Let's do this
Now that you are able to look into the difference between Material Design Lite and Material Design for Bootstrap, you are now ready to dig deeper into Material Design Lite by doing this session I have prepared for you.
Let us get started.
Unpack the downloaded copy and notice that the mdl package contains
the following.
2. In Notepad++, prepare a file with the following content
4. Scroll down and paste the code
5. Paste it in your working file just like below.
Posted in: Tutorial
0 comments:
Post a Comment