npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

material-ui-sass

v0.7.5

Published

SASS version for the material-ui CSS framework

Downloads

34

Readme

material-ui-sass

This is the Sass counterpart of the material-ui React/CSS framework, which originally uses Less for the styles.

Working with material-ui v0.7.5.

Join the chat at https://gitter.im/gpbl/material-ui-sass npm version

Installation and first setup

Using npm

npm install material-ui-sass

In your SCSS file you need to import directly from node_modules:

// when style.scss is in your project's root
@import "./node_modules/material-ui-sass/material-ui";

/* Your style here */
h1 { text-decoration: blink; }

Manual download

If you don't want to dig into node_modules in your .scss files, you can download the sources:

  • Download 0.7.5 version - working with material-ui v0.7.2
  • Unzip and copy the material-ui directory into your project, usually where you put your styles.
  • Import material-ui/main into your main .scss file:
@import "material-ui/main";

/* Your style here */
h1 { text-decoration: blink; }

Usage

The Sass files work with the original material-ui React components.

You can customize the default values overriding those in _custom-variables.scss. Include them before importing material-ui:


@import "my-custom-variables";
@import "material-ui/main";

/* Your style here */

Compiling

You must use autoprefixer when compiling your own CSS. The gulp sass task is an example on how to do it.

Extending typography classes

Material-ui includes a set of typography classes that you can use with SASS @extend in your own CSS:

.my-custom-headline {
  @extend %mui-font-style-headline;
}

Differences from the original version

The framework does not change HTML tags

The original version included a set of HTML tags: h1, h2... h6, p and hr. Those definitions are moved in _html.scss, which is not imported by default. You need to import that file manually if you still need them.

Contribute

I will try to keep the two frameworks in sync, but you can also help :-) If you find bugs or idea for improvements, feel free to add a new issue.

If you'd like to send pull requests, please try to adopt the current styles and conventions. For now, they need to be close to the original less code.

Development

When converting to Sass, I've found the material-ui docs site useful to preview my changes. After starting the doc site server, a watching gulp task overwrites the site's main.css with the Sass-compiled version. (This means you may need to sassify also the documentation site)

Clone with submodules

git clone --recursive https://github.com/gpbl/material-ui-sass.git
cd material-ui-sass

Start the dev environment

npm install    # will install material-ui-sass dep
npm run setup  # will install material-ui docs and deps
npm run dev    # run the dev environment

npm run dev should open automatically the documentation site. While editing the .scss files, you will see a live preview of the changes.

PS. You need to make a change in a .scss file to overwrite the original css.

Start migrating the .less files

I start from the github's compare view showing the diff from the previous version (e.g. the v0.4.0 tag) to the current release (e.g. the v0.5.0 tag – not master!). This view shows which .less files have been changed.

Then I keep opened 2 browser's windows: one displaying the the Sass version I'm working on (that running with npm run dev) and the other one showing http://www.material-ui.com, to help spotting the differences between the two versions.