victory.css

Victory.css is a simply and lightweight front-end framework/toolkit (call it what you want) for developing fast.

Download

Use CDN:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/victory.css@0.6/dist/victory.min.css">
<script src="https://cdn.jsdelivr.net/npm/victory.css@0.6/dist/victory.min.js"></script>

Or download from:

• https://raw.githubusercontent.com/brcontainer/victory.css/0.6.1/dist/victory.min.css
• https://raw.githubusercontent.com/brcontainer/victory.css/0.6.1/dist/victory.min.js

then use in your project put like this:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="victory.min.css">
<script src="victory.min.js"></script>

Browser Support

Chrome	Firefox	Safari	Opera	Edge	EdgeHTML	IE9+	IE8
✔	✔	✔ 8+	✔	✔	✔	✔	(partial)

Note: Victory.css has some fallbacks for old browsers without media-queries support, such as Internet Explorer 8, preventing your site from breaking

Basic vs Standard

Basic contains only basic resources, victory-basic.min.js contains only polyfills, about differences see:

Resource	Standard	Basic	About
border.scss	✔	✔	Utility for arround any element
clear-both.scss	✔	✔	Clear both "global"
colors.scss	✔	✔	Background and border color classes
commons.scss	✔	✔	Various classes of common use
container.scss	✔	✔	container (adpatative width @media-query) and container-fluid
grid.scss	✔	✔	Grid system
normalize.scss	✔	✔	Basic normalize and fallback for html5 tags for old browsers
text-align.scss	✔	✔	text-align basead in view-port size
visibility.scss	✔	✔	visibility: and display: basead in view-port size
arrow.scss	✔	-	Various arrow "icons"
badge.scss	✔	-	Badges system
button.scss	✔	-	Styled buttons
code.scss	✔	-	Pre defined style for <code> tags
divider.scss	✔	-	Style horizontal lines (like <hr>)
fix-render.scss	✔	-	fix-render (fix bug in elements with position:fixed on enter Chromium/Chrome DevTools)
input.scss	✔	-	Styled inputs
kbd.scss	✔	-	Pre defined style for <kbd> tags
nav.scss	✔	-	Navbar system
resize.scss	✔	-	Resize elements (only Desktop)
slide.scss	✔	-	Slide system
table.scss	✔	-	Styled tables
underline.scss	✔	-	Underline text animated
Minified size	42kB	16kB	-
Gziped size	7.5kB	2.7kB	-

---

Development

To contribute or modify download using git (require npm):

git clone https://github.com/inphinit/Victory.css.git [project_name]
cd [project_name]
npm install

After changes files in ./src folder execute this command for deploy:

npm run build

Or see another commands

Commands

Command	Description
npm run readme	Generate README.html from README.md
npm run examples	Generate examples/index.html for link all examples
npm run mergecss	For create only victory.css without create prefixes and without min version
npm run prefix	For put prefix properties in victory.css
npm run mincss	For create min version from victory.css
npm run mergejs	For create only victory.js without min version
npm run minjs	For create min version from victory.js
npm run standard	Deploy without create slim and minimal versions, auto-execute follow commands mergecss, prefix, mincss, mergejs, minjs
npm run build	Full deploy, auto-execute follow commands mergecss, prefix, mincss, mergejs, minjs, basic:mergecss, basic:mincss, basic:mergejs, basic:minjs, minimal:mergecss, minimal:mincss in sequence

Basic commands

Command	Description
npm run basic:mergecss	For create only victory-basic.css without min version
npm run basic:mincss	For create min version from victory-basic.css
npm run basic:mergejs	For create only victory-basic.js without min version
npm run basic:minjs	For create min version from victory-basic.js
npm run basic	Minimal deploy, auto-execute follow commands basic:mergecss, basic:mincss, basic:mergejs and basic:minjs in sequence