DOCSEARCHbyAlgolia
Submit Docs

Cirrus UI Documentation

website·Indexed 32 days ago

https://cirrus-ui.com/

A utility-first CSS framework featuring a comprehensive set of layout tools, grid systems, and utility classes for display, positioning, and spacing. Includes a Plugin API for custom style injection and support for pseudo-variants as of version 0.8.0.

Tokens
48.9K
Snippets
314
Records
359
Agent score
67%

What's inside Cirrus UI

  1. Overview of Cirrus UI Framework

    Cirrus is a modular, responsive, and component-centric SCSS framework. It provides a set of pre-built components and utility classes to enable rapid prototyping and a consistent design system without requiring additional JavaScript libraries. The framework is fully open-source and can be used via a single minified CSS file from a CDN.

  2. Overview of Cirrus UI Framework Architecture

    Cirrus UI is organized into three primary types of stylesheets that work together to style a project:

    • Base: Essential foundation styles including resets, fonts, colors, layout/positioning, grid, media, and spacing.
    • Component: Prebuilt, high-level UI elements (e.g., Buttons, Forms, Headers) that can be added to projects immediately.
    • Utilities: Atomic classes used to modify specific styles of individual elements.

  3. Use Cirrus Blocks for pre-designed components and layouts

    Cirrus Blocks is a collection of over 50 pre-designed components and layouts developed by the Cirrus team. These blocks are designed to be copied and pasted directly into projects and are available in HTML, React, and Vue formats.
    Visit https://cirrus-blocks.com to sign up and access the components.

  4. Choose between Cirrus Core and Extended builds

    Cirrus provides two different build flavors depending on the required set of styles and components:

    • Core: Contains essential styles including Base (Animations, Font, Grid, Layout, Media, Modifiers, Spacing), Core Components (Button, Code, Footer, Forms, Frames, Header, Links, Lists, Progress, Table), and Utilities (Absolute, Clearfix, Display, Flex, Misc, Opacity, Overflow, Position, Round, Shadows, Z-Index). The distribution file is cirrus-core.min.css.
    • Ext (Full): Includes everything in Core plus Extended Components for rapid prototyping, such as Avatar, Breadcrumb, Card, Form Extended, Link Extended, Modal, Pagination, Placeholder, Tabs, Tags, Tiles, Toast, and Tooltips. The distribution file is cirrus.min.css.

  5. Understand Cirrus typography defaults and sizing

    Cirrus uses a rem-based sizing system where the default is 1rem (16px). Because rems are independent of parent element font sizes, each 1rem interval equals 16 pixels. The framework utilizes two primary typefaces: Nunito Sans for body content and Montserrat for headings.

  6. Understand Cirrus UI default responsive behavior

    Cirrus UI is designed for mobile-optimized sites. Component styles automatically resize based on page width, and several elements have built-in responsive behaviors:

    • h1 and other text elements shrink on mobile to maintain proportion.
    • header-nav items move into a dropdown menu on mobile.
    • Columns inside a row or elements inside a level stack vertically on mobile by default (this can be overridden using col-[i] classes).

  7. Make tables horizontally scrollable with Table Container

    To prevent large tables with many columns from breaking the layout—especially on smaller devices—wrap the <table> element in a <div> with the table-container class. This enables horizontal scrolling for the table content.
    <div class="table-container">
    <table>
        <!-- table content -->
    </table>
</div>

  8. Mark a table row as selected

    To visually highlight a specific row as selected, add the selected class to the <tr> element of that row.
    <tr class="selected">
    <th>3</th>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
</tr>

  9. Apply responsive grid layouts

    Apply grid classes conditionally based on viewport size by prefixing the class with a viewport selector (e.g., lg:).
    <!-- Only applies grid layout on large screens and above -->
<div class="lg:grid">
    <!-- ... -->
</div>

  10. Open and close Modals using CSS and anchors

    Modals can be controlled without JavaScript by using HTML anchor links and the browser's native ID-based navigation.

    • Opening: Set the href of a link to the id of the modal (e.g., <a href="#test-modal">).
    • Closing: Use an anchor tag as a close button. The href value determines the browser behavior after the modal closes:
    <!-- Modal Definition -->
<div class="modal" id="test-modal">
    <div class="modal-header">
        <!-- Close button examples -->
        <a href="#TAG-OUTSIDE">Return to Specific Div</a>
        <a href="#">Return to Top</a>
        <a href="#NON-EXISTENT-DIV">Keep Scroll Position</a>
    </div>
</div>

<!-- Trigger to open -->
<a href="#test-modal">Open Modal</a>

  11. Create stylized and animated checkboxes

    Stylized checkboxes in Cirrus are animated and utilize the extended forms styling. They follow a specific DOM structure: a container with form-ext-control form-ext-checkbox, containing an input with form-ext-input and a label with form-ext-label.
    <div class="form-ext-control form-ext-checkbox">
    <input id="check1" class="form-ext-input" type="checkbox">
    <label class="form-ext-label" for="check1">Unchecked</label>
</div>

  12. Use the Cirrus UI sizing system for spacing

    Cirrus UI uses a standardized sizing system for utility classes (such as padding p- and margin m-). The numeric suffix of a class represents a value that is double the resulting rem value. For example, a class ending in -4 applies a size of 2rem.

    Sizing Reference Table

    SuffixPixelsRem
    00px0rem
    px1px0.0625rem
    18px0.5rem
    216px1rem
    324px1.5rem
    432px2rem
    540px2.5rem
    648px3rem
    864px4rem
    1080px5rem
    1296px6rem
    16128px8rem
    20160px10rem
    24192px12rem
    32256px16rem
    <!-- Left and right padding of 1.5rem, top and bottom padding of 1rem -->
<div class="px-3 py-2">
    Content
</div>

<!-- Margin of 2.5rem on all sides -->
<div class="m-5">
    Content
</div>