bc

bootstrap-config

NPM module to create variables.less from Bootstrap's config.json

Showing:

Popularity

Downloads/wk

3

GitHub Stars

0

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

bootstrap-config

NPM module to create variables.less from Bootstrap's config.json

Having customised your own build of Bootstrap (via http://getbootstrap.com/customize/) and downloaded the results in bootstrap.zip, you will now have a file called config.json from which you can return to the Bootstrap website to continue customisation.

The config.json file contains variable names and values in JSON format rather than Less format, which you might need for writing your own Less files. The aim of this module is to convert config.json to variables.less in order to allow you to '@import "variables.less";' in your own less code.

There are other Bootstrap configuration modules available from npm (https://www.npmjs.com/), but none of them produce any Less products, all skipping to the compiled CSS.

Information

Packagebootstrap-config
Description Create variables.less from Bootstrap's config.json
Bootstrap Version Tested with v3.3.7
Node Version Tested with v6.9.2

Installation

npm install --save bootstrap-config

Optional, from the installation directory 'node_modules/bootstrap-config':

npm test

This will create test/variables.less from test/config.json to demonstrate the installation has worked. No checking of variables.less is provided at this time.

Basic Usage

var bootstrapConfig = require('bootstrap-config');
bootstrapConfig('./config.json', './variables.less');

Usage within Gulp, testing for file updates:

var bootstrapConfig = require('bootstrap-config');
var fs = require('fs');
var gulp = require('gulp');

function isExists(file) {
  fs.stat(file, function(err, stat) {
    if (err == null) {
        return true;
    } else {
        return false;
    }
  });  
}

function isFileNewer(src, dest) {
  var srcMtime = (new Date(util.inspect(fs.statSync(src).mtime))).getTime();
  if (!isExists(dest)) {
    /* Remake this target as dest is absent */
    return true;
  } else {
    var destMtime = (new Date(util.inspect(fs.statSync(dest).mtime))).getTime();
    return (srcMtime > destMtime);
  }
}

gulp.task('bootstrapVariables', function (done) {
  var src = 'dev-files/bootstrap/config.json';
  var dest = 'dev-files/bootstrap/variables.less';
  if (isFileNewer(src, dest)) {
    bootstrapConfig(src, dest);
    console.log("bootstrap-config: Updated Bootstrap variables.");
  };
  done();
});

Project Less Usage

@import "myProject/variables.less";

// Fundamental Values
@space-top: 20px;
@space-bottom: 0px;
@footer-height: 40px;
@navbar-tiny-wrap: 334px;

// Derived Values
@navbar-two-row-height: (2 * @navbar-height) + @space-top; // 120px
@navbar-one-row-height: @navbar-height + @space-top; // 70px

body {
  padding-top: @navbar-height + @space-top;
  padding-bottom: @footer-height + @space-bottom;
}

/* Fix body spacing for "Small devices" when the menu bar wraps to 2 lines */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  body {
    padding-top: @navbar-two-row-height;
  }
}

/* Fix body spacing for Ultra Small devices when the menu bar wraps to 2 lines */
@media (max-width: @navbar-tiny-wrap) {
  body {
    padding-top: @navbar-two-row-height;
  }
}

Options

None.

License

MIT License, see https://github.com/philipabbey/bootstrap-config/blob/master/LICENSE

  1. This code is based almost entirely on work by Thomas Alexander under 'bootstrap-config-to-variable-master', https://github.com/tomalex0/bootstrap-config-to-variable

  2. NPM module gulp-bootstrap-configurator, https://www.npmjs.com/package/gulp-bootstrap-configurator

  3. NPM module bootstrap, https://www.npmjs.com/package/bootstrap

  4. Bootstrap, http://getbootstrap.com/

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100