Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
loup-brun committed May 6, 2017
1 parent 7152755 commit f7703b8
Showing 1 changed file with 26 additions and 1 deletion.
27 changes: 26 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,32 @@

A collection of CSS buttons.

## About this project

My goal was to create a variety of stylish buttons for the web, using minimal markup while taking advantage of the HTML5/CSS3 technologies.

In short, buttons should never be dull!
The collection includes 26 different button styles.

Each style has been generated via a component-based system, using [SASS](http://sass-lang.com/) (a CSS preprocessor). The process is designed to make it easy and simple to create a new set of button styles in a modular fashion.

Ultimately, the **markup** is the same for each set of button style:

```html
<button class="btn btn-primary">Button</button>
```

where class `.btn` is the generic component class and `.btn-primary` is the style-specific class.

Leveraging the power of SASS [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), each style is generated simply by taking a color as an input. For the `alpha` style, it looks like this:

```scss
// Assuming the color variable has been declared, like so:
// $color-primary: #7AD84E
.btn-primary { @include btn-alpha($color-primary); }
```

## Final thoughts

Like any bit of UI, buttons should never be dull. Attention to detail is key in a design with sensibiilty.

Say hello, share your ideas or send me your thoughts to `louis` at `loupbrun` dot `ca`.

0 comments on commit f7703b8

Please sign in to comment.