bootstrap-4-stylus

    1.0.7 • Public • Published

    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 = require('bootstrap-4-stylus');
     
    b4s.build(true);
     
    //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 = require('bootstrap-4-stylus');
    // build options
    var 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 change
    b4s.watch(options);
     
    /* default task. will compile bootstrap.css && bootstrap.min.css into ./dist folder
       this can be configured in /lib/config/index.json under "main" */
    b4s.init()
     
    // compile bootstrap.css into ./dist folder
    b4s.compile()
     
    // compile bootstrap.min.css into ./dist folder
    b4s.compress()
     
    // compile bootstrap.css.map into ./dist folder
    b4s.compileSourceMaps()
     
    // compile bootstrap.min.css.map into ./dist folder
    b4s.compressSourceMaps()
     
    // download bootstrap js files into ./dist/js folder
    b4s.getJs(options.js)
     
    // build bootstrap4-stylus for use in cwd
    // ~ note: This will write over any existing files, probably best to remove this.
    b4s.build(true);
     
    // check for updates
    b4s.versionCheck()
     
    // backup for windows users ~ .zip */
    b4s.backupWin(options.backup);
     
    // backup for linux/ windows with tar installed ~ .tar.gz
    b4s.backupLin(options.backup);
     

    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 = require('gulp'),
    b4s = require('bootstrap-4-stylus'),
    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
      }
    };
     
    function bs4Init(done) {
      b4s.init()
      done()
    }
     
    function bs4Compile(done) {
      b4s.compile()
      done()
    }
     
    function bs4Compress(done) {
      b4s.compress()
      done()
    }
     
    function bs4CompileSourceMaps(done) {
      b4s.compileSourceMaps()
      done()
    }
     
    function bs4CompressSourceMaps(done) {
      b4s.compressSourceMaps()
      done()
    }
     
    function bs4GetJs(done) {
      b4s.getJs(options.js)
      done()
    }
     
    function bs4VersionCheck(done) {
      b4s.versionCheck()
      done()
    }
     
    function bs4Build(done) {
      b4s.build(true)
      done()
    }
     
    function bs4Watch(done) {
      b4s.watch(options)
      done()
    }
     
    function bs4BackupLin(done) {
      b4s.backupLin(options.backup)
      done()
    }
     
    function bs4BackupLin(done) {
      b4s.backupWin(options.backup)
      done()
    }
     
     
    exports.bs4Init = bs4Init;
    exports.bs4Compile = bs4Compile;
    exports.bs4Compress = bs4Compress;
    exports.bs4CompileSourceMaps = bs4CompileSourceMaps;
    exports.bs4CompressSourceMaps = bs4CompressSourceMaps;
    exports.bs4GetJs = bs4GetJs;
    exports.bs4VersionCheck = bs4VersionCheck;
    exports.bs4Build = bs4Build;
    exports.bs4Watch = bs4Watch;
    exports.bs4BackupLin = bs4BackupLin;
    exports.bs4backupWin = bs4BackupWin;
    exports.default = 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:

    [
        "./dist/bootstrap.css",
        "./dist/bootstrap.min.css"
    ]

    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
    {
      "main":{
        "compile":{
          "enable":true,
          "command":"-o ./dist"
        },
        "compress":{
          "enable":true,
          "command":"-c -o ./dist/bootstrap.min.css"
        },
        "compileSourceMaps":{
          "enable":false,
          "command":"-m -o ./dist"
        },
        "compressSourceMaps":{
          "enable":false,
          "command":"-c -m -o ./dist/bootstrap.min.css"
        }
      },
      "options":{
        "compile":true,
        "compress":true,
        "compileSourceMaps":false,
        "compressSourceMaps":false,
        "toWatch":[
          "./bootstrap.styl",
          "./includes.styl",
          "./includes",
          "./includes/helpers"
        ]
      }
    }

    default stylus command

    open a console and type:

    // compile bootstrap.css to ./dist folder
    $ stylus bootstrap.styl -./dist
     
    // compile and compress bootstrap.min.css to ./dist folder
    $ stylus bootstrap.styl --./dist/bootstrap.min.css
     
    // compile bootstrap.css to ./dist folder with sourceMap
    $ stylus bootstrap.styl --./dist
     
    // compile and compress bootstrap.min.css to ./dist folder with sourceMap
    $ stylus bootstrap.styl ---./dist/bootstrap.min.css
     

    windows users

    double click the ./app.bat file for an interactive task runner command line app.

    done.

    Install

    npm i bootstrap-4-stylus

    DownloadsWeekly Downloads

    199

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    194 kB

    Total Files

    91

    Last publish

    Collaborators

    • angeal185