decanter

Pattern Library and CSS Framework.

Usage no npm install needed!

<script type="module">
  import decanter from 'https://cdn.skypack.dev/decanter';
</script>

README

Decanter

Version: 7.0.0-dev

Changelog: CHANGELOG.md

Maintainability

Demo

To see a live demo of Decanter v7 please view the v7 styleguide.

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 TailwindCSS to generate utility classes with some customization needed for our Stanford design system.

Using Decanter v7 with React

The utility class approach we adopt for Decanter v7 works well with React.js. For those who are using React for their projects, please check out Decanter React, our React component library which uses Decanter v7.

Assets

We have removed all assets from the repo in Decanter 7. Instead, we are using remote third party resources for our fonts and icons.

Fonts

  • For Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono - we include them using the @import method from Google Fonts.
  • For the Stanford ligature font that we use for the logo, we link them from the University Communications media CDN.

Icons

  • We have removed FontAwesome (dependency and asset) completely from Decanter v7. For those who would like to continue using FontAwesome, please feel free to do so and include them using methods that are suitable for your own projects.
  • In Decanter React, we are using the react-hero-icon package to include the needed icons for our components, e.g., the Alert components. Hero Icons are created by the TailwindCSS team and are open source. They can be included as SVG or JSX elements.

Accessibility

WCAG Conformance 2.0 AA Badge

Evaluation Date: 2021-05-21 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.