minimaterials

^{*After minification, uncompressed}

---

A tiny implementation of Material Design 1/2/3 for use in lightweight web apps. It's not exactly to spec, but it's close enough in my opinion.

It's similar to Google's Material Design Lite, but minimaterials aims to:

• Support all Material Design versions (1, 2, and 3/You)
• Be smaller than Material Design Lite
• Be easier to write code for than Material Design Lite
• Support dynamic theme switching

minimaterials does not use NPM, however JavaScript is used to help reduce size.

Building

You need GNU make and the minify CLI (The Go-based one, NOT the one from NPM).

To build a specific version of Material Design, simply do make mdX, where X is the Material version you need. For example, make md1 will build the original Material from 2014, and make md3 will build Material You.

To build all versions of Material Design (1, 2, and 3/You), run make all. It will bundle all the Material versions together into a single CSS file.

The result is mm-X.min.css, where X is either md1, md2, md3, or all.

Screenshots

These screenshots were generated by the screenshots rule in the Makefile, which is dependent on chromium.

Quick Brown Fox News (MD1, doc/examples/basic-cards_appbar.html)

Dynamic Colors & Card Image Testing (MD1, doc/examples/image-cards_colors.html)

TODO

• Build system
• Bundling
• Minification
• Material Design 1
  • Typography
    • Fonts
    • Scale
  • Color
    • Complete rework
      • Encoding
      • Decoding
      • Setting palettes
      • Decide on white/black text automatically
    • Primary (19/19)
    • Secondary (19/19)
  • Components
    • App bar / Navbar
      • Basic layout
      • Shadows
      • Theme colors (light/dark)
      • Opposite theme colors (light/dark)
      • Primary colors
    • Cards
      • Theme colors (light/dark)
      • Shadows
      • Hover effects
      • Text
      • Images
    • Buttons
      • Raised buttons
        • Theme colors (light/dark)
        • Primary colors (with a good system, unlike .mm-appbar-button)
        • Secondary colors
        • Shadows
        • Look basically identical
        • Hover effects
        • Click effects
        • Disabled buttons
      • Flat buttons
        • Theme colors (light/dark)
        • Primary colors
        • Secondary colors
        • Look basically identical
        • Hover effects
        • Click effects
        • Disabled buttons
      • Floating action buttons
    • Sliders
    • Checkboxes
    • Radio buttons
    • Switches
    • Lists
    • Tables
    • Text fields
    • Icons
    • Tooltips
    • Dialogs
    • Drawer / Sidebar
    • Dropdown menus
    • Loading indicators
    • Toasts & Snackbars
• Material Design 2
• Material Design 3/You