Puddletown UI Bootstrap
UI development environment with npm scripts, built with gulp & webpack. Produces fully optimized dist directories for templating.
Install all modules, set up a fresh git repo and start the server.
npm run setup
and navigate to:
The project for dev and testing is built to the
Make all of your edits in the
running the application again after stopping server
To build the final project build for distribution/ templating
npm run build
dist directory will be created with the output
Editing the CSS
SCSS is transpiled into CSS. Just edit the scss files.
They are structured as follows. Usually the 0000.scss is a good place to start. Just trash everything you don't want and build what you do.
├── _0000.scss # the default style sheet (mobile first) ├── _0480.scss # the style sheet that begins at the 480px width breakpoint ├── _0760.scss # 760px width breakpoint ├── _0980.scss # etc ├── _1200.scss ├── _1400.scss ├── _1600.scss ├── includes │ ├── _colors.scss # all color info │ ├── _fonts.scss # all font info │ ├── _mixins.scss # all SASS mixin info │ ├── _plugins.scss # just dump all plugin code here │ ├── _reset.scss # keeps things clean in between browsers │ ├── _responsive.scss # master routing for all the top level scss files │ └── _typography.scss # includes with all typography info └── styles.scss # master scss routing file