Awesome

ceri-materialize

> Many components are still missing!

Changelog 2.0

move to stylus
allow finer control of loaded styles

Features

Easy style modification
load only what you need
no need for purifycss or uncss

Install

# npm
npm install --save-dev ceri-materialize normalize.css stylus stylus-loader
# yarn
yarn add --dev ceri-materialize normalize.css stylus stylus-loader
#pnpm
pnpm install --save-dev ceri-materialize normalize.css stylus stylus-loader

Style

For the usage of the css only components see the very good materialize-css documentation.

For style personalization see the variable definitions.

Webpack config

module:
  rules: [
    # when using roboto fonts:
    { test: /\.woff(\d*)\??(\d*)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
    { test: /\.ttf\??(\d*)$/,    loader: "file-loader" }
    { test: /\.eot\??(\d*)$/,    loader: "file-loader" }
    { test: /\.svg\??(\d*)$/,    loader: "file-loader" }
    # always:
    { test: /\.styl$/, loader: ["style-loader","css-loader","stylus-loader"]}
  ]

configure stylus

create a file, for example materialize.config.styl

// normalize.css is recommended
// install: npm install --save-dev normalize.css
@require "~normalize.css"

// materialize color palette

@require "~ceri-materialize/1_color"

// to include a color call addColor(colorName, type = "base")
// addColor("black")
// will add
// .black
//   background-color: black
// .black-text
//   color: black
// addColor("grey","lighten-1")
// will add
// .grey.lighten-1
//   background-color: #bdbdbd
// .grey-text.text-lighten-1
//   color: #bdbdbd


// Variable definitions

@require "~ceri-materialize/2_variables"
// change variables here
// $primary-color = getColor("grey", "lighten-1")


// main content, you probably need this

@require "~ceri-materialize/3_typography"
@require "~ceri-materialize/3_utils"
@require "~ceri-materialize/3_mixins"


// Roboto font
// install roboto-fontface: npm install --save-dev roboto-fontface
// @require "~ceri-materialize/3_roboto"
// to include a variant call roboto-font($variant="Roboto", $type="Medium", $style="Normal")
// $variant can be "Roboto", "Roboto-Slab" or "Roboto-Condensed"
// $type can be "Thin","Light","Regular","Medium","Bold","Black"
// $style can be "Normal", "Italic
// e.g.: roboto-font("Roboto", "Medium", "Normal")


// css you may or may not need

// @require "~ceri-materialize/4_breadcrumbs"
// @require "~ceri-materialize/4_collections"
// @require "~ceri-materialize/4_footer"
// @require "~ceri-materialize/4_pagination"
// @require "~ceri-materialize/4_responsiveTable"
// @require "~ceri-materialize/4_table"
// @require "~ceri-materialize/4_typographyFlowText"
// @require "~ceri-materialize/4_videoContainer"
// @require "~ceri-materialize/4_zLevels"


// css for forms

// @require "~ceri-materialize/5_inputFields"
// @require "~ceri-materialize/5_checkboxes"
// @require "~ceri-materialize/5_radioButtons"
// @require "~ceri-materialize/5_range"
// @require "~ceri-materialize/5_select"
// @require "~ceri-materialize/5_switches"


// advanced css

// @require "~ceri-materialize/6_buttons"
// @require "~ceri-materialize/6_grid"
// @require "~ceri-materialize/6_navbar"
// @require "~ceri-materialize/6_preloader"


// ceri-comps

// @require "~ceri-dropdown/materialize"
// @require "~ceri-modal/materialize"
// @require "~ceri-side-nav/materialize"
// @require "~ceri-tooltip/materialize"
// @require "~ceri-toaster/materialize"
// @require "~ceri-progress/materialize


// ceri-widgets

// @require "~ceri-files-view/materialize"
// @require "~ceri-login-modal/materialize
// @require "~ceri-fab/materialize"

Require it like this in your entry file:

require("./materialize.config.styl")
// or
import "./materialize.config.styl"

Icons

No icons are included in the bundle.

You can either take the Google Material Design Icons as a font and use them the materializeCSS way:

<i class="material-icons">add</i>

or use ceri-icon