wesleyx88 / vue-cirrus

Vue components for the Cirrus CSS framework.

🧐 Introduction

Vue-Cirrus is a component framework for Vue. The goal of Vue-Cirrus is to provide clean readable and reusable components that make building your application easier.

You can build your amazing applications with the Power of Vue, Cirrus and a massive library of beautifully crafted components and features.

This framework uses the Cirrus CSS framework for better styling and it is an adaption of vue components.

The UI library only supports Vue 3. For Vue 2, please use an older version of Vue Cirrus.

🔨 Quick Install

1. Install with npm/yarn

npm install vue-cirrus@latest
# OR
yarn add vue-cirrus@latest

2. Include the following in your public.html file

<link href="https://unpkg.com/cirrus-ui" type="text/css" rel="stylesheet" />

3a. Import all Vue-Cirrus components by doing:

import VueCirrus from 'vue-cirrus';
import 'vue-cirrus/dist/vue-cirrus.css';

createApp(App).use(VueCirrus).mount('#app');

3b. Or simply import single components of Vue-Cirrus by doing:

import { VNavbar } from 'vue-cirrus';
import 'vue-cirrus/dist/vue-cirrus.css';

createApp(App).use(VNavbar).mount('#app');

4. Test, if it works by including the following in a vue file

<v-btn animated animation="loadingLeft">Button Test</v-btn>

🔮 Framework Components

• Avatars
  • Avatars are simple small images for easy displaying pictures of users
• Badges
  • Badges are there for easily displaying numbers above a text or displaying info cards above some components
• Buttons
  • Simple buttons, no explanation needed
• Cards
  • Simply create some good looking cards with some special effects, if needed
• Code
  • Display your code on your website to demonstrate your framework or library
• Columns
  • A easy to use and simple 12 grid system
• Dividers
  • Divide your content for better structure
• Dropdown
  • Create dropdown menus for structuring your menu points
• Footer
  • Create an easy footer for displaying your company information or other useful things
• Forms(SearchBar, DatePicker, Text)
  • Easily create a login form with these components or simply a search bar
• Frames
  • Simply generate a profile frame for easily displaying information
• Grid
  • A modern component for using the modern CSS grid system
• Links
  • Easily create nice animated links
• Menus
  • Display really beautiful looking menus
• Modals
  • Simple modals for displaying further information
• Navbar
  • It is so easy to create a simple navbar with this component
• NextPrev
  • Create next and previous buttons to navigate through your documentation or articles
• Pagination
  • Easily paginate your articles, blogs or pages with this component
• Parallax
  • Create a parallax effect with this component
• ParallaxElement
  • Create some really cool moving parallax elements
• Placeholder
  • If you do not know, what to insert, you can take this placeholder
• Snackbars
  • Create snackbars for displaying information on the top or bottom of the screen
• Sidebar
  • It has never been easier to create a sidebar
• Spaces
  • Spaces can be really good to breath
• Tabs
  • Create tabs for seperating the content of your page
• Tiles
  • Tiles are useful for creating easy small components, like tweets
• Toasts
  • Toasts are so easy to create with different colored backgrounds.

💎 Be a part of vue-cirrus

If you want to be a part of vue-cirrus, you can make pull requests and add/edit components.

Here is the pull request template.

📒 Changelog

If you have fun looking at some changelogs then you can go here.

👏 Acknowledgements

Thank you to the following libraries for making this library possible.

• Cirrus
• Vue