DOCSEARCHbyAlgolia
Submit Docs

Figuration Documentation

website·Indexed 32 days ago

https://figuration.org/

A CSS framework providing a responsive grid system, typography settings, and components such as navbars, lists, and navs. Includes utility classes for Flexbox, display, color, and clearfix, with versioned documentation spanning 3.0 to 4.3.

Tokens
574.9K
Snippets
3.4K
Records
4K
Agent score
51%

What's inside Figuration

  1. Overview of the Slideshow widget

    The Slideshow widget extends the Tab widget by adding 'previous' and 'next' navigation controls. These controls automatically update their disabled state based on the currently active tab or slide. It is recommended to use <button> elements for the tabs within a slideshow since they trigger dynamic changes rather than page navigation.

  2. Overview of the Figuration front-end framework

    Figuration is a consistent, robust, and easy-to-use front-end framework designed for developing websites and applications. It was originally developed as an in-house project at CAST, Inc., based on Bootstrap v.3, with a primary focus on meeting Section 508 accessibility laws.

  3. Overview of the Figuration 3.0 Grid System

    Figuration uses a mobile-first, 12-column grid system built with flexbox. The system consists of three main components: containers, rows, and columns. Content must be placed within columns, and only columns may be immediate children of rows. Column widths are percentage-based and fluid. Gutters (horizontal padding) are used between columns, which are counteracted by negative margins on the rows. To remove these gutters, apply the .no-gutters class to the .row element.

  4. Overview of the Player widget

    The Player widget enables customized controls for the browser's built-in HTML5 audio and video players. It does not provide base CSS; developers must provide their own styling. It is strictly for native HTML5 media and does not support external media services like YouTube, Vimeo, or SoundCloud. The widget depends on the Dropdown widget for caption and transcript selection menus.

  5. Overview of the Figuration Player widget

    The Player widget allows developers to build custom control interfaces for the browser's native HTML5 audio and video players. It is designed to wrap standard <audio> and <video> tags, providing a layer of customized controls while relying on the browser's native media support.

    Key Constraints:

    • No Media Service Support: It does not support third-party services like YouTube, Vimeo, or SoundCloud.
    • CSS: No base CSS is provided by Figuration; developers must provide their own styling.
    • Dependencies: Requires the Dropdown widget for caption and transcript selection menus.

  6. Overview of the Slideshow widget

    The Slideshow widget extends the base Tab widget functionality to provide previous and next navigation controls. These controls automatically update their disabled state based on the currently active tab or slide. It requires the Tab widget to function.

  7. Overview of the Tab-Responsive widget

    The Tab-Responsive widget coordinates communication between the Tab and Collapse widgets. It ensures that when a user switches between a tabbed view (typically on desktop) and a collapsed/accordion view (typically on mobile), the active state is synchronized. This widget handles the logic of the state transition; visual styling and breakpoint-specific visibility (e.g., hiding tabs on mobile) must be handled via CSS.

  8. Overview of Figuration Player widget

    The Player widget enables customized controls for the browser's built-in HTML5 audio and video players. It is a wrapper that enhances the native <audio> and <video> elements.

    Key Constraints:

    • No Base CSS: Figuration does not provide base CSS for this widget; developers must provide their own styling.
    • Native Support: Media type support and limits are determined by the browser's HTML5 implementation.
    • No Third-Party Services: It does not support external media services like YouTube, Vimeo, or SoundCloud.
    • Dependencies: Requires the Dropdown widget for caption and transcript selection menus.

  9. Overview of Figuration Player (player.js)

    The Player widget allows developers to implement customized controls for the browser's built-in HTML5 <audio> and <video> players.

    Key Constraints:

    • No Base CSS: Figuration does not provide base CSS for the player; developers must provide their own styling.
    • Browser Dependent: Media type support and limits are determined by the user's browser.
    • No Third-Party Service Support: The widget does not support external media services like YouTube, Vimeo, or SoundCloud.
    • Dependencies: Requires the Dropdown widget for caption and transcript selection menus.

  10. Overview of the Slideshow widget

    The Slideshow widget is an extension of the Tab widget. It adds previous and next navigation controls that automatically update their disabled state based on the currently active slide. It is recommended to use <button> elements for the navigation controls rather than links, as they trigger dynamic changes on the page.

  11. Overview of Flexbox support in Figuration

    Figuration integrates Flexbox to provide greater layout flexibility, simplifying the sizing and alignment of elements. Key benefits include easy vertical alignment of content, the ability to reorder content across devices using media queries, and the creation of equal-height columns without CSS hacks. While many components are flexbox-enabled, not all are. Figuration uses Autoprefixer for vendor prefixes and postcss-flexbugs-fixes to address specific IE10-11 implementation bugs.

  12. Overview of the player.js widget

    The player.js widget enables customized controls for the browser's built-in HTML5 audio and video players. It is a wrapper for native HTML5 media elements; therefore, supported media types and limitations are determined by the user's browser.

    Key Constraints:

    • No Media Service Support: It does not support external services like YouTube, Vimeo, or SoundCloud.
    • Dependencies: Requires the Dropdown widget for caption and transcript selection menus.
    • Styling: No base CSS is provided by Figuration; developers must provide their own styles for the player controls.