Generate interactive Specificity Graphs for your CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin functional node module, added instructions in readme Feb 28, 2015
img Added one line summary of what graph means Nov 8, 2014
lib
template cli tool: embed generated jsonData into template Feb 22, 2015
test
.gitignore update gitignore Nov 23, 2014
.travis.yml
LICENSE-MIT add license Nov 8, 2014
README.md rm Changelog from readme Jul 18, 2015
example.js cli tool: embed generated jsonData into template Feb 22, 2015
package.json 0.1.7 Apr 16, 2016
specificity-graph-standalone.js Build specificity-graph-standalone - fix #14 Feb 22, 2015
style.min.css add option for launching browser with generated chart Feb 22, 2015
test.css

README.md

Specificity Graph (for CSS)

NPM version Build Status

Idea by Harry Roberts

The generated graph Generate an interactive line graph showing the specificity in your stylesheet. Uses d3, css-parser, and specificity.

Installation

npm install specificity-graph

Usage

specifity-graph can be used in different ways:

CLI

specificity-graph <cssFile> [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 <script src="specificity-graph-standalone.js"></script>, 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 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'