Code Monkey home page Code Monkey logo

bootstrap3-less's Introduction

Bootstrap 3 with Less

NOTE: This package was good for Meteor 0.6.x-0.8.x and with changes in Meteor 0.9.x+ the method this package uses isn't working anymore.

nemo64:bootstrap less is the package you'll want to have in the future. It goes around the limitations and is configurable in a totally new level compared to this package.


Bootstrap 3.2.0, with all Less files for easy style customization for Meteor 0.8.x.

How to install

  1. npm install -g meteorite (if not already installed)
  2. mrt add less
  3. mrt add bootstrap3-less
  4. Create a .less file anywhere in your project to be served to the client and add @import "/packages/bootstrap3-less/bootstrap.import.less";
  5. Load the optional Bootstrap theme for a visually enhanced experience by adding @import "/packages/bootstrap3-less/lib/less/theme.import.less";

Customized Usage

You can copy the bootstrap.import.less file into your project and overwrite the variables like this:

// Application Overrides (config)
// ---------------------------------------
// (Here you can override any variables defined in the default set above)

@brand-primary: #FF69B4; // needs a fabulous color ;)

Then you need to rename it into bootstrap.less and you can start using your custom build.

Advanced Usage

Moreover you can take advantage of the mixins that bootstrap provides if you put 2 files into your project.

Create one variables.import.less file which should only contain variables and mixins so you can import it into every file of you project for easy access.

// Defines where the package is
@bootstrap3-less-root: "/packages/bootstrap3-less";

// Import Bootstrap core variables and mixin
// ---------------------------------------
// (you need these first, to get the default setup for bootstrap)

@import "@{bootstrap3-less-root}/lib/less/variables.import.less";
@import "@{bootstrap3-less-root}/lib/less/mixins.import.less";

// Application Overrides (config)
// ---------------------------------------
// (Here you can override any variables defined in the default set above)

@icon-font-path: "@{bootstrap3-less-root}/lib/fonts/";

To include the rest of Bootstrap, create a bootstrap.less file where you @import all files that actually contain the styles. You may remove or comment out lines that you don't need to save bandwidth and performance.

@import "variables.import.less";

// Because of the order less handles it's imports this variable needs to be redefined
@bootstrap3-less-root: "/packages/bootstrap3-less";

// Import Bootstrap
// ---------------------------------------
// (This is the full set of package files, include only what you need)

// Reset and dependencies
@import "@{bootstrap3-less-root}/lib/less/normalize.import.less";
@import "@{bootstrap3-less-root}/lib/less/print.import.less";
@import "@{bootstrap3-less-root}/lib/less/glyphicons.import.less";

// Core CSS
@import "@{bootstrap3-less-root}/lib/less/scaffolding.import.less";
@import "@{bootstrap3-less-root}/lib/less/type.import.less";
@import "@{bootstrap3-less-root}/lib/less/code.import.less";
@import "@{bootstrap3-less-root}/lib/less/grid.import.less";
@import "@{bootstrap3-less-root}/lib/less/tables.import.less";
@import "@{bootstrap3-less-root}/lib/less/forms.import.less";
@import "@{bootstrap3-less-root}/lib/less/buttons.import.less";

// Components
@import "@{bootstrap3-less-root}/lib/less/component-animations.import.less";
@import "@{bootstrap3-less-root}/lib/less/dropdowns.import.less";
@import "@{bootstrap3-less-root}/lib/less/button-groups.import.less";
@import "@{bootstrap3-less-root}/lib/less/input-groups.import.less";
@import "@{bootstrap3-less-root}/lib/less/navs.import.less";
@import "@{bootstrap3-less-root}/lib/less/navbar.import.less";
@import "@{bootstrap3-less-root}/lib/less/breadcrumbs.import.less";
@import "@{bootstrap3-less-root}/lib/less/pagination.import.less";
@import "@{bootstrap3-less-root}/lib/less/pager.import.less";
@import "@{bootstrap3-less-root}/lib/less/labels.import.less";
@import "@{bootstrap3-less-root}/lib/less/badges.import.less";
@import "@{bootstrap3-less-root}/lib/less/jumbotron.import.less";
@import "@{bootstrap3-less-root}/lib/less/thumbnails.import.less";
@import "@{bootstrap3-less-root}/lib/less/alerts.import.less";
@import "@{bootstrap3-less-root}/lib/less/progress-bars.import.less";
@import "@{bootstrap3-less-root}/lib/less/media.import.less";
@import "@{bootstrap3-less-root}/lib/less/list-group.import.less";
@import "@{bootstrap3-less-root}/lib/less/panels.import.less";
@import "@{bootstrap3-less-root}/lib/less/responsive-embed.import.less";
@import "@{bootstrap3-less-root}/lib/less/wells.import.less";
@import "@{bootstrap3-less-root}/lib/less/close.import.less";

// Components w/ JavaScript
@import "@{bootstrap3-less-root}/lib/less/modals.import.less";
@import "@{bootstrap3-less-root}/lib/less/tooltip.import.less";
@import "@{bootstrap3-less-root}/lib/less/popovers.import.less";
@import "@{bootstrap3-less-root}/lib/less/carousel.import.less";

// Utility classes
@import "@{bootstrap3-less-root}/lib/less/utilities.import.less";
@import "@{bootstrap3-less-root}/lib/less/responsive-utilities.import.less";

Upgrading

  • 0.3.0
    • Migrated to new Meteor 0.9 package system.
  • 0.2.1
    • You can now load the optional Bootstrap theme for a visually enhanced experience by adding @import "/packages/bootstrap3-less/lib/less/theme.import.less"; to your own less file.
  • 0.2.0
    • Before we instructed to create /public/fonts symlink pointing to ../packages/bootstrap3-less/lib/fonts. This isn't needed anymore since /packages folder is now public in Meteor. You can remove the symlink.
    • If you're using advanced importing (importing all the files instead of just bootstrap.import.less), note that there is now one new file to import: responsive-embed.import.less
    • See also Bootstrap release changelog
  • 0.1.9
    • (Meteor <0.7.1) imported files were with .lessimport extension. Upgrade your custom import file to match new .import.less extensions.

License

This package is licensed under the MIT license. See Bootstrap License.

Contributors

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.