Comparing version 1.1.0 to 1.3.0
{ | ||
"name": "csstyle", | ||
"version": "1.1.0", | ||
"version": "1.3.0", | ||
"description": "clean, simple styling for styling the web.", | ||
@@ -8,6 +8,13 @@ "directories": { | ||
}, | ||
"dependencies": {}, | ||
"dependencies": { | ||
"lodash": "^3.2.0" | ||
}, | ||
"devDependencies": { | ||
"specificity": "~0.1.4", | ||
"shelljs": "~0.3.0" | ||
"fs-extra": "^0.16.3", | ||
"glob": "^4.3.5", | ||
"postcss": "^4.0.4", | ||
"postcss-nested": "^0.2.1", | ||
"postcss-simple-vars": "^0.2.3", | ||
"shelljs": "~0.3.0", | ||
"specificity": "~0.1.4" | ||
}, | ||
@@ -14,0 +21,0 @@ "scripts": { |
@@ -8,5 +8,6 @@ # [csstyle](http://csstyle.io) | ||
You can use csstyle with either [Sass](http://sass-lang.com/) or [postcss](https://github.com/postcss/postcss). | ||
## Getting Started | ||
1. make sure you have the latest stable SASS (3.4). | ||
1. Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4). | ||
@@ -16,15 +17,54 @@ 2. Add `id="csstyle"` to your html or body element. This is necessary so that components with their | ||
3. Download the csstyle mixins and `@import` them into your sass file. | ||
3. Download csstyle from npm: | ||
``` | ||
npm install csstyle --save | ||
``` | ||
or from bower: | ||
``` | ||
bower install csstyle --save | ||
``` | ||
4. If you're using Sass, import into your stylesheets: | ||
```scss | ||
@import 'csstyle'; | ||
``` | ||
npm install csstyle | ||
If you're using postcss, add csstyle as a plugin: | ||
```js | ||
postcss([require('postcss-nested'), require('../csstyle')]); | ||
``` | ||
Be sure to include postcss-nested and csstyle in that order. | ||
Now you can start creating components with options & parts, adding in tweaks and locations as needed. | ||
Now you're set and can start creating components with options & parts, adding in tweaks and locations as needed. Enjoy! | ||
## FAQ | ||
## Running the Unit Tests | ||
`npm install -g jasmine-node` | ||
`npm test` | ||
### Can I use this with Libsass? | ||
People using webpack or similar often want to load Sass via libsass. | ||
Unfortunately libsass is quite behind the ruby Sass and some things are [still missingl](https://sass-compatibility.github.io/) | ||
before it will work with csstyle. As a workaround while we wait for libsass you | ||
can load your Sass files with the [ruby Sass loader](https://github.com/ddelbondio/ruby-sass-loader) and it will work just fine, it just | ||
won't be as fast as libsass. | ||
### How do parts react to component states like hover? | ||
In Sass you can append a `&` to a selector or pseudo-selector to have it applied to the parent context. So for example to have a `part` react when the `component` gets hovered: | ||
```scss | ||
@include component(capacitor){ | ||
background: red; | ||
@include part(flux){ | ||
background: orange; | ||
:hover & { | ||
background: blue; | ||
} | ||
} | ||
} | ||
``` | ||
### Can I configure the styling convention? | ||
You can configure which symbol is used to denote `parts` by changing the `$csstyle-part-symbol` variable. The default is `__` but you can set it to `-` or whatever suits your style. | ||
## License | ||
@@ -34,3 +74,2 @@ MIT | ||
## TODO | ||
- ship mixins as gem | ||
- support stylus, rework, and less once API is solid | ||
- make postcss version configurable too |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
252029
74
101
73
0
1
7
+ Addedlodash@^3.2.0
+ Addedlodash@3.10.1(transitive)