Polythene

Modular implementation of Material Design for Mithril.

• Demos / Examples
• Online documentation
• Project setup example

Release 0.2.0

This release contains a major refactoring of all components, including:

• CSS now uses BEM notation
• Polythene-theme is now integrated
• More options to customize theming
• Simplified opening/closing of dialogs
• Rewrite of Slider with more customization options

Added components:

• Checkbox
• Radio button
• Search
• Spinner
• Switch
• Text field

Background

• Polythene background
• Theming

Setup

Polythene uses Node tools to build. It runs in the browser.

Source files are written in es6 and transpiled to es5. The building blocks are async es6 modules and loaded when needed, but using SystemJS / jspm / Browserify it is also possible to create bundles where all required modules are combined.

Polythene works both in es6 and es5 applications.

Basic example

A simple es6 module that shows a button:

import m from 'mithril';
import button from 'polythene/button/button';
import 'polythene/theme/theme';

const app = {
    view: () => {
        return m('div', [
            m.component(button, {
                label: 'Button',
                raised: true
            })
        ]);
    }
};

m.mount(document.body, app);

Standalone version

A standalone script is included for use on JSBin / JSFiddle. Include this script:

https://rawgit.com/ArthurClemens/Polythene/master/polythene-standalone.js

Installation

You will need:

• Polythene - the core components (this repository; see instructions below)
• Polythene examples - (optional) to see implementations of components

Using npm with SystemJS or Browserify

npm install polythene

Using jspm

jspm install github:ArthurClemens/Polythene

Using Polythene with es5

When using Browserify, use require to get components:

var m = require('mithril');
require('polythene/theme/theme');
var btn = require('polythene/button/button');

Developing

The included transpile script calls Babel with params --presets es2015 and --plugins babel-plugin-add-module-exports.

Transpile everything once:

• npm run transpile

Watch changes while developing:

• npm run watch

Browser support

The default theme uses flexbox, so this works in IE10 and other browsers. For IE9 you will need to adapt the theme.

Project progress

Done

• Button
• Card
• Checkbox
• Dialog
• Divider (part of List)
• Floating Action Button
• Header panel
• Icon
• Icon button (toggle button)
• List
• List tile
• Menu, Simple menu
• Notification and Snackbar
• Radio button
• Ripple
• Search
• Shadow
• Slider
• Spinner
• Subheader (part of List)
• SVG
• Switch
• Tabs
• Text field
• Theming
• Toolbar
• Validation

To do

1. Collapse
2. Dropdown button
3. Progress bar
4. Bottom sheet
5. Grid list
6. Data table
7. Stepper
8. Tooltip
9. Side menu
10. Picker
11. Chip
12. Reorder list

License

MIT