Material Design Lite for Ember.js Apps

Related tags

React ember-material-lite
Overview

ember-material-lite

Build Status NPM Version

Google's Material Design Lite for Ember.js apps

This addon requires ember >= 1.11.0

Installation

# ember-cli < 0.2.3
ember install:addon ember-material-lite
# ember-cli >= 0.2.3
ember install ember-material-lite

Without SASS

This addon can be used without SASS (relying on pure CSS for styles). If you choose this path, you'll need to alter your app slightly.

  1. Delete the ember-cli-sass NPM dependency that the installation blueprint will add to your app.
  2. Add the following line to your ember-cli-build.js.
app.import('node_modules/material-design-lite/material.css');

Configuration

Colors

You can customize the colors of material design elements globally by setting sass variables prior to importing the main styles.

app/styles/app.scss

@import '_color-definitions';

$color-primary: $palette-teal-500;
$color-accent: $palette-pink-A200;

@import 'material-design-lite';

Load Material design icons fontfiles locally

Adding http://fonts.googleapis.com/icon?family=Material+Icons into the index.html just works. But in few scenarios(like running app offline) you would want to include these icon fonts from the project directories itself. To achieve the same, first edit ember-cli-build.js to include the following

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: ['node_modules/material-design-lite/src']
    }
  });

  var googleFontFiles = pickFiles(
    'node_modules/material-design-icons/iconfont',
    {
      srcDir: '/',
      files: ['**/*.woff', '**/*.woff2', '**/*.eot', '**/*.ttf'],
      destDir: '/fonts'
    }
  );

  return mergeTrees([app.toTree(), googleFontFiles]);
};

Also Add below code on top of app/styles/app.scss file to import icon font files.

/*Material Icons css*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff)
      format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

Images

Several of the MDL components reference image assets. In order to include them in your project, edit ember-cli-build.js to include the following:

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: ['node_modules/material-design-lite/src']
    }
  });

  var materialSVG = pickFiles('node_modules/material-design-lite/src/images', {
    srcDir: '/',
    files: ['**/*.svg'],
    destDir: '/images'
  });

  return mergeTrees([app.toTree(), materialSVG]);
};

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Analytics

Comments
Releases(v1.0.1)
Owner
Mike North
@LinkedIn's infrastructure product/UX lead, webdev trainer, software engineer. @FrontendMasters Instructor. Formerly: UI Architect @yahoo, CTO @levantofinancial
Mike North
GitHub http://mike.works/ember-material-lite
Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mike Wilson 121 Mar 1, 2022
Ember-cli addon for using Bootstrap as native Ember components.

ember-bootstrap An ember-cli addon for using Bootstrap 4 und 5 in Ember applications. The addon includes the Bootstrap CSS (or Sass, Less) in your pro

kaliber5 491 Dec 25, 2022
Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models

@mainmatter/ember-api-actions This is an Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models. Compatibility Em

Mainmatter 6 Dec 15, 2022
An accessible dropdown component for use in Ember apps.

ember-a11y-dropdown This is an accessible dropdown that you can use in your Ember app for a menu dropdown. I'm making it so people can stop using the

Melanie Sumner 2 Feb 10, 2022
Codemod to un-pod Ember apps, addons, and engines

ember-codemod-pod-to-octane Codemod to un-pod Ember apps, addons, and engines Usage Step 1. Quickly return to default Octane. cd <your/project/path> n

Isaac Lee 9 Nov 30, 2022
Babel Plugin Lite Regenerator

Babel Plugin Lite Regenerator intro This babel plugin is a ported version of TypeScript generator transform. It can transform async and generator func

Shi Meng 6 Jul 8, 2022
A lite version for the my original app loki stream which allowed watching anime on your phone. Made using expo.

LokiStream Lite A lite version for the my original app loki stream. This app is faster, smaller and more optimized for your phone. It allows you to wa

Lavish Kumar 18 Dec 24, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
Material Design Web Components

Material Web IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release. Material Web is Google’s UI toolkit for bui

Material Components 4.6k Dec 31, 2022
A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

HugePancake 5 Jun 3, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
Demonstration of how to use statecharts as and with actors in Ember.js

statechart-actors This app demonstrate how we can use ember-statecharts and XState's actor feature together. The demo-use case: Show a blog posts over

Michael Klein 3 Jan 9, 2022
An Ember CLI Addon that provides a variety of UI components.

We use https://waffle.io/softlayer/sl-ember-components to work our issues. What sl-ember-components is An Ember CLI Addon that provides UI components

SoftLayer 115 May 7, 2022
Official Semantic UI Integration for Ember

Semantic-UI-Ember This is the official Ember library for the Semantic-UI modules. Support The NodeJS and EmberJS versions respective tags are tested o

Semantic Org 335 Oct 1, 2022
The ember implementation of UIkit

ember-uikit This addon is a wrapper for the CSS library UIkit which exposes certain components to give users an easy way for using UIkit in ember apps

Adfinis 25 Oct 20, 2022
Bootstrap for Ember.js

Please use our CLI-ADDONS instead We rewrote almost all components from scratch and packed them as Ember-Addons, Please avoid using this project and u

null 708 Nov 17, 2022
Rich components for Ember.js framework.

Ember Components Ember Components is a comprehensive set of rich web components written purely in Ember.js that let you create an astonishing UI for a

Indexia Technologies, ltd. 185 Dec 18, 2020
Ember implementation of the game

Ember implementation of the game

null 9 Apr 27, 2022