stylus-spectre
stylus port of spectre.css
Installation
Ensure stylus is installed globally
$ npm install stylus -g
info
A complete, fully functional and unaltered convert of spectre.css to stylus.
No learning curve and no repeats. build it how you want it or just use it as an easy way to exclude unused css.
spectre.css has been converted, broken down into smaller .styl
includes and the include files are named accordingly.
npm
$ npm install stylus-spectre --save-dev
stylus-spectre can be used in the following ways when required as a module
build stylus-spectre
create a empty file and execute the following:
/* ./stylus-spectre.js */const specStyl = ; specStyl //build stylus-spectre for use in cwd// ~ note: repeating this command will write over any existing files.
your setup will be:
├─spectre.styl├─stylus-spectre.js├─gulpfile.js├───dev│ └───variables.styl └───includes│ └───icons│ └───mixins│ └───utilities├───dist
./stylus-spectre.js
contains a complete list of build functions.- Build variables can be edited via the
./dev/variables.styl
file. - include ans sub include options can be edited in the in the
./dev/variables.styl
file. ./dist
is where your compiled spectre files will be saved
API
// ./stylus-spectre.js const specStyl = ; // list of files/folders to watchlet options = compile:true // options on detect change compress:true compileSourceMaps:true compressSourceMaps:true toWatch: // list of files/folders to watch "./spectre.styl" "./dev" "./dev/includes" "./dev/includes/icons" "./dev/includes/mixins" "./dev/includes/utilities" backup: // files/dirs for backup "./spectre.styl" "./dev" /* start livewatch and compile to ./dist folder on change */specStyl; /* compile spectre.Styl into ./dist folder */specStyl /* compile spectre.min.styl into ./dist folder */specStyl /* compile spectre.styl.map into ./dist folder */specStyl /* compile spectre.min.styl.map into ./dist folder */specStyl /* check for updates */specStyl /* backup for linux/ windows with mingw ~ .tar.gz */ specStyl;
gulp API
v4
$ npm install gulp --save-dev
all of the functions included in the ./stylus-spectre.js
file can be called using gulp like so:
//gulpfile.jsconst gulp = specStyl = ; // list of files/folders to watchlet options = compile:true // options on detect change compress:true compileSourceMaps:false compressSourceMaps:false toWatch: // list of files/folders to watch "./spectre.styl" "./dev" "./dev/includes" "./dev/includes/icons" "./dev/includes/mixins" "./dev/includes/utilities" backup: // files/dirs for backup "./spectre.styl" "./dev" { specStyl } { specStyl } { specStyl } { specStyl } { specStyl } { specStyl } { specStyl } { specStyl } //exportsexportsspecStylCompile = specStylCompile;exportsspecStylCompress = specStylCompress;exportsspecStylCompileSourceMaps = specStylCompileSourceMaps;exportsspecStylCompressSourceMaps = specStylCompressSourceMaps;exportsspecStylVersionCheck = specStylVersionCheck;exportsspecStylBuild = specStylBuild;exportsspecStylWatch = specStylWatch;exportsspecStylBackup = specStylBackup;exportsdefault = specStylWatch
bower
bower:
$ bower install stylus-spectre --save-dev
your setup will be:
├─spectre.styl├─stylus-spectre.js├─gulpfile.js├───dev│ └───variables.styl └───includes│ └───icons│ └───mixins│ └───utilities├───dist├───bin├───example
you can simply copy the gulpfile.js
&& stylus-spectre.js
from the examples folder into your cwd and use them in the same manner as the other methods.
npm commands
open a console and type:
// compile spectre.css to ./dist folder$ npm run compile // compile and compress spectre.min.css to ./dist folder$ npm run compress // compile spectre.css to ./dist folder with sourceMap$ npm run compileM // compile and compress spectre.min.css to ./dist folder with sourceMap$ npm run compressM
default stylus command
open a console and type:
// compile spectre.css to ./dist folder$ stylus spectrestyl -o /dist // compile and compress spectre.min.css to ./dist folder$ stylus spectrestyl -c -o /dist/spectremincss // compile spectre.css to ./dist folder with sourceMap$ stylus spectrestyl -m -o /dist // compile and compress spectre.min.css to ./dist folder with sourceMap$ stylus spectrestyl -c -m -o /dist/spectremincss
windows users
batch files can be executed from the bin folder for all compile methods
config
The default app options can be configured in /lib/config/index.json
.
done.