bootstrap-4-stylus
stylus port of bootstrap.css v4
Installation
Ensure stylus is installed globally
$ npm install stylus -g
info
A complete, fully functional and unaltered convert of bootstrap.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.
bootstrap.css has been converted, broken down into smaller .styl
includes and the include files are named accordingly. within these include files are smaller sub-includes that can also be excluded.
npm
$ npm install bootstrap-4-stylus --save-dev
bootstrap-4-stylus can be used in the following ways when required as a module
build bootstrap-4-stylus
/* ./index.js */const b4s = ; b4s; //build bootstrap4-stylus for use in cwd//true = clone a copy into your cwd and automatically update rout strings.//false = for use of the `./node_modules/bootstrap-4-stylus` module directly// ~ note: This will write over any existing files.
if you chose true
your setup will be:
├─bootstrap.styl├─bs4.js├───dev│ └───bootstrap-4-stylus│ └───includes.styl│ └───includes/*.styl│ └───helpers/*.styl├───dist
./bs4.js
contains a complete list of build functions.- Build variables can be edited via the
./bootstrap.styl
file. - include options can be edited in the in the
./dev/bootstrap-4-stylus/includes.styl
file as booleans ~ true/false. - include files are located at
./dev/bootstrap-4-stylus/includes/**/*.styl
./dist
is where your compiled bootstrap files will be saved- your baseDir within your files will automatically be updated to
./dev/bootstrap-4-stylus/
if you chose false
your setup will be:
├─bootstrap.styl├─bs4.js├───dist
- your baseDir within your files will remain as
./node_modules/bootstrap-4-stylus/
API
// ./bs4.js const b4s = ;// build optionsvar options = // watch options compile:true //compile bootstrap.css on change compress:true //compile bootstrap.min.css on change compileSourceMaps:false //compile bootstrap.css.map on change compressSourceMaps:false //compile bootstrap.min.css.map on change // files/folders to watch toWatch: "./bootstrap.styl" "./dev/bootstrap-4-stylus/includes" "./dev/bootstrap-4-stylus/includes.styl" "./dev/bootstrap-4-stylus/includes/helpers" //bootstrap.js options ~ saved to ./dist/js js: // requires internet connection "bootstrap": true //get bootstrap.js and verify hash "bootstrapMin": false //get bootstrap.min.js and verify hash "bootstrapMap": false //get bootstrap.js.map and verify hash "bootstrapMinMap": false //get bootstrap.min.js.map and verify hash backup: // files/dirs for backup "./bootstrap.styl" "./dev/bootstrap-4-stylus" // start livewatch and compile to ./dist folder on changeb4s; /* default task. will compile bootstrap.css && bootstrap.min.css into ./dist folder this can be configured in /lib/config/index.json under "main" */b4s // compile bootstrap.css into ./dist folderb4s // compile bootstrap.min.css into ./dist folderb4s // compile bootstrap.css.map into ./dist folderb4s // compile bootstrap.min.css.map into ./dist folderb4s // download bootstrap js files into ./dist/js folderb4s // build bootstrap4-stylus for use in cwd// ~ note: This will write over any existing files, probably best to remove this.b4s; // check for updatesb4s // backup for windows users ~ .zip */b4s; // backup for linux/ windows with tar installed ~ .tar.gzb4s;
gulp API
v4
$ npm install gulp --save-dev
all of the functions included in the ./bs4.js
file can be called using gulp like so:
const gulp = b4s = options = compile:true compress:true compileSourceMaps:false compressSourceMaps:false toWatch: "./bootstrap.styl" "./dev/bootstrap-4-stylus/includes" "./dev/bootstrap-4-stylus/includes.styl" "./dev/bootstrap-4-stylus/includes/helpers" js: "bootstrap": true "bootstrapMin": true "bootstrapMap": true "bootstrapMinMap": true ; { b4s } { b4s } { b4s } { b4s } { b4s } { b4s } { b4s } { b4s } { b4s } { b4s } { b4s } exportsbs4Init = bs4Init;exportsbs4Compile = bs4Compile;exportsbs4Compress = bs4Compress;exportsbs4CompileSourceMaps = bs4CompileSourceMaps;exportsbs4CompressSourceMaps = bs4CompressSourceMaps;exportsbs4GetJs = bs4GetJs;exportsbs4VersionCheck = bs4VersionCheck;exportsbs4Build = bs4Build;exportsbs4Watch = bs4Watch;exportsbs4BackupLin = bs4BackupLin;exportsbs4backupWin = bs4BackupWin;exportsdefault = bs4Watch
- An example gulpfile.js can be found at
/examples/gulpfile.js
bower
bower:
$ bower install bootstrap-4-stylus --save-dev
your setup will be:
├─bootstrap.styl├─includes.styl├─index.js├─app.bat├───cmd├───dist├───example └───main.js*├───includes └───helpers
$ node index.js
will by default compile:
The file ./example.main.js
has a complete list of functions available to you. simply move this file into the base dir ./
and you will have the same functionallity as the npm users.
$ node main.js
- as with the npm users, you also have access to all the other functions and gulp usage.
- The default app options can be configured in
/lib/config/index.json
default stylus command
open a console and type:
// compile bootstrap.css to ./dist folder$ stylus bootstrapstyl -o /dist // compile and compress bootstrap.min.css to ./dist folder$ stylus bootstrapstyl -c -o /dist/bootstrapmincss // compile bootstrap.css to ./dist folder with sourceMap$ stylus bootstrapstyl -m -o /dist // compile and compress bootstrap.min.css to ./dist folder with sourceMap$ stylus bootstrapstyl -c -m -o /dist/bootstrapmincss
windows users
double click the ./app.bat
file for an interactive task runner command line app.
done.