uselesscss

    0.0.13 • Public • Published

    uselesscss Build Status

    Trim bloat from your CSS by only including rules that will actually be active.

    The goal behind this project is to speed up websites and make for cleaner resulting code by only including what you need. A perfect use case, for example, would be if you were using a large framework, like Bootstrap, in combination with a static site generator, like Jekyll.

    Install/Run

    npm install uselesscss # you can add -g for a global install, available from the command line 

    Usage

    You can use uselesscss through the command line interface or as a library

    Command line interface

    usage:
      uselesscss [options] <html> ([-] | [<css>])
     
    options:
      -h --help  Show this message
      --version  Print version

    Where <html> and <css> are local paths to their respective files. Also, you can supply - instead of a <css>, to pass in STDIN or pipe in output from another program.

    To save the resulting output, redirect it to a file. E.g.

    ./bin/uselesscss ~/index.html ~/Developer/my-site/big.css > ~/small.useless.css

    The pipe syntax (i.e. -) is useful when used with a build pipeline or want to pass in a remote file. E.g.

    curl -L https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css | ./bin/uselesscss ~/index.html - > bootstrap.useless.css

    Library

    var Useless = require('uselesscss')
    var reducedCss = Useless(html, css)

    Where html and css are strings.

    Example results

    The following examples can be found in the example section of this project. They can be generated easily by running

    ./bin/uselesscss example/foundation/kitchen_sink.html example/foundation/css/docs.css > example/foundation/css/docs.useless.css
    ./bin/uselesscss example/bootstrap/bootswatch.html example/bootstrap/css/bootstrap.css > example/bootstrap/css/bootstrap.useless.css

    The resulting output is as follows:

    Framework HTML Original CSS New CSS Original size New size % reduction
    Foundation kitchen_sink.html docs.css docs.useless.css 288KB 84KB 70%
    Bootstrap bootswatch.html bootstrap.css bootstrap.useless.css 146KB 48KB 67%

    The above examples were chosen because their original intent is to demonstrate the full capabilities of their respective frameworks. Still, we see pretty good file size reductions. For more realistic projects, such as my personal site, which make much more sparse use of such frameworks, the reduction is closer to 97%!

    Install

    npm i uselesscss

    DownloadsWeekly Downloads

    0

    Version

    0.0.13

    License

    MIT

    Last publish

    Collaborators

    • asimpletune