stylep v1.1.0

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

• :white_square_button: button / example
• :hamburger: menu-icon / example

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