Welcome to CSSVizo - messy, not-good-enough CSS library for doodling on websites and Electron apps.
Go to github repo and download one file from css folder.
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
Soon.
Contents:
Badges Breakpoints Buttons Cards Colors Containers Electron Forms Grids Headers Images Navbars * Notifications Paragraphs Scrollbars Utils *Links with * are still to-do.
You can use class .badge with various background colors.
Red badge 14
Default badge 524
<span class="badge">432</span>
In CSSVizo we have 5 breakpoints:
Extra small: .something-xs
Small: .something-sm
Medium: .something-md
Large: .something-lg
Extra large: .something-xl
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>
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 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>
<div class="bg-red text-light"></div>
<button class="btn-purple"></button>
CSSVizo includes two containers - .container and .container-fluid.
Container fluid takes full width, normal container is centered and takes breakpoint's size.
Electorn utilities, like titlebar and special container can be found at CSSVizo Electron page.
Form inputs:
Max 12 cols grid with flexbox.
<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.
Image can be used as a background with class .bg-image and style="background-image: url('...');:
Look at my background!
Or with extra layer:
Look at my background!
.bg-image.bg-fixed with style="background-image: url('...');"
Look at my background!
Background can be fixed too.
In progress
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"
This is paragraph.
This is paragraph with color.
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.
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
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