Cirrus

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

FlavorMinifiedGzipBrotli
Core
Ext (Full)
All
Core

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

  • Base
    • Animations
    • Font
    • Grid
    • Layout
    • Media
    • Modifiers
    • Spacing
  • Core Components
    • Button
    • Code
    • Footer
    • Forms
    • Frames
    • Header
    • Links
    • Lists
    • Progress
    • Table
  • Utilities
    • Absolute
    • Clearfix
    • Display
    • Flex
    • Misc
    • Opacity
    • Overflow
    • Position
    • Round
    • Shadows
    • Z-Index

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.

  • Everything in Core
  • Extended Components
    • Avatar
    • Breadcrumb
    • Card
    • Form Extended
    • Link Extended
    • Modal
    • Pagination
    • Placeholder
    • Tabs
    • Tags
    • Tiles
    • Toast
    • 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.

Testing

With 0.7.0, tests have been added to make sure Cirrus's internal APIs are working properly. You can also write your own unit tests to test any new mixins, functions, etc. as you wish.

Run npm test to run all unit tests in the project.

#Folder Structure

The project is organized like this:

├── CODE_OF_CONDUCT.md
├── config
├── CONTRIBUTING.md
├── dist
│   ├── cirrus-all.css
│   ├── cirrus-all.min.css
│   ├── cirrus-core.css
│   ├── cirrus-core.min.css
│   ├── cirrus.css
│   └── cirrus.min.css
├── gulpfile.js
├── img
│   └── CirrusLogo.png
├── LICENSE
├── main.example.scss
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── base
│   │   ├── animations.scss
│   │   ├── default.scss
│   │   ├── font.scss
│   │   ├── grid.scss
│   │   ├── _index.scss
│   │   ├── layout.scss
│   │   ├── media.scss
│   │   ├── modifiers.scss
│   │   └── spacing.scss
│   ├── builds
│   │   ├── core.scss
│   │   └── ext.scss
│   ├── cirrus-all.scss
│   ├── cirrus-core.scss
│   ├── cirrus-ext.scss
│   ├── components
│   │   ├── avatar.scss
│   │   ├── breadcrumb.scss
│   │   ├── button.scss
│   │   ├── card.scss
│   │   ├── code.scss
│   │   ├── footer.scss
│   │   ├── form-ext.scss
│   │   ├── forms.scss
│   │   ├── frames.scss
│   │   ├── header.scss
│   │   ├── link-ext.scss
│   │   ├── links.scss
│   │   ├── lists.scss
│   │   ├── modal.scss
│   │   ├── pagination.scss
│   │   ├── placeholder.scss
│   │   ├── progress.scss
│   │   ├── table.scss
│   │   ├── tabs.scss
│   │   ├── tags.scss
│   │   ├── tiles.scss
│   │   ├── toast.scss
│   │   └── tooltips.scss
│   ├── internal
│   │   ├── _api.scss
│   │   ├── _config.scss
│   │   ├── _constants.scss
│   │   ├── _flags.scss
│   │   ├── _functions.scss
│   │   ├── _index.scss
│   │   ├── _mixins.scss
│   │   ├── _selectors.scss
│   │   ├── _size.scss
│   │   └── _theme.scss
│   └── utils
│       ├── absolute.scss
│       ├── clearfix.scss
│       ├── display.scss
│       ├── flex.scss
│       ├── misc.scss
│       ├── opacity.scss
│       ├── overflow.scss
│       ├── position.scss
│       ├── round.scss
│       ├── shadows.scss
│       └── zindex.scss
└── tests
    ├── internal
    │   ├── _api.spec.scss
    │   ├── _config.spec.scss
    │   ├── _functions.spec.scss
    │   ├── _mixins.spec.scss
    │   └── _size.spec.scss
    ├── scss.spec.js
    └── test_base.scss

11 directories, 80 files