stylep
v1.1.0
Published
Style patterns you can use for systematic design
Downloads
6
Readme
stylep
<img src=https://avatars1.githubusercontent.com/u/16121328?v=3&s=200 title=stylep-button align=right height=95>
Design patterns are the cornerstone to systematic design, letting you focus on iteration and perfection. Stylep (Style Patterns) let you use common design patterns and components that have already been thought out and tested without making any design decisions before you start. Stop re-inventing wheels, and repainting the chrome, just use what you need and style accordingly.
This is not a framework, and it never will be. Stylep is an ecosystem of simple design patterns written in PostCSS, provided by the open source community. If anything, this is a higher level set of features you could use to make up custom frameworks for your projects.
Install
Using NPM you can install the style pattern manager (spm
) command with the following command:
npm install -g stylep
If you do not have node
and npm
installed, go here to install, then repeat the last step.
Usage
You can get as many patterns in one command as you like.
# Install the button pattern!
spm install button
# or
spm i button
# or uninstall it
spm uninstall button
# or
spm u button
You can also get a filtered listing of patterns installed with spm list
or spm ls
.
Style Patterns
You can use our pre-defined style patterns listed below, or you can get started making your own with our style pattern template.
Containers
- :white_medium_square: card / example
- :arrow_down_small: dropdown / example
- :black_medium_square: modal / example
Form
Layout
- :left_right_arrow: alignment
In Development
- :small_red_triangle_down: accordion
- :large_blue_circle: badge
- :heavy_minus_sign: bar
- :ballot_box_with_check: checkbox
- :sparkles: chip
- :thought_balloon: example
- :signal_strength: grid
- :black_nib: input
- :memo: list
- :children_crossing: notification
- :art: palette
- :arrow_upper_right: positioning
- :radio_button: radio
- :three: select
- :bookmark_tabs: tabs
- :bread: toast
- :speech_balloon: tooltip
- :sunglasses: visibility