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 without any dependencies, which would not change the way you drive your project.

Table of Contents

• Installation
• Usage
  • Stylus plugin
  • Javascript API
• Components
  • Button
  • Checkbox
  • Switch
  • Radio
  • Text Field
  • Data Table
• Contribute
• License

Installation

$ npm install --save-dev potamus

Usage

Potamus consists of a two-part package, a stylus plugin and a javascript API.

Stylus Plugin

Is fully recommended the use of autoprefixer-stylus along with potamus.

Import

Just import the stylus file to you project.

@import 'path/to/potamus/components/some-component.styl'

Gulp

To use with gulp just first install the npm package and then add to use add to your gulpfile as a plugin of stylus.

const gulp = require('gulp')
const plumber = require('gulp-plumber')
const potamus = require('potamus')
const stylus = require('gulp-stylus')

gulp.task('stylus', () =>
  gulp.src('src/*.styl')
    .pipe(plumber())
    .pipe(stylus({
      use: [potamus()]
    }))
    .pipe(gulp.dest('dist/')))

Stylus cli

Add potamus as argument of the use option.

$ stylus --use potamus src -o dist

Javascript API

Use some module loader as rollup, webpack, or browserify to load potamus components.

CommonJs:

const potamus = require('potamus')

ES6 Modules:

import potamus from 'potamus'

ES6 Modules + Named import:

import {someModule} from 'potamus'

// Example:
import {button, checkbox} from 'potamus'

Components

Note: All components works just fine without javascript, but with some limitations, so is good include the scripts.

You should pass a object as argument for every mixin, if none of the option is passed you can pass a blank object.

Button

HTML:

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

Stylus:

.some-awesome-button-class-name
  button({
    background-color: #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:

import potamus from 'potamus'

Array.from(document.querySelectorAll('.some-awesome-button-class-name'))
  .forEach(node => {
    node.addEventListener('click', button('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
    background-color: #E91E63, // color when the checkbox is checked
    size: 40px          // size of the checkbox
  })

JavaScript:

import potamus from 'potamus'

potamus.checkbox(navigator.userAgent, 'some-awesome-checkbox-class-name')

Switch

HTML:

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

Stylus:

.some-awesome-switch-class-name
  checkbox({
    active-color: #ccc, // default #009688
  })

JavaScript:

As switch is a checkbox input element it shares with checkbox the same API

import potamus from 'potamus'

potamus.checkbox(navigator.userAgent, 'some-awesome-switch-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
    background-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:

import potamus from 'potamus'

Array
  .from(document.querySelectorAll('.some-awesome-text-field-name_sufix-input'))
  .forEach(potamus.textField)

Data Table

<table class="some-awesome-table-name">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stephen Curry</td>
      <td>27</td>
      <td>1,91</td>
      <td>Akron, OH</td>
    </tr>
    <tr>
      <td>Klay Thompson</td>
      <td>25</td>
      <td>2,01</td>
      <td>Los Angeles, CA</td>
    </tr>
  </tbody>
</table>

Stylus:

.some-awesome-table-name
  table({
    responsive: true, // default false
    striped: true     // default false
  })

JavaScript:

This component doesn't need javascript.

Contribute

• Fork it!
• Create a new branch for the new feature: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request with full remarks documenting your changes ;)

License

MIT License © Thiago Santos