#Developing on Cirrus

One of the best parts of the framework is that it is open source. You can modify and extend different portions of it to suit your needs.

#Overview

The framework builds into two different flavors: core and ext (or full).

Flavor	Normal	Gzip	Brotli
Core
Ext (Full)

Core

This only contains the essential styles needed to build a project with Cirrus. It consists of these components:

Buttons
Code
Default (Base)
Font
Footer
Forms
Frames
Header
Layout
Links
Lists
Media
Modal
Tables
Theme
Util

In the dist folder, these styles are found in the cirrus-core.min.css file here.

Ext

This adds an extension to the framework with more styles, layouts, and pre-built components for quick prototyping.

Animations
Avatar
Card
Form (Extended Styles)
Grid
Link (Extended Styles)
Modifiers
Pagination
Placeholder
Tabs
Tags
Tiles
Toasts
Tooltips

All these styles are combined with the core build in the cirrus.min.css file in the dist folder here.

#Building from Source

Developing your own version of Cirrus is quite simple with these simple steps.

Get the Source

You can clone the source of the project straight from Github. You can add files or remove them from the /src directory to fit your needs.

Building the Project

Cirrus can be modified to include only components that you will need. Since it is processed with Gulp swapping different components in and out of your distribution build is very simple.

Just follow the following steps:

Open the root directory in your terminal.
Remember to run npm install to get all the necessary dependencies.
Modify gulpfile.js to add or remove components and then run gulp minify to build the regular and minified versions.
These build files should appear in the /dist directory.

Gulp Commands

gulp compile - just compile the CSS without minification.
gulp minify - compile the CSS with level 2 minification.
gulp watch - automate compiling and minication.

#Customization

Learn how to customize Cirrus itself.

Customizing the Theme

You can find Cirrus's color palette within theme.scss. Modify and rebuild the project to use the theme you prefer.

For more granular control, you can modify the theme for a specific control by changing the CSS variable value for that specific class. For example, the modification below changes the color for all *--info related components to #0066ff.

:root {
    /* v1 Colors */
    --cirrus-fg: #{$cirrus-fg};
    --cirrus-bg: #{$cirrus-bg};

    --cirrus-primary: #{$cirrus-primary};
    --cirrus-primary-rgb: #{hex-to-rgb($cirrus-primary)};
    --cirrus-primary-light: #{$cirrus-primary-light};

    /* ... */

    --cirrus-info: '#0066ff';

    /* ... */
}

Customizing Dimensions/Sizes

You can find Cirrus's sizing configuration within _size.scss. Modify and rebuild the project to use the sizes you prefer.

The sizes specified in the file include:

Spacing for padding/margin.
Base size for the space class.
Font sizes.
Grid column/row count.
Default grid column/row span.
Tab sizes.
Viewport breakpoints.
Viewport Scss utils.

/* Spacing */
$spacing-system: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32;
$space-size: 0.5rem;

/* Fonts */
$font-size-xs: .7rem;
$font-size-s: .85rem;
$font-size-m: 1rem;
$font-size-l: 1.35rem;
$font-size-xl: 1.75rem;

/* Grid Count (Columns + Grid) */
$grid-columns: 12;

/* Grid Percents */
$grid-width: 1 / $grid-columns;

/* ... */

#Folder Structure

The project is organized like this:

.
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── dist                            // Build files
│   ├── cirrus-core.css
│   ├── cirrus-core.min.css
│   ├── cirrus.css
│   └── cirrus.min.css
├── gulpfile.js
├── helpers                         // Helper Sass files/config
│   ├── _functions.scss
│   ├── _mixins.scss
│   ├── _selectors.scss
│   └── _size.scss
├── img
│   └── CirrusLogo.png
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
└── src
    ├── core                        // Core build
    │   ├── button.scss
    │   ├── code.scss
    │   ├── default.scss
    │   ├── font.scss
    │   ├── footer.scss
    │   ├── forms.scss
    │   ├── frames.scss
    │   ├── header.scss
    │   ├── layout.scss
    │   ├── links.scss
    │   ├── lists.scss
    │   ├── media.scss
    │   ├── spacing.scss
    │   ├── table.scss
    │   ├── theme.scss
    │   └── utils                   // Utilities
    │       ├── clearfix.scss
    │       ├── display.scss
    │       ├── flex.scss
    │       ├── misc.scss
    │       └── position.scss
    └── ext                         // Extended styles + components
        ├── animations.scss
        ├── avatar.scss
        ├── card.scss
        ├── form-ext.scss
        ├── grid.scss
        ├── link-ext.scss
        ├── modal.scss
        ├── modifiers.scss
        ├── pagination.scss
        ├── placeholder.scss
        ├── tabs.scss
        ├── tags.scss
        ├── tiles.scss
        ├── toast.scss
        └── tooltips.scss

Cirrus