Community Post

Getting started with Material Design Lite (Part One)

What's Material Design

If you have been following up on the race for more interactive interface designs, you must have heard of material design, Material design is this new rave of design created by Google intended to be a world-wide standard in web design and development.

The MDL(Material Design Lite) is a set of css and javascript libraries curated by Google to help implement material Design on the web.

So let's dive in...by the way for more information on mdl check out the official site

Table of Contents

    Installing and Configuring

    Hosted

    To work with MDL you can include the links to the CDN link on your pages, to link to the css and javascript codes

    Note: the MDL helps you add the Material Design look and feel. it doesn't rely on any javascript frameworks

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>

    This is best for production servers.

    Download

    When developing you'll likely want to work more interactively with the code, therefore to include the mdl package into your project, you could download its minified css and javascript from the offical site or click here to download, refer to these files in your html files.

    You could add material icon fonts via the cdn link to include material icons to your projects.

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    Using the OpenSource repository

    Compiling via NPM

    If you are familiar with gulp and build dependency tool, you could build the source on the git repository, you'll need to download the code and build it.

    just run the following commands in the shell

    git clone https://material-design-lite.git

    navigate via your terminal or shell to the repo's folder, install the various dependencies via npm

    npm install && npm install -g gulp

    After npm updates the packages, run the gulp command to compile the source.

    gulp

    Installing Via Bower

    If you are familiar with package dependency manager on front-end development like Bower and NPM, Then you could install the mdl framework via bower using the shell commands

    bower install mdl-lite --save

    You can refer to the files in you html

    <link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
    <script src="/bower_components/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    Installing Via NPM

    Also you could install the mdl framework via NPM using the shell commands

    npm install material-design-lite --save

    easy right?, you could also append the --save-dev to the shell command to save it as a development package..

    npm install material-design-lite --save-dev

    This will install the Material Design Lite library files in your project's node_modules folder.

    To refer to the files in your html

    <link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
    <script src="/node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    The Web Starter Kit

    If you are looking to fully bootstrap the mdl library, check out the web starter kit. Its a cross-browser, that can be used by anyone to create more productive, portable and usable web pages.

    Conclusion

    In this section we only reviewed the process of installing and setting up a project to work with the MDL, In the next post, I'd walk us through the process of using the components of MDL,

    Thanks

    Chibuike Emmanuel Osita

    2 posts

    Am a Fun loving developer and a crazy fast learner...