#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.
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.
The framework builds into two different flavors: core and ext (or full).
Flavor | Normal | Gzip | Brotli |
---|---|---|---|
Core | |||
Ext (Full) |
This only contains the essential styles needed to build a project with Cirrus. It consists of these components:
In the dist
folder, these styles are found in the cirrus-core.min.css
file here.
This adds an extension to the framework with more styles, layouts, and pre-built components for quick prototyping.
All these styles are combined with the core
build in the cirrus.min.css
file in the dist
folder here.
Developing your own version of Cirrus is quite simple with these simple steps.
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.
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:
npm install
to get all the necessary dependencies.gulpfile.js
to add or remove components and then run gulp minify
to build the regular and minified versions./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.Learn how to customize Cirrus itself.
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';
/* ... */
}
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:
space
class./* 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;
/* ... */
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