Potamus

A lightweight and responsive setup of Material Design components writed in stylus. Is not always interesting to use in your project a whole framework like Materialize or Material Design Lite. This project aims to provide independent components, which would not change the way you drive your project.

To use you must install two packages potamus-stylus, that will provide you the stylus mixins, and potamus-js that will provide you the javascript for the components.

$ npm i -D potamus-js potamus-stylus

Until now, there are the following components:

Button

HTML:

<button class="some-awesome-button-class-name">Button</button>

Stylus:

.some-awesome-button-class-name
  button({
    background: #E91E63, // background-color of the button
    color: #fff,         // text-color of the button
    ripple-name: effect, // class name for the ripple effect
    js: true             // if true classes needed for js interactions are added
    width: 300px         // width of the button, can be omitted
  })

JavaScript:

potamus.button('some-awesome-button-class-name', 'name-for-ripple-effect-class');

Checkbox

HTML:

<input class="some-awesome-checkbox-class-name" type="checkbox">

Stylus:

.some-awesome-checkbox-class-name
  checkbox({
    border-color: #ccc, // border color when the checkbox is unchecked
    color: #E91E63,     // color when the checkbox is checked
    size: 40px          // size of the checkbox
  })

JavaScript:

potamus.checkbox('some-awesome-checkbox-class-name');

Radio

HTML:

<input class="some-awesome-radio-name" type="radio" id="first" name="radio">
<input class="some-awesome-radio-name" type="radio" id="second" name="radio">

Stylus:

.some-awesome-radio-name
    radio({
      animation-name: radio-fade, // name of the animation of the radio
      border-color: #9E9E9E,      // border color when the radio is unchecked
      color: #F44336,             // color when the radio is checked
      size: 30px                  // size of the checkbox
    })

JavaScript:

This component doesn't need javascript.

Text Field

HTML:

<div class="some-awesome-text-field-name">
  <input class="some-awesome-text-field-name_sufix-input" type="text">
  <label class="some-awesome-text-field-name__sufix-label">Nome</label>
</div>

Stylus:

.some-awesome-text-field-name
  text-field({
    active-color: #2196F3,                 // color when the input is focused
    default-color: #9E9E9E,                // color when the input is closed
    input-name: _sufix-input,              // sufix for input class name
    js: true,                              // if true classes needed for js
                                           // // interactions are added
    label-name: __sufix-label,             // sufix for label class name
    primary-text-color: rgba(0,0,0,.87),   // color of text on input an label
    secondary-text-color: rgba(0,0,0,.54), // color of text when label is closed
    valid-color: #4CAF50                   // color when the input is valid
  })

JavaScript:

potamus.textField('some-awesome-text-field-name', '__sufix-label', '_sufix-input');