Victory.css NPM

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:

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