Skip to content

Commit

Permalink
feature(documentation): cleanup of pod mentions
Browse files Browse the repository at this point in the history
Update to clean up mentioning of pods now that classic support is available.
  • Loading branch information
webark authored Feb 3, 2017
1 parent 7293527 commit ed81227
Showing 1 changed file with 9 additions and 6 deletions.
15 changes: 9 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ember-component-css [![Build Status](https://travis-ci.org/ebryn/ember-component-css.svg?branch=master)](https://travis-ci.org/ebryn/ember-component-css) [![Ember Observer Score](https://emberobserver.com/badges/ember-component-css.svg)](https://emberobserver.com/addons/ember-component-css)

An Ember CLI addon which allows you to specify a component-specific style sheet in an app, addon, engine, or in-repo addon.
An Ember CLI addon which allows you to specify component-specific style sheets in an app, addon, engine, or in-repo addon.

Contributions are welcome! Feel free to open up a pull request or issue, and join the [#e-component-css](https://embercommunity.slack.com/messages/e-component-css/) channel in the [Ember Slack community](https://ember-community-slackin.herokuapp.com/) if you have further questions, concerns, or ideas. Thanks! :smile:

Expand All @@ -9,13 +9,12 @@ Contributions are welcome! Feel free to open up a pull request or issue, and joi

`ember install ember-component-css`

## Usage with pod structure
## Usage

This addon allows you to specify a style sheet inside of a component's pod folder.
Rules defined in the style-sheets will automatically be namespaced with an autogenerated class. That autogenerated class will also be injected into your component's `classNames` property. This enables you to worry less about rules clashing across component styles.

Rules defined in the style-sheet will automatically be namespaced with an autogenerated class. That autogenerated class will also be injected into your component's `classNames` property. This enables you to worry less about rules clashing across component styles.

For example, given this `app/my-component/styles.scss` file:
For example, given this `app/my-component/styles.scss` file for 'pods',
or this `app/styles/component-styles/my-component.scss` file for 'classic':

```scss
& { // ampersand refers to the component itself (parent selector)
Expand Down Expand Up @@ -80,6 +79,10 @@ And that is it! The `pod-styles` file is generated during the build and will the

Note: If you are using more than one type of component style files (ie a .less file and a .scss file) then you will need to add the extension to the @import. Otherwise the extension can be left off.

### Usage with pods structure

To use this with pods, you just need to include a style file in your component pods directory alongside your `template.hbs` or `component.js` files.

### Usage with classic (non pod) structure

You can use classic Ember app structure by placing component styles in
Expand Down

0 comments on commit ed81227

Please sign in to comment.