Implementation Guide

There are a number of dependencies you need to implement the UI styles and components within this guide. Follow the instructions here and you should be up in no time!

First, grab the required SASS dependencies

Every admin project should be drawing from the same UI pool of resources/dependencies to ensure the most uniform UI design. For the rest of the guide, we are going to assume that you have working knowledge, implementation and use of the CSS repo on Github, and that you understand how to import partial CSS files in SASS. If you do not understand these assumptions, please read the Creative Team Wiki to get up to speed.

To start, make sure you are including the following CSS partials, in order, in every project. More information about the partials can be found in the Creative Team Wiki.

  • _normalize.scss
  • _adminskin.scss
  • _variables.scss
  • _extends.scss
  • _fontawesome.scss
  • _gridhelper.scss
  • _helpers.scss
These are absolutely necessary inclusions on every admin project. Not including these files would not only cause discrepencies in uniformity among our products, but may also result in a failed compile in Compass during a SASS save.

There is an order to the inclusion of SASS partials. To learn more about the structure of your master SCSS file, consult the Creative Team Wiki.

Next, make sure you have the require JS dependencies

It's understood that the development team may have to integrate the javascript dependencies into the actual development/production environment, but if you are working locally, you'll have to grab the necesary JS libraries as well to ensure the applicable components render.

  • jQuery library
  • jQueryUi library
  • Bootstrap JS library

These are the base JS libraries that will be used on every project. Some of the JS components have independent javascript libraries that will have to be included - these libraries will be noted on the individual components themselves.

Usage of the material in this guide

Each section and component description in this guide will be detail in one or more of the following manners:

  • Description of the UI element
  • Example of the UI element
  • List of partial dependencies
  • List of JS dependencies
  • Required markup for inclusion
  • Required JS for inclusion

If something doesn't render correctly, first check that you have the proper SCSS and JS dependencies. Once you've confirmned proper dependency inclusion, consult your department manager.