How to Use

Prerequisites A general understanding of HTML5 and SASS (particularly Bootstrap 4 theming) is recommended before using NYC Core Framework.

Clone or download the NYC Core Framework from GitHub. You will have access to the following files and folders.

                                
                                    nyc-core-framework/
                                    ├── bootstrap/
                                    │   └── scss/
                                    ├── css/
                                    │   └── theme.css
                                    ├── fontawesome/
                                    │   └── css/
                                    │   └── webfonts/
                                    ├── images/
                                    ├── js/
                                    │   ├── main.js
                                    │   ├── responsive-table.js
                                    │   └── validation.js
                                    ├── scss/
                                    │   ├── __header.scss
                                    │   ├── _a-global-variables.scss
                                    │   ├── _b-bootstrap-imports.scss
                                    │   ├── _c-custom-mixins.scss
                                    │   ├── _d-enhancements.scss
                                    │   ├── _e-supplementary-classes.scss
                                    │   ├── _f-layout-elements.scss
                                    │   ├── _g-dev-tools.scss
                                    │   ├── _h-nyc-subway-icons.scss
                                    │   └── theme.scss
                                    ├── article-centered.html
                                    ├── article-two-column.html
                                    ├── index.html
                                    ├── landing-page-nav-across-search.html
                                    ├── landing-page-nav-across.html
                                    ├── landing-page-nav-right-search.html
                                    └── landing-page-nav-right.html

HTML Templates

In the root directory, several HTML templates are available to you. These templates offer built-in accessibility features like right-to-left language translation, key aria attributes and landmarks, and the appropriate ordering of headers (h1, h2, h3, etc.).

Each template includes the official NYC global header and footer , with variations to the primary menu and search. Explore our templates to familiarize yourself with the essentials of the NYC Core Framework.

CSS and Sass

The NYC Core Framework requires two CSS files. The first is FontAwesome, which we use for icons.

Font Awesome Update The Font Awesome CDN now requires users to register an email address. To keeps things simple, we now reference a local copy of the Font Awesome stylesheet and webfont depencies.

The second CSS file is our theme's main stylesheet: css/theme.css. Both of these dependencies are referenced before the closing </head> tag:

                                
                                    <!-- Font Awesome -->
                                    <link rel="stylesheet" href="./fontawesome/css/all.min.css">
                                    
                                    <!-- NYC Theme CSS -->
                                    <link rel="stylesheet" href="./css/theme.css">

Customization

Customizing the NYC Core Framework requires the ability to compile Sass. If you are unfamiliar with Sass, learn the basics.

Locate the files provided within the scss directory. Files that begin with an underscore are Sass partials. Think of them as modules containing snippets of code that work together, in a particular order, to generate a single CSS file.

Our partials come with a prepended alphabetical letter to their name (e.g. _a-global-variables.scss). This ensures their proper order during development.

Each partial is imported into scss/theme.scss. Here we import our partials:

                                
                                    @import "_header.scss";
                                    @import "a-global-variables.scss";
                                    @import "b-bootstrap-imports.scss";
                                    @import "c-custom-mixins.scss";
                                    @import "d-enhancements.scss";
                                    @import "e-supplementary-classes.scss";
                                    @import "f-layout-elements.scss";
                                    @import "g-dev-tools.scss";
                                    @import "h-nyc-subway-icons.scss";

Information about each of these files is provided below. If your Sass workflow is set up correctly, editing and saving any of these files will result in compiling a new version of css/theme.css.

__header.scss

Adds legal information to theme.css and must be included for redistribution. No need to edit this file.
_a-global-variables.scss

Create your theme's color palette and override any of Bootstrap's default variables. Adjustments are already in place to improve accessibility and visual consistency of color and spacing.

We've included some new variables, too, that support our own custom classes and components.

If you are unsure how to use this file, read about theming with Bootstrap.
_b-bootstrap-imports.scss

Import Bootstrap's Sass, but only what is needed for the framework.

For your convenience, we've included paths to Bootstrap's entire library, commenting out ones that are not required for the framework.
_c-custom-mixins.scss

Simple Sass mixins used throughout the framework. A great place for developers to add their own mixins.
_d-enhancements.scss

This file contains a variety of styles and fixes for right-to-left language support, forms, and cross-brower bugs.
_e-supplementary-classes.scss

Handy classes designed for use alongside Bootstrap classes.
_f-layout-elements.scss

Sass for the NYC global header and footer, and all of our custom components.
_g-dev-tools.scss

Helpful tools like our floating breakpoint bar can be activated during development.
_h-nyc-subway-icons.scss

On-demand subway icons useful for pages that provide directions.

JavaScript

Most of the javascript required for the the NYC Core Framework comes from jQuery and Bootstrap. These depencies are called near the closing </body> tag of the templates:

                                
                                    <!-- jQuery (full, compressed version) -->
                                    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

                                    <!-- Popper.js and Bootstrap JS -->
                                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
                                    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

A small amount of custom javascript has been written to support our custom features. The purpose of each of these files is described below.

main.js

Required for langauage translation and toggling search, language, and menus on device viewports.
validation.js

Required for pages with forms, where validation is needed.
responsive-table.js

This file should only be included for pages with responsive tables.