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.
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
<!-- Font Awesome --> <link rel="stylesheet" href="./fontawesome/css/all.min.css"> <!-- NYC Theme CSS --> <link rel="stylesheet" href="./css/theme.css">
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:
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
Adds legal information to theme.css and must be included for redistribution. No need to edit this file.
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.
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.
Simple Sass mixins used throughout the framework. A great place for developers to add their own mixins.
This file contains a variety of styles and fixes for right-to-left language support, forms, and cross-brower bugs.
Handy classes designed for use alongside Bootstrap classes.
Sass for the NYC global header and footer, and all of our custom components.
Helpful tools like our floating breakpoint bar can be activated during development.
On-demand subway icons useful for pages that provide directions.
<!-- 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>
Required for langauage translation and toggling search, language, and menus on device viewports.
Required for pages with forms, where validation is needed.
This file should only be included for pages with responsive tables.