Code Monkey home page Code Monkey logo

mofo-bootstrap's Introduction

Uses Mofo Standards Build Status dependency Status devDependency Status

mofo-bootstrap

Mozilla Foundation Bootstrap 4 theme.

Usage

For the moment it's recommended that you use one of two methods to include the compiled mofo-bootstrap CSS in your project:

  1. Include the library in your package.json for an npm-managed project by running npm install mofo-bootstrap --save. You can then point your build system at the compiled CSS which resides at node_modules/mofo-bootstrap/dest/css/mofo-bootstrap.css. This is the preferred method.
  2. Hotlink to the raw compiled CSS file on Github at http://mozilla.github.io/mofo-bootstrap/dest/css/mofo-bootstrap.css from your HTML. This is not recommended for production, but is OK for prototyping or test purposes. Eventually we will put the CSS on a proper CDN.

It's not currently advisable that you extend and compile the mofo-bootstrap SCSS in your project. SCSS doesn't (currently) allow for dynamic import paths, which complicates things when mofo-bootstrap becomes a module. We're working on a reasonable approach for allowing this...

Setup for Development

Run the following commands in your terminal:

  1. git clone https://github.com/mozilla/mofo-bootstrap.git && cd mofo-bootstrap
  2. npm i
  3. npm start

File Structure

dest/ <- Contains compiled code. Don't edit anything in this folder!
src/
├── index.pug <- Template for demo page (Creates: dest/index.html)
└── scss/
    ├── custom/ <- SCSS modules for non-Bootstrap components.
    ├── overrides/ <- SCSS modules that override or extend Bootstrap components.
    ├── demo.scss <- SCSS specific to the demo page.
    └── mofo-bootstrap.scss <- Primary entry point that defines all imports.

File Naming Conventions

  • All files should be named in hyphenated-lowercase
  • SCSS modules/partials should be prefixed with an underscore (_)
  • Bootstrap overrides should be named after their sibling. (For example: /src/scss/overrides/_type.scss and bootstrap/scss/_type.scss)

Linting

To lint your Sass code, run npm run test:sass

Travis is connected to this task and your pull requests will fail if this test doesn't pass locally.

Deploying

Deployment is run automatically after npm version is invoked as part of the postversion script.

The npm run deploy command will deploy a demo page and compiled CSS for the library to the gh-pages branch of the origin remote. It will use the latest code on the master branch of the origin remote. It's not recommended to run it on its own, because doing so can result in the deployed demo and library not matching the latest published package in npm.

mofo-bootstrap's People

Contributors

gvn avatar alanmoo avatar

Watchers

Ergest NAKO avatar James Cloos avatar

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.