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

immaterial

v0.4.1

Published

Google Material can be customized with just a SASS sheet. Sadly, wrapper libraries break that. Let's unbreak them.

Downloads

9

Readme

immaterial

Google Material can be customized with just a SASS sheet. Sadly, wrapper libraries break that. Let's unbreak them.

tl;dr

npm install -g immaterial
immaterial yourrules.json

You should now see yourrules.json.scss, yourrules.json.email.scss, yourrules.json.css, yourrules.json.email.css, yourrules.materialui.js, and yourrules.ngmaterial.js.

You may create a yourrules.json by copying lib/material defaults.json to the main directory, configuring the rules you're interested in, and if you like, removing the others.

What's this all about then guvna

So maybe you're at a company that uses more than one frontend strategy - say, Angular and React (or vanilla and Ember, or Meteor and Riot, or ... eh.)

And, y'know, at one point people will make the correct observation that UI unification is a Good Thing™. And they might, sensibly, think Google Material is a good approach to solving that, because ostensibly it's a nearly pure CSS approach, and that means portability, and yadda yadda. And a cheer will go up among the devs, and everyone will get emotionally committed.

Sounds great!

Then the real world hits.

See, kids, there's only two complete React solutions out there, and only one complete Angular solution, and of course they're not the vendor ones. And of course they're written by people who think that if you're using their solution, then your entire company is committed to that frontend tech, and they can just break the CSS thing without consequences.

Which, of course, has consequences.

Why I oughta

You don't have to. I already did.

Meet Immaterial. Because that's into what I'm trying to turn this problem. (Woo tortured sentence structure! Wooo.)

The idea is simple.

  1. Tokenize all the rules that can be represented
  2. Make a tiny pluggable build system (aww lookit it's so cute)
  3. Consuming one meta-stylesheet, produce N outputs
  4. Pre-offer outputs for:
  5. mdl (CSS) style SASS rulesheet
  6. Material-UI (React) style imperative API
  7. ng-material (angular) style imperative API

Polemic :neckbeard:

immaterial is MIT licensed, because viral licenses and newspeak language modification are evil. Free is only free when it's free for everyone.