DOCSEARCHbyAlgolia
Submit Docs

Cirrus UI

website·Indexed 30 days ago

https://cirrus-ui.netlify.app/

A CSS framework providing utility classes for layout, grid, forms, and animations. It includes a Plugin API for custom style injection, pseudo-variant configurations for responsive and dark/light modes, and a comprehensive set of utilities for flexbox, grid, spacing, and positioning.

Tokens
97.6K
Snippets
640
Records
725
Agent score
72%

What's inside Cirrus UI

  1. Overview of Cirrus SCSS 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 better developer experience. Key features include:

    • Component-based: Build apps by composing designed components.
    • Utility-first: Includes utility classes for scalable design without writing custom CSS.
    • Lightweight: No JavaScript dependencies; the minified CSS file is approximately 223KB (31.6KB Gzipped).
    • Customizable: Styles can be modified via a central configuration object.
    • Sass-native: Written in Sass, allowing direct use of mixins, variables, and functions.

  2. 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 lightweight (approx. 31.6 KB Gzipped) and can be used via a minified CSS file from a CDN or integrated directly into Sass projects.

  3. Overview of Cirrus UI Framework Architecture

    Cirrus UI is organized into three primary types of stylesheets that are used together to build interfaces:

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

  4. Overview of Cirrus UI framework structure

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

    • Base: Essential foundation styles including resets, animations, fonts, grid, layout, media, modifiers, and spacing.
    • Component: Prebuilt UI components (such as Buttons, Forms, and Layout elements) that can be added to a project immediately.
    • Utilities: Atomic classes used to modify specific styles of individual elements.

  5. Understand Cirrus UI default responsive behaviors

    Cirrus UI is designed for mobile-optimized sites. Several elements have built-in responsive behaviors:

    • Text elements (e.g., h1) automatically shrink on mobile devices.
    • Navigation items in header-nav collapse into a dropdown menu on mobile.
    • Columns within a row or elements within a level stack vertically on mobile by default. This behavior can be overridden using col-[i] classes.

  6. Understand Cirrus UI typography defaults and sizing

    Cirrus UI uses a rem-based sizing system for font-size to ensure independence from parent element font sizes. The default base size is 1rem, which equals 16px; every 1rem interval represents 16 pixels.

  7. Choose between Cirrus Core and Extended builds

    Cirrus provides two different build flavors depending on the required 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, 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.

  8. Understand Cirrus UI typography and font sizing

    Cirrus UI uses a rem-based sizing system for typography to ensure independence from parent element font sizes. The default base size is 1rem, which equals 16px. Each subsequent rem interval represents an additional 16 pixels.

  9. Understand Cirrus UI default responsive behavior

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

    • h1 and other text elements shrink on mobile devices.
    • 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).

  10. Choose between Cirrus Core and Extended build flavors

    Cirrus is available in two build flavors depending on the required 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 minified file is cirrus-core.min.css.
    • Ext (Full): Includes everything in Core plus Extended Components for prototyping, such as Avatar, Breadcrumb, Card, Form Extended, Link Extended, Modal, Pagination, Placeholder, Tabs, Tags, Tiles, Toast, and Tooltips. The minified file is cirrus.min.css.

  11. Understand the Cirrus project folder structure

    The Cirrus source code is organized to separate base styles, components, and internal logic:

    • /src/base: Fundamental styles (grid, layout, spacing, etc.).
    • /src/components: Individual SCSS files for each UI component.
    • /src/utils: Utility classes (flex, position, opacity, etc.).
    • /src/internal: Core logic, including mixins, functions, constants, and theme configurations.
    • /src/builds: SCSS entry points for the core and ext builds.
    • /dist: The output directory for compiled and minified CSS files.
    • /tests: Unit tests for internal APIs and SCSS logic.

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

    Cirrus Blocks is a collection of over 50 components and layouts designed to be copied and pasted directly into projects. These blocks are built by the Cirrus developers to ensure compatibility with the latest features and scalability. Each block is provided in HTML, React, and Vue formats.