The base project for a static Foundation site built with Pug.
$ git clone [email protected]:springbox/foundation-pug-boilerplate
...
$ yarn
...
$ yarn watchIf you do not have Yarn, run:
$ npm install -g yarnThis project requires Node 6.x or greater.
$ git clone [email protected]:springbox/foundation-pug-boilerplate
$ yarnThe following are commands to be run with yarn:
Compiles the pug templates and sass modules into the /dist directory.
$ yarn buildRuns sass-lint and pug-lint on the uncompiled source.
$ yarn lintBuilds the project, initializes Browser-sync, and watches the source files.
$ yarn watchView your project at http://localhost:3000/
This project follows a mobile-first sass style. This means that base rules and small styles will be written first, with medium, large and up styles being added with @include breakpoint() mixins.
Example:
.some-div {
background-color: black;
color: white;
height: 100px;
// medium styles
@include breakpoint(medium-only) {
height: 200px;
}
// large styles
@include breakpoint(large-only) {
height: 300px;
}
// xlarge styles
@include breakpoint(xxlarge-only)...
}See the Foundation Breakpoint Mixin documentation for further examples.
This project utilizes linters to enforce coding standards: