Skip to content
Set of material ui components for riot js.
Branch: master
Clone or download
kysonic Merge pull request #52 from Joxit/master
[material-footer] Fix links in mini-footer and update version
Latest commit 697b21a Oct 6, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
examples/vanilla [riot v3] Update checkbox, combo, dropdown list, tabs and text area Mar 23, 2017
src [material-footer] Fix links in mini-footer and update version Oct 4, 2017
.gitignore
LICENSE LICENSE Oct 27, 2015
README.md Update README.md Apr 17, 2017
bower.json Examples. Bower. Oct 25, 2015
index.html [material-footer] Fix links in mini-footer and update version Oct 4, 2017
package.json [material-footer] Fix links in mini-footer and update version Oct 4, 2017
webpack.config.js Move from gulp to webpack and upgrade to version 0.1.0 Apr 15, 2017

README.md

riot-mui

Welcome!

Riot JS is the tiniest (by size) library allowing to create user interfaces. Riot is robust, fast and has enjoyable syntax. Unfortunately Riot doesn't have library of material UI components. This project aims to fix this problem.

Any person who loves Riot and material UI willing to be a part of this project - welcome! We have great chance to create set of components which will provide basic features of Material UI for Riot.

DEMO

Riot V3

We have moved to Riot v3! Version 2 is no longer supported. Big thanks Joxit for this update.

News

  • Webpack in da house! Now if you want to launch riot MUI just run npm start. (Global webpack, webpack-dev-server required...)

Source code of demo pages is placed here:

https://github.com/kysonic/riot-mui-page

How to get riot-mui?

Github:

  git clone https://github.com/kysonic/riot-mui 

Npm:

  npm install riot-mui 

Bower:

  bower install riot-mui 

Getting started

If you use Browserify (or presumably other NPM-based bundlers), you can simply require('riot-mui') and all tags and mixins will be registered with Riot.js

If you don't use some build system like webpack or gulp (+broserify) you can just include riot-mui.js and riot-mui.css (or their minimized versions) in your project.

 <link href="build/styles/riot-mui.min.css" rel="stylesheet">
        ....
 <script src="build/js/riot-mui-min.js"></script> 

Add material ui component:

<material-button>
    <div class="text">Button</div>
</material-button>    

And mount it:

riot.mount('material-button');

In another case you can use source files of this project:

require('material-elements/material-checkbox/material-checkbox.scss');
require('material-elements/material-checkbox/material-checkbox.tag');

Don't forget that some components have dependency of another components, for example material-button include material-waves. In this case you have to include it at first:

require('material-elements/material-waves/material-waves.scss');
require('material-elements/material-waves/material-waves.tag');
require('material-elements/material-button/material-button.scss');
require('material-elements/material-button/material-button.tag');

Learn more about riot-mui here.

A few words about styling

All components styles located in Sass file which has same name like a component file. All components styles encapsulated using tag name like a name space of component. All components styles has special section - "Variables for quick styling" which will help you to style main features of components really quickly. Also you have possibility to override it whatever you want.

Bugs, enhancements, suggestions

If you want to help make this project better you can add your suggestions here. This also applies to bugs and enhancements.

Contributing

  1. Fork the repo.
  2. Write your code.
  3. Submit your pull request to dev branch of this project.
You can’t perform that action at this time.