Have ideas to improve npm?Join in the discussion! »

    material-ui-with-sass

    0.1.17 • Public • Published

    material-ui-with-sass

    material-ui-with-sass is a combination fork of material-ui@v0.7.5 and material-ui-sass that still uses traditional css (well, sass) to apply styles.

    Currently, it works with react >= 0.13, including 0.14.0-beta1

    Why?

    Because of this decision. I'm in a situation where upgrading to material-ui v0.8 would've been too time-consuming to refactor the entire project in favor of their inline-js styles. And so, material-ui-with-sass was born. It's currently pretty far behind the original material-ui, but if you find this useful, please contribute! This repo could use some love.

    Documentation/Examples

    Check out our github io site for live examples. Although this looks identical to material-ui's demo site, it has been updated to reflect material-ui-with-sass's current state.

    Notable Differences

    Installation

    material-ui-with-sass is available as an npm package.

    npm install material-ui-with-sass

    Styling

    The styles are separated into 2 sass files:

    • src/sass/scaffolding.scss
    • src/sass/components.scss

    It is important that when you compile the sass that you use something like autoprefixer!

    This allows you to override any variables defined in _custom-variables.scss without having to modify material-ui-with-sass source files directly. For example, your main.scss file could look something like this:

    @import "node_modules/material-ui-with-sass/src/sass/scaffolding";
     
    // Define a custom sass file to override any variables defined in scaffolding.scss 
    @import "my-custom-overrides.scss";
     
    @import "node_modules/material-ui-with-sass/src/sass/components";

    Usage

    Once material-ui-with-sass is included in your project, you can use the components this way:

    /** MyAwesomeReactComponent.jsx */
     
    var React = require("react"),
    var mui = require("material-ui-with-sass");
     
    var MyAwesomeReactComponent = React.createClass({
      render: function() {
        return (
          <mui.RaisedButton label="Default" />
        );
      }
    });
     
    module.exports = MyAwesomeReactComponent;

    Contribute

    This project is seriously lagging behind the original material-ui, but I'm hoping there are enough people who want to use material-ui, but either didn't want to, or simply couldn't refactor the entire project to use inline-js styling, that this will gain a little popularity. Please contribute if you can!

    License

    This project is licensed under the terms of the MIT license

    Install

    npm i material-ui-with-sass

    DownloadsWeekly Downloads

    5

    Version

    0.1.17

    License

    MIT

    Last publish

    Collaborators

    • avatar