About This Toolkit

Introduction

This toolkit aims to serve multiple purposes:

• facilitate the rapid creation of new web user interfaces
• ensure consistency in design and quality
• serve as the main repository for documenting the web design efforts at NYPL Digital
• establish and promote universal design best practices

This is a work in progress. We will be constantly updating it, making additions and modifications to suit the needs of the team and the organization. If you see something missing or wrong, please open an issue on the Github repository.

How This Site Is Organized

Each section deals with a specific topic (for example Forms or Buttons) which detail the different widgets to use in interfaces (for example Primary Action Buttons). Each widget has a working example, the CSS class or classes involved, the HTML expected, and a JavaScript example, if applicable.

While the goal is to make this toolkit as easy to use as possible, some web development experience is required to be able to use it successfully.

Copy/Paste Everything

The main idea behind this toolkit is to have as much of the design and functionality for any user interface available “out of the box”. You shouldn’t need to be writing any custom CSS. If you are working on a NYPL Digital project and you think the functionality or widget you need is not covered, please open an issue in Github. This way future projects will benefit from new developments and you won’t need to do the heavy lifting of coming up with a custom solution to a design problem. As someone else put it best: “the real way to scale CSS, is to stop writing CSS.”

System Fonts

After relying on custom web fonts for a while, we have decided that it is in our patron’s best interest for NYPL websites to rely on system fonts instead. These fonts have several benefits:

• they are already installed in your computer or mobile device so there is no additional download required to use them, thus reducing bandwidth usage costs
• having the nuances of bold text, italic text, or code text also increases the size of the download (and we want those)
• our materials are multilanguage, making finding a custom font that supports, say, Persian or Chinese very expensive
• even if a custom font supports every single language, like the commendable Noto free font by Google, it will be a very big download for our patrons (the complete Google Noto set is 970 megabytes!)

These are just the main reasons why we decided, for now, to use system fonts in this toolkit.

Accessibility And Mobile First

This toolkit puts universal design and mobile use first. All features should be accessible to all users in all devices. We strive to conform to WCAG 2.0 AA standard. If you see something that does not conform to this goal and standard, please open an issue in Github.

Installation

There are installation instructions in the Github repository.

Acknowledgements

The idea behind this toolkit borrows heavily from initiatives such as the Gov.UK Service Manual or the US Web Design Standards. We hope this code, which is available on Github, will be of use to others.