mdl-ext

Material Design Lite Ext (MDLEXT). Components built with the Google Material Design Lite framework. MDLEXT provides the following components.

Accordion
A WAI-ARIA friendly accordion component with vertcial or horizontal layout.
Note: The accordion has been refactored and is not compatible with accordion prior to version 0.9.13
Bordered fields
The Material Design Lite Ext (MDLEXT) bordered fields component demonstrates how you can create your own theme of MDL text fields.
Carousel
A responsive image carousel.
Color themes
Material design color themes.
Grid
A responsive grid based on element queries in favour of media queries.
Lightboard
A lightboard is a translucent surface illuminated from behind, used for situations where a shape laid upon the surface needs to be seen with high contrast. In the "old days" of photography photograpers used a lightboard to get a quick view of, sorting and organizing their slides.
Lightbox
A lightbox displays an image filling the screen, and dimming out the rest of the web page. It acts as a modal dialog using the <dialog> element as a container for the lightbox.
Menu Button
A WAI-ARIA friendly menu button.
Selectfield
The Material Design Lite Ext (MDLEXT) select field component is an enhanced version of the standard HTML <select> element.
Sticky Header
A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.

Live demo

A Live demo of MDLEXT is available here

Works with modern browsers. Tested on Edgde, IE11. Firefox: OSX, Ubuntu. Opera: OSX. Safari: OSX, IOS. Chrome: Win, Ubuntu, OSX, IOS, Android.

Introduction

The MDLEXT component library is built with responsiveness in mind. The pre built CSS provided in the lib directory therefore comes in two versions; one based on media queries and one based on element queries, using eq.js. If you build the CSS from SASS, just import the correct sass file, mdl-ext.scss or mdl-ext-eqjs.scss.

Responsive breakpoints

A common metod in responsive design is to use media queries to apply styles based on device characteristics. The problem with media queries is that they relates to the viewport - so every time you write a media query for max-width or min-width, you’re connecting the appearance of your module to the width of the entire canvas, not the part of the canvas the component occupies.

Media queries are a hack

Some developers claim that media queries are a hack, and I totally agree! Imagine a design with a sidebar and a content area. In a responsive, fluent design both the sidebar and the content has "unknown" widths. Trying to add e.g. a responsive grid into the content area which relies on media queries, where you have no knowledge of how much space your content occupies, is in my opinion almost an impossible task.

Element queries to the rescue

An element query is similar to a media query in that, if a condition is met, some CSS will be applied. Element query conditions (such as min-width, max-width, min-height and max-height) are based on elements, instead of the browser viewport. Unfortunately, CSS doesn’t yet support element queries, but there are a couple of JavaScript-based polyfrills involving various syntaxes. They are not standard - but that should not stop us from using them. Element-first design is the spirit of the Atomic design principle, but looks very different in practice than how most people implement Atomic design using their mobile-first mindset. Instead of writing styles on advance for every conceivable situation a widget may find itself in, we are able to allow individual parts of the layout to adapt responsively when those elements require it.

Some of the polyfrills available are:

These are all good libraries, and they serve the purpose. After some evaluation I decided to go for eq.js. It is a small library with support for width based breakpoints. It works without requiring a server to run (no Ajax stuff). It does not break the existing CSS standard. I can use SASS for styling, and it works well in a Webpack workflow.

Install

If you haven't done so already, install Material Design Lite.

$ npm install --save material-design-lite

Install mdl-ext

$ npm install --save mdl-ext

Install eq.js if you choose to use the element query CSS/SASS version.

$ npm install --save eq.js

Getting started

Use it in your (static) page

<!DOCTYPE html>
<html>
<head>
  <title>Material Design Lite Extensions</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="node_modules/material-design-lite/material.css" />
  <link rel="stylesheet" href="node_modules/mdl-ext/lib/mdl-ext.min.css" />
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <main class="mdl-layout__content">
  </main>
</div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script type="text/javascript" src="node_modules/material-design-lite/material.min.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/mdl-ext/lib/mdl-ext.min.js" charset="utf-8"></script>
</body>
</html>

Note: You'll probably need several polyfills. If you don't want to waist time writing your own polyfills, the polyfill.io hosted service is a good choice.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Use it with element queries in your (static) page

<!DOCTYPE html>
<html>
<head>
  <title>Material Design Lite Extensions</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="node_modules/material-design-lite/material.css" />
  <link rel="stylesheet" href="node_modules/mdl-ext/lib/mdl-ext-eqjs.min.css" />
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <main class="mdl-layout__content">
  </main>
</div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script type="text/javascript" src="node_modules/material-design-lite/material.min.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/mdl-ext/lib/mdl-ext.min.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/eq.js/dist/eq.min.js" charset="utf-8"></script>
</body>
</html>

Note: Always import mdl-ext css after material css. Adjust path to node_modules (libraries) according to where your HTML file is located.

Use it in your (Webpack) build

Import SASS files

@charset "UTF-8";

// 1. Import MDL
@import '../node_modules/material-design-icons/iconfont/material-icons.css';
@import '../node_modules/roboto-fontface/css/roboto-fontface.css';
@import '../node_modules/material-design-lite/src/material-design-lite';

// 2. Import MDLEXT
@import '../node_modules/mdl-ext/src/mdl-ext';

// 2. ... or import mdl-ext-eqjs
//@import '../node_modules/mdl-ext/src/mdl-ext-eqjs';

// 3. Your stuff
@import 'stylesheets/variables';
@import 'stylesheets/app/whatever';

Imports above assumes that your main SASS file is located in the ./src folder. Adjust path to node_modules according to where your SASS file is located.

Import material-design-lite and mdl-ext scripts in your js file

import 'material-design-lite/material';
import 'mdl-ext';

... or require material-design-lite and mdl-ext

require('material-design-lite/material');
require('mdl-ext');

If you choose to use element queries, import or require eq.js

import eqjs from 'eq.js';  // ... or:  const eqjs = require('eq.js');

Components

Accordion

A WAI-ARIA friendly accordion component with vertcial or horizontal layout.

Bordered fields

The Material Design Lite Ext (MDLEXT) bordered fields component demonstrates how you can create your own theme of MDL text fields.

Carousel

A responsive image carousel.

Color themes

The color-themes component demonstrates how you can create your own themes of material design colors.

Grid

A responsive grid based on element queries in favour of media queries.

Lightboard

A lightboard is a translucent surface illuminated from behind, used for situations where a shape laid upon the surface needs to be seen with high contrast. In the "old days" of photography photograpers used a lightboard to get a quick view of, sorting and organizing their slides.

Lightbox

A lightbox displays an image filling the screen, and dimming out the rest of the web page. It acts as a modal dialog using the <dialog> element as a container for the lightbox.

Menu Button

A menu button is a button that opens a menu. It has roles, attributes and behaviour as outlined in WAI-ARIA Authoring Practices, 2.20 Menu Button.

Selectfield

The Material Design Lite Ext (MDLEXT) select field component is an enhanced version of the standard [HTML <select>] (https://developer.mozilla.org/en/docs/Web/HTML/Element/select) element.

Sticky Header

A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.

The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.

Notes

A Live demo of MDLEXT is available here.
You can also download or clone a demo project from here: https://github.com/leifoolsen/mdl-webpack. The demo project demonstrates how you can set up MDL with Babel(6) and Webpack, and how to self host Font Roboto and Material Icons in your web application.

Polyfills you might need:

dialog-polyfill

eqjs

custom-event polyfill or similar

mutation-observer polyfill

polyfill.io

Using Material Design Lite in a Single Page Application (SPA)

If you use Material Design Lite in a dynamic page, e.g. a single page application, you must call componentHandler.upgradeElement and componentHandler.downgradeElements accordingly to properly initialize an clean up component resources when sections of the page is updated. In a static web application there should be no need to call componentHandler.downgradeElements.

The following code snippet demonstrates how to properly clean up MDL components before removing them from DOM.

// Call 'componentHandler.downgradeElements' to clean up
const content = document.querySelector('#content');
const components = content.querySelectorAll('.is-upgraded');
componentHandler.downgradeElements([...components]);

// Remove elements from DOM.
// See: http://jsperf.com/empty-an-element/16
const removeChildElements = (element, forceReflow = true) => {
  while (element.lastChild) {
    element.removeChild(element.lastChild);
  }
  if(forceReflow) {
    // See: http://jsperf.com/force-reflow
    const d = element.style.display;
    element.style.display = 'none';
    element.style.display = d;
  }
}

removeChildElements(content);

Licence

This software is built with the Google Material Design Lite framework, which is licenced under an Apache-2 licence.

Name		Name	Last commit message	Last commit date
Latest commit History 372 Commits
demo		demo
etc		etc
lib		lib
src		src
test		test
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.istanbul-mocha.config.js		.istanbul-mocha.config.js
.istanbul.yml		.istanbul.yml
.nojekyll		.nojekyll
.stylelintrc		.stylelintrc
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
blacklisted-versions.md		blacklisted-versions.md
gulpfile.js		gulpfile.js
index.html		index.html
mocha.opts		mocha.opts
package.json		package.json
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

mdl-ext

Live demo

Introduction

Responsive breakpoints

Media queries are a hack

Element queries to the rescue

Install

Getting started

Use it in your (static) page

Use it with element queries in your (static) page

Use it in your (Webpack) build

Components

Accordion

Bordered fields

Carousel

Color themes

Grid

Lightboard

Lightbox

Menu Button

Selectfield

Sticky Header

Notes

Using Material Design Lite in a Single Page Application (SPA)

Licence

About

Releases

Packages

Languages

License

AH7/mdl-ext

Folders and files

Latest commit

History

Repository files navigation

mdl-ext

Live demo

Introduction

Responsive breakpoints

Media queries are a hack

Element queries to the rescue

Install

Getting started

Use it in your (static) page

Use it with element queries in your (static) page

Use it in your (Webpack) build

Components

Accordion

Bordered fields

Carousel

Color themes

Grid

Lightboard

Lightbox

Menu Button

Selectfield

Sticky Header

Notes

Using Material Design Lite in a Single Page Application (SPA)

Licence

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages