@ampath-kenya/scoped-bootstrap

Scoped Bootstrap

Scoped Bootstrap is a modified version of bootstrap that solves the styling issue of boostrap where it covers the entire html file and therefore colliding with you own styles. It does it by demanding that any bootstrap component should be used inside a root component that has a class '.scoped-bootstrap'. It may contain issues and bugs it's not been extensively tested.

npm install scoped-bootstrap

Usage

<div class="scoped-bootstrap">
<!-- Boostrap components goes inside here -->
 <div>
<!-- Other styling outside of the root bootstrap component will not be affected by bootstrap styling. -->

Custom Build

1. Modify the postcss.config.js file, by adding the class prefix for the root component. Default is .scoped-bootstrap

'use strict'

module.exports = {
  map: true,
  plugins: {
    "postcss-prefix-selector": {
      exclude: [
        ':root'
      ],
      prefix: "<<put-your prefix here. Should start with dot(.) e.g. .ampath-fe>>"
    }
  }
}

1. Build the project to produce the dist and deploy it as a tag, or publish to npm.

npm run build

Releasing

Modify package.json with <>

npm run build

git add -f dist

git commit -a -m 'releasing <<version>>'

git tag <<version>>

git reset --hard HEAD~

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT