https://github.com/pocketjoso/specificity-graph
Generate interactive Specificity Graphs for your CSS
https://github.com/pocketjoso/specificity-graph
Last synced: 10 months ago
JSON representation
Generate interactive Specificity Graphs for your CSS
- Host: GitHub
- URL: https://github.com/pocketjoso/specificity-graph
- Owner: pocketjoso
- License: mit
- Created: 2014-11-08T16:49:50.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-04-16T07:22:03.000Z (almost 10 years ago)
- Last Synced: 2025-04-13T04:59:25.935Z (10 months ago)
- Language: JavaScript
- Homepage: https://jonassebastianohlsson.com/specificity-graph/
- Size: 518 KB
- Stars: 701
- Watchers: 22
- Forks: 35
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
- fucking-static-analysis - Specificity Graph
- static-analysis - Specificity Graph
README
# Specificity Graph (for CSS)
[](http://badge.fury.io/js/specificity-graph)
[](https://travis-ci.org/pocketjoso/specificity-graph)
Idea by [Harry Roberts](http://csswizardry.com/2014/10/the-specificity-graph/)
Generate an interactive line graph showing the specificity in your stylesheet. Uses [d3](https://github.com/mbostock/d3), [css-parser](https://github.com/reworkcss/css-parse), and [specificity](https://github.com/keeganstreet/specificity).
## Installation
`npm install specificity-graph`
## Usage
`specifity-graph` can be used in different ways:
* [CLI](#cli)
* [Node module](#node-module)
* [Via JavaScript](#via-javascript)
* [Online](http://jonassebastianohlsson.com/specificity-graph/)
### CLI
`specificity-graph [options]`
Creates a directory containing
* `json` file with specificity data for your CSS
* `html` file with interactive specificity graph for CSS
* necessary JS files to run graph
#### Options
| Flag | Description
| ---------------- | ------------- |
| -o --output | name for generated directory (default: `specificity-graph`) |
| -b --browser | auto launch browser to view generated chart |
| -h --help | Help |
### Node module
```
var specificityGraph = require('specificity-graph');
specificityGraph(directory, css, function(directory){
console.log('specificity-graph files created in ' + directory);
});
```
### Via JavaScript
First get the `specificityGraph` accessible in your code:
#### Using Browserify (or similar)
Just `require('specificity-graph')`.
#### Standalone (no module loader)
Add ``,
this will expose `specificityGraph` as a global variable.
#### Methods
* `specificityGraph.create(css, options)`
* `specificityGraph.createFromData(specificityData, options)`,
* `specificityGraph.update(css)`
##### Options
| Name | Description
| ---------------- | ------------- |
| css | String with css to generate specificity graph for |
| specificityData | JSON object with css specificity data. [CLI](#CLI) write a JSON in this format, as does the `lib/lineChart`'s create function' |
###### Create options
| Create option name | Description
| -------------------- | ------------- |
| svgSelector | Selector for `svg` element to draw specificity graph inside. Defaults to `.js-graph`. |
| width | default `1000`. You should set a viewBox value on the SVG element to match `width` and `height`, f.e. `viewbox='0 0 1000 4000'`. |
| height | default `400` |
| showTicks | `Boolean`. Show scale and ticks. Default `false`. |
| xProp | (possible values: `'selectorIndex'`, `'line'`). What to base the x dimension, 'location in stylesheet' in graph on: index of selector in CSS, or line number for selector in CSS. Default `'selectorIndex'`. |
| yProp | default `'specificity'` |