Foundation Pug Boilerplate

The base project for a static Foundation site built with Pug.

QuickStart

$ git clone git@github.com:springbox/foundation-pug-boilerplate
...
$ yarn
...
$ yarn watch

Getting Started

Prerequisites

yarn

If you do not have Yarn, run:

$ npm install -g yarn

Installing

This project requires Node 6.x or greater.

$ git clone git@github.com:springbox/foundation-pug-boilerplate
$ yarn

Running

The following are commands to be run with yarn:

Build

Compiles the pug templates and sass modules into the /dist directory.

$ yarn build

Lint

Runs sass-lint and pug-lint on the uncompiled source.

$ yarn lint

Watch

Builds the project, initializes Browser-sync, and watches the source files.

$ yarn watch

View your project at http://localhost:3000/

Coding Standards

SASS

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.

Linting

This project utilizes linters to enforce coding standards:

1. sass-lint | Rules
2. pug-lint | Rules

Built With

• Browser-Sync
• Foundation Sites
• SASS
• Pug
• Yarn