A solid and consistent starting point for CSS and JavaScript.
Jump to 'Usage' below for a quicker way to start or install using npm into your existing project like so:
npm install bnu-bundle --save
TODO: Update all the following lines
- Copy the contents of the /example directory into your project
- Rename the example package.json file accordingly
npm installto install dependencies- Create things 💥
💡 Usage is intended using source es6 JS and SCSS. The above steps will get you in a position to start using these core elements straight away.
BNU Bundle provides a number of event listeners, so you can change or extend the behaviour of the components:
- BnuBundleTabsLoaded: Triggered when Tabs has been loaded.
- BnuBundleModalsLoaded: Triggered when Modals has been loaded.
- BnuBundleFormsLoaded: Triggered when Forms has been initiated.
Scripts have been added and wired up in the example package.json file as long as you keep the same directory structure.
To watch and build as you develop install this watcher utility:
npm install -g watch
With watch available globally, you can simply run any of the watch commands below
To build CSS once
npm run build:css
To watch and build CSS whilst developing
watch 'npm run build:css' ./sass
To build JS once
npm run build:js
To watch and build JS whilst developing
watch 'npm run build:js' ./js
To format JS once
npm run format
💡 Formatting code will change the source file to ensure all code is formatted similarly. This will affect committed code in most cases so it's a really good idea to run npm run format or npm run build prior to commiting to ensure that formatting changes won't require a follow up commit. See below for more info on formatting.
BNU Bundle now relies on Prettier which is an opinionated code formatter. Rather than simply flagging coding standard violations (quote styles, trailing commas, semi colons, line lengths etc) it simply goes in and changes them. It's strict and unforgiving at first, but it's the most frustration free way to ensure JS code is consistent across projects and developers.
We got a script to run fractal while developing bnu-bundle.
Run npm run fractal:watch from the root to work on it.
To test the static version of fractal and see how will it look once is deployed, you can do the following:
- Build the static version of fractal:
npm run fractal:build - Run it locally:
docker run --rm -v $(pwd)/docroot:/usr/share/nginx/html:ro -p 80:80 nginx - You should see it your browser on
http://localhost