Decanter

Version: 7

Changelog: CHANGELOG.md

Demo

To see a live demo of Decanter v7 elements please view the v7 demo site. For more documentation on Version 7 please visit https://decanter.stanford.edu

Description

Decanter is a web design and development system for Stanford University. It includes a responsive layout system and a browsable collection of design patterns that can be used in any Stanford project. For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we use Tailwind CSS to generate utility classes with some customization needed for our Stanford design system.

Comprehensive Documentation

This repository includes extensive documentation to help you understand and use Decanter effectively. Places to start include:

1. README.md - Overview of Decanter, installation instructions, and quick start guide.
2. docs/README.md - Main documentation index with links to detailed guides.

Installation

As an npm package

Install Decanter in your project:

npm install decanter
# or
yarn add decanter

Usage

Import the entire design system

In your main CSS file:

@import 'decanter';

This imports all of Decanter's styles including theme variables, components, utilities, and base styles.

Import specific parts

You can also import specific parts of the design system:

@import 'decanter/src/css/theme.css';      /* custom CSS variables */
@import 'decanter/src/css/components.css'; /* Component styles */
@import 'decanter/src/css/utilities.css';  /* Utility classes */
@import 'decanter/src/css/base.css';       /* Base element styles */

With Tailwind CSS

If you're using Tailwind CSS in your project, you can import Decanter's CSS alongside your Tailwind directives:

@import 'decanter';
@theme 'myproject/theme.css';

For detailed usage examples and configuration options, see docs/usage.md.

CSS Class Index

Comprehensive list of all custom CSS classes provided by Decanter. See docs/index.md

Fonts

• We do not include any font assets with Decanter v7. If you want to use the Decanter fonts in your own projects, it is recommended that you use the font loading method that is optimized for your framework and only import the fonts that you need.
• We provided two font css files that you can import into your own project so you get the latest update from us. font.css includes all the fonts that are referenced in the Decanter design system (sans-serif, serif, slab, monospace, Stanford ligature font for the logo). font-basic.css includes only the essential sans-serif, serif and Stanford ligature fonts.
• For Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono - we include them using the @import method from Google Fonts.
• The Stanford ligature font that we use for the logo is linked from the University Communications media CDN.

Icons

• We recommend using the heroicons package as Hero Icons are created by the Tailwind CSS team and are open source. They can be included as SVG or JSX elements.

Accessibility

This project conforms to level AA WCAG 2.0 standards as required by the university's accessibility policy. For more information on the policy please visit: https://ucomm.stanford.edu/policies/accessibility-policy.html.