Follow these simple steps for setting up Cirrus in your project.
Below are a couple of different ways to integrate Cirrus into your project.
1. Use a Package Manager (Recommended)
Npm
npm i cirrus-ui --save
Yarn
yarnadd cirrus-ui
2. Use a CDN
It is recommended to attach a version number to these CDN links to keep your project consistent with a given version if you want to avoid auto updates.
Now that Cirrus is installed, it is time to configure it for your project. This step ensures that the project is set up properly to support mobile responsiveness and strict rendering with standard mode.
Please visit FontAwesome and sign up to get your developer kit to get started. The CDN above is just a sample.
Required Fonts
Don't forget to include the required fonts.
<!-- Google Fonts --><linkhref="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700"rel="stylesheet"><linkhref="https://fonts.googleapis.com/css?family=Montserrat:400,700"rel="stylesheet">
Add Cirrus Link Import and Other Dependencies
<!-- Minified Cirrus CSS --><linkrel="stylesheet"href="../css/cirrus.min.css"><!-- Or use CDN link --><!-- Import your other dependencies -->
React
Import cirrus-ui anywhere in your project.
import'cirrus-ui';// Your other framework code
Write Your App
There's nothing left to do but to start your React app.
import{StrictMode}from"react";importReactDOMfrom"react-dom";importAppfrom"./App";import'cirrus-ui';// You can import it here if you wantconst rootElement =document.getElementById("root");ReactDOM.render(<StrictMode><App/></StrictMode>, rootElement
);
Vue
Import cirrus-ui anywhere in your project (either in a Vue template or JS file).
import'cirrus-ui';// Your other framework code
Write Your App
There's nothing left to do but to start your Vue app.
// Example main.jsimportVuefrom'vue';importAppfrom'./App.vue';import'cirrus-ui';Vue.config.productionTip=false;newVue({render:(h)=>h(App),}).$mount('#app');
Svelte
Import cirrus-ui anywhere in your project.
import'cirrus-ui';// Your other framework code
Write Your App
There's nothing left to do but to start your Svelte app.
Note that this can be used in any Sass/Scss file including in combination with other front-end frameworks such as React, Angular, Vue, etc.
Import the variant of Cirrus
/* Core Build */@use "cirrus-ui/src/cirrus-core" as *;/* Extended Build */@use "cirrus-ui/src/cirrus-ext" as *;/* All Build */@use "cirrus-ui/src/cirrus-all" as *;
(Optional) Configure Cirrus
If you want to change classes that Cirrus generates or how it behaves, you can pass in configuration values to override or extend defaults. Read more in the configuration docs. Below is just an example of customizing Cirrus.
@use "cirrus-ui/src/cirrus-ext" as * with ($config:(excludes:( ABSOLUTES,),opacity:null,// Disable default opacity classesextend:(// Add your ownopacity:(25:.25,50:.5,75:.75,))),);
Start Your Build Process
Run your build process that builds your Sass project. The output file should also contain the contents of Cirrus. Command here is just a sample.
