Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
img
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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'

About

Generate interactive Specificity Graphs for your CSS

Resources

License

Packages

No packages published

Languages