https://github.com/savvy-css/ember-savvy-css
An Ember addon for including Savvy CSS in an Ember project
https://github.com/savvy-css/ember-savvy-css
Last synced: over 1 year ago
JSON representation
An Ember addon for including Savvy CSS in an Ember project
- Host: GitHub
- URL: https://github.com/savvy-css/ember-savvy-css
- Owner: savvy-css
- License: mit
- Created: 2017-05-29T00:16:34.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-09T23:45:03.000Z (over 8 years ago)
- Last Synced: 2024-04-23T20:43:09.640Z (about 2 years ago)
- Language: JavaScript
- Size: 136 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ember-savvy-css
_An Ember addon for including Savvy CSS in an Ember project_.
[![Latest NPM release][npm-badge]][npm-badge-url]
[![CircleCI Build Status][circle-badge]][circle-badge-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]
[![License][license-badge]][license-badge-url]
[![Dependencies][dependencies-badge]][dependencies-badge-url]
[![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]
## Installation
```sh
ember install @savvy-css/ember-savvy-css
```
## Usage
### Generating Files
During installation, the addon will run its default blueprint (which can be run manually with `ember g ember-savvy-css`). The blueprint generates a `savvy-css/` directory within your project's `app/styles/` directory. This directory consists of files that organize imports of the modules comprising `savvy-css`:
#### _settings.css
This file contains all of the CSS Custom Properties provided by Savvy. You can override these properties with you own values by importing this file as the first thing in your application.
#### _core.css
This file contains Savvy's core -- its helper classes. Some of these will attempt to make use of Savvy variables (otherwise, they'll fallback on default values), so it's recommended to import this file after `_settings.css`.
### Importing Generated Files
After the default blueprint runs, all you need to do is import the generated files in your `app.css` file to make it a part of the styles that are processed by your app.
Here's our recommended setup:
```css
/* --------- app.css --------- */
/* Import Savvy CSS variables/settings */
@import "./savvy-css/_settings.css";
/* Import local variables/settings after Savvy settings */
@import "./_variables.css";
/* Import core Savvy CSS before local core CSS */
@import "./savvy-css/_core.css";
/* Organize the rest of your app's CSS from this point onward */
```
Currently, this setup assumes that your styles are being processed wth `ember-cli-postcss`, but more flexible options are being explored.
### Configuring your Build with PostCSS
PostCSS requires at least one plugin be defined. We're going to need a way to resolve paths of CSS `@import` rules anyway, so let's use [`postcss-import`](https://www.npmjs.com/package/postcss-import) as our first plugin. Here's what the PostCSS options should look like in `ember-cli-build.js`:
```js
// ember-cli-build.js
/* eslint-env node */
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const cssImport = require('postcss-import');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
postcssOptions: {
compile: {
enabled: true,
plugins: [
{ module: cssImport }
]
}
},
});
return app.toTree();
};
```
[npm-badge]: https://img.shields.io/npm/v/@savvy-css/ember-savvy-css.svg
[npm-badge-url]: https://www.npmjs.com/package/@savvy-css/ember-savvy-css
[circle-badge]: https://circleci.com/gh/savvy-css/ember-savvy-css/tree/master.svg?style=svg&circle-token={{CIRCLE_TOKEN}}
[circle-badge-url]: https://circleci.com/gh/savvy-css/ember-savvy-css/tree/master
[ember-observer-badge]: http://emberobserver.com/badges/ember-savvy-css.svg
[ember-observer-badge-url]: http://emberobserver.com/addons/ember-savvy-css
[license-badge]: https://img.shields.io/npm/l/@savvy-css/ember-savvy-css.svg
[license-badge-url]: ./LICENSE
[dependencies-badge]: https://img.shields.io/david/savvy-css/ember-savvy-css.svg
[dependencies-badge-url]: https://david-dm.org/savvy-css/ember-savvy-css
[devDependencies-badge]: https://img.shields.io/david/dev/savvy-css/ember-savvy-css.svg
[devDependencies-badge-url]: https://david-dm.org/savvy-css/ember-savvy-css#info=devDependencies