#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).

FlavorNormalGzipBrotli
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:

  1. Open the root directory in your terminal.
  2. Remember to run npm install to get all the necessary dependencies.
  3. Modify gulpfile.js to add or remove components and then run gulp minify to build the regular and minified versions.
  4. 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