Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make this library (SASS source) extensible. #156

Merged
merged 2 commits into from
Mar 11, 2016
Merged

Make this library (SASS source) extensible. #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f635545
Make this library (SASS source) extensible.
bunomonteiro Feb 7, 2016
84a1618
Updating the docs: including extensible mixins
bunomonteiro Feb 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ If you use custom naming in your CSS architecture, you can add the `.scss` files

1. [Download the `scss/` folder contents](https://github.com/una/CSSgram/tree/master/source/scss)
* Include a link to `scss/cssgram.scss` via an `@import` statement in your Sass manifest file (i.e. `main.scss`). It may look like: `@import 'vendor/cssgram'`
* Extend the placeholder selector (e.g. `@extend %aden`) in your element.
* Extend the placeholder selector (e.g. `@extend %aden` or using mixins `@include aden()`) in your element.

For example:

Expand All @@ -92,12 +92,28 @@ For example:
}
```

or using mixins (more flexible)

```
// Sass (without adding new CSS3 filters)
.viz--beautiful {
@include aden();
}

// Sass (adding new CSS3 filters)
.viz--beautiful {
@include aden(blur(2px) /*...*/);
}
```

Alternatively, you can just download and link any individual `.scss` file in your Sass manifest (i.e. `scss/aden.scss`), if you're just using one of the styles.

### Available Placeholders

_For use in Sass stylesheets:_

**Extends**

* Aden: `@extend %aden`
* Reyes: `@extend %reyes`
* Perpetua: `@extend %perpetua`
Expand All @@ -117,6 +133,27 @@ _For use in Sass stylesheets:_
* Clarendon: `@extend %clarendon`
* Willow: `@extend %willow`

**Mixins** (You can add more CSS3 filters as arguments)

* Aden: `@include aden()`
* Reyes: `@include reyes()`
* Perpetua: `@include perpetua()`
* Inkwell: `@include inkwell()`
* Toaster: `@include toaster()`
* Walden: `@include walden()`
* Hudson: `@include hudson()`
* Gingham: `@include gingham()`
* Mayfair: `@include mayfair()`
* Lo-fi: `@include lofi()`
* X-Pro II: `@include xpro2()`
* 1977: `@include _1977()`
* Brooklyn: `@include brooklyn()`
* Nashville: `@include nashville()`
* Lark: `@include lark()`
* Moon: `@include moon()`
* Clarendon: `@include clarendon()`
* Willow: `@include willow()`

## Contributing

Either:
Expand Down Expand Up @@ -165,4 +202,4 @@ Filters are really fun to create! Reference photos created by [Miles Croxford](h
- `site/` is the public facing website
- `site/test` is how you test filters if you're developing, remember to change `is_done` for the filter you're creating in `site/filters.json`.

Note: this will also have mixin options and a PostCSS Component.
Note: this will also have mixin options and a PostCSS Component.
Loading