Vue components for the Cirrus CSS framework

Vue components for the Cirrus CSS framework

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.

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.

If you want to see the documentation click here

Quick Install

  1. Install with npm
npm install vue-cirrus
  1. Include the following in your public.html file
<link
  href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
  rel="stylesheet"
/>

<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';

Vue.use(VueCirrus);

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

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

Vue.use(VNavbar);
  1. 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
  • 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 grid is really important in the modern world
  • 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.

Download Details:

Author: FlorianWoelki

Live Demo: https://florianwoelki.github.io/vue-cirrus/#/

GitHub: https://github.com/FlorianWoelki/vue-cirrus

vuejs vue javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router