CSSVizo
Welcome to CSSVizo - messy, not-good-enough CSS library for doodling on websites and Electron apps.
Download
Go to github repo and download one file from css folder.
Edit
1. Clone repo: git clone https://github.com/mativizo/cssvizo.git
2. Install dependencies npm install
3. Watch or build npm start/npm run build
CDN
Soon.
Contents:
Badges Breakpoints Buttons Cards Colors Containers Electron Forms Grids Headers Images Navbars * Notifications Paragraphs Scrollbars Utils *Links with * are still to-do.
Badges
You can use class .badge with various background colors.
Red badge 14
Default badge 524
<span class="badge">432</span>
Breakpoints
In CSSVizo we have 5 breakpoints:
Extra small: .something-xs
Small: .something-sm
Medium: .something-md
Large: .something-lg
Extra large: .something-xl
Buttons
You can use few button classes.
<button>Primary</button">
<button class="btn-{color}>Colored"</button>
<button class="btn-{color}-outline">Colored & outlined</button>
<button class="btn-lg">Big one</button>
<button class="btn-sm">Small button</button>
Cards
Card element is created by .card class.
This is card title
This is card content.
<div class="card">
<p class="title">This is card title</p>
<p class="content">This is card content.</p>
</div>
Colors
Colors can be used as background, text color, buttons, badges, etc. by -{color} suffix or by adding bg-{color}
Red text:
<p class="text-red"></p>
Red background, light text:
<div class="bg-red text-light"></div>
<button class="btn-purple"></button>
Available colors:
Containers
CSSVizo includes two containers - .container and .container-fluid.
Container fluid takes full width, normal container is centered and takes breakpoint's size.
This is normal container.
This is fluid container.
Electron
Electorn utilities, like titlebar and special container can be found at CSSVizo Electron page.
Forms
Form inputs:
Grids
Max 12 cols grid with flexbox.
.col-4.bg-red.p-3
.col-4.bg-pink.p-3
.col-4.bg-light.p-3
<div class="row my-4">
<div class="col-4 bg-red p-3">.col-4.bg-red.p-3</div>
<div class="col-4 bg-pink p-3">.col-4.bg-pink.p-3</div>
<div class="col-4 bg-light p-3">.col-4.bg-light.p-3</div>
</div>
You can add breakpoints, like .col-md-12.col-lg-4 to make grid responsive.
Headers
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Images are responsive automatically
Image can be used as a background with class .bg-image and style="background-image: url('...');:
Hello!
Look at my background!
Or with extra layer:
Hello!
Look at my background!
.bg-image.bg-fixed with style="background-image: url('...');"
Hello!
Look at my background!
Background can be fixed too.
Navbars
In progress
Notifications
Hello there!
This is notification .notify!
You can use bg-{color} to customize this
You have to add element with close class to get "x"
Paragraphs
This is paragraph.
This is paragraph with color.
Scrollbars
Scrollbars are customizable with colors too!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur, nobis quos omnis in nostrum labore porro suscipit, voluptate blanditiis voluptatum quisquam ea aliquid architecto itaque repudiandae doloribus rerum adipisci.
Utils
Paddings
Paddings can be set to all directions, left, right, top, bottom, x-axis or y-axis and have 7 sizes.
You can use it by pattern: p{type}-{size}, e.g. pt-5 (padding top 5), px-2 (padding left and right 2
.bg-orange.my-2.p-3
.bg-orange.my-2.px-3
Margins
Margin can be set to all directions, left, right, top, bottom, x-axis or y-axis and have 7 sizes.
You can use it by pattern: m{type}-{size}, e.g. mt-5 (margin top 5), mx-2 (margin left and right 2
.bg-red.m-1.p-3
.bg-red.ml-6.p-3
.bg-blue.mx-6.p-3
.bg-blue.m-auto.w-50.p-3