How to use | Digital Standards

[This file is a WIP]

Standards is built on Foundation 6, a robust front-end framework. If you are going to use Standards in your project, it is important to remember not to use any other front-end frameworks. This includes Bootstrap.

To make managing assets easier, Foundation JavaScript and necessary styles are packaged with the Standards. You won’t need to include them separately in your project.

jQuery is also a requirement, but it is included in the compiled Standards JavaScript file. You will not need to add it to your project separately.

You will need to include the Standards CSS and JavaScript on every HTML page of your project.

Direct download

You can choose to download the Standards files directly. The latest version and release notes are available on our GitHub repository.

Files

Include the phila-standards folder wherever you store your third-party project assets.

Note: The next release will include minified files.

phila-standards/
├── css/
│   ├── phila-standards.css
│   └── phila-standards.css.map
├── js/
│   ├── phila-standards.js
├── fonts/
└── img/

CSS

Add the CSS link to the <head> of your HTML pages.

<link rel="stylesheet" href="/path/to/your/assets/css/phila-standards.css">

JavaScript

Add the JavaScript just above the closing </body> of your HTML pages.

jQuery 3.2.1 is included in the phila-standards.js minified file.

You will need to initialize Foundation. You can do this in your own JavaScript files (make sure to include them AFTER phila-standards JavaScript). Or, you can initialize Foundation directly on the page, like in the example below.

<script src="/path/to/your/assets/js/phila-standards.js"></script>
<script>$(document).foundation();</script>

Install using npm (or Yarn)

If you are familiar with Node Package Manager (npm) you can include the latest version of the City’s standards in your project.

We recommend you use Yarn to manage dependencies. All packages available on npm are also available via Yarn.

To install use yarn add phila-standards or npm install phila-standards.

node_modules/phila-standards/
├── dist/
│   ├── css/
│   ├── fonts/
│   ├── img/
│   ├── js/
└── src/
    ├── img/
    ├── js/
    └── sass/

JavaScript

require('phila-standards') will load the Standards JavaScript onto the page. This module doesn’t export anything.

SASS

The main Sass (SCSS) source file is located in: node_modules/phila-standards/src/sass/phila-standards.scss

The compressed CSS is located in: node_modules/phila-standards/dist/css/phila-standards.css

Presentation templates Analytics