CAST Figuration
CAST Figuration®️ is a package of CSS and JavaScript that can be used as a starting point for building an accessible, cross-device, interactive website. It contains styles for text and buttons; interactive elements such as navigation, dropdown menus, and modal dialogs; column and grid layouts that adapt to the screen and device in use; color schemes that pass WCAG contrast checks; and advanced components such as an HTML5 audio and video player with interactive captions. All components are built to be usable via mouse, keyboard, or touch interaction as well as accessible to screen readers and other assistive technologies. Originally created as part of the National AEM Center's work, continued updating and improvements are supported by all of CAST's website projects.
Figuration was originally based on Bootstrap v3, with the added goal to enhance and embed accessibility functionality into the widgets so it is automatically applied as needed. This approach accelerates functional updates without having to individually revise each project or module. In addition, this method means that development teams can create accessible sites without as much effort and specialized knowledge.
The Figuration widgets are all initialized and configured in a consistent way, using either HTML data attributes or JavaScript calls. They aim to save the developer time by taking care of a lot of the behind-the-scenes details. For instance, ARIA attributes are automatically added, browser differences are smoothed out, and special cases for touch devices are handled. While reasonable defaults are provided, all aspects of the design and functionality are customizable.
Figuration’s ongoing development has introduced many of the recent features, such as flexbox layout, and utility classes, that can be found in Bootstrap v4 and v5. In some cases we have made only slight changes to Bootstrap components for accessibility and consistency with our configuration scheme, while other Figuration components are built from scratch. Figuration leverages Sass to provide variables that can be used to customize visuals and layout, as well as provide the ability to remove portions of generated CSS for increased performance.
CAST Figuration Detail
Figuration features a wide array of layout, component, and functional options that can be used and customized to greatly enhance your website or application.
| Category | Description | Options |
|---|---|---|
| Layout | Create flexible and responsive layouts with containers, rows, and columns using breakpoints designed to work with a wide array of devices. |
|
| Content | A collection of element specific CSS provide a consistent visual baseline across browsers. |
|
| Components | Over a dozen reusable layout building blocks will multiple variants that can be further customized to enhance layout and presentation for content and navigation. |
|
| Utilities | Utility classes are available to quickly modify layout and visuals without the need for custom CSS rules. |
|
| Widgets | Add more functionality and interactivity to Figuration with optional JavaScript libraries. Each one is designed with accessibility already built-in. |
|
License
CAST Figuration™ is released under the MIT license and is copyright 2021 CAST, Inc. Portions: copyright 2011-2021 the Bootstrap Authors and Twitter, Inc. Licensed under the MIT license.
Documentation & Examples
Detailed documentation and examples for all of the elements are available on the CAST Figuration website.
Download the Code
Keep up with the latest changes, discussions, and ongoing development at CAST Figuration's GitHub Project.