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
$ 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 =const plumber =const potamus =const stylus =gulp
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 =
ES6 Modules:
ES6 Modules + Named import:
// Example:
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
Stylus:
.some-awesome-button-class-name { 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:
Array
Checkbox
HTML:
Stylus:
.some-awesome-checkbox-class-name { 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:
potamus
Switch
HTML:
Stylus:
.some-awesome-switch-class-name { active-color: #ccc, // default #009688 })
JavaScript:
As switch is a checkbox input element it shares with checkbox the same API
potamus
Radio
HTML:
Stylus:
.some-awesome-radio-name { 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:
Nome
Stylus:
.some-awesome-text-field-name { 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: 0,0,0,.87), // color of text on input an label secondary-text-color: 0,0,0,.54), // color of text when label is closed valid-color: #4CAF50 // color when the input is valid })
JavaScript:
Array
Data Table
Name Age Height Location Stephen Curry 27 1,91 Akron, OH Klay Thompson 25 2,01 Los Angeles, CA
Stylus:
.some-awesome-table-name { 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 ;)