potamus v0.8.0
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 = 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 ;)