Victory.css a lightweight CSS framework

Get it

Get

Git

git clone https://github.com/victory-css/victory.css.git [project_name] cd [project_name] npm install
Chrome Firefox Safari Opera Edge EdgeHTML Internet Explorer Internet Explorer 8
Chrome Firefox Safari Opera Edge EdgeHTML IE9+ IE8
✔ ✔ ✔ 8+ ✔ ✔ ✔ ✔ 9+ partial

Get it

Choose your version, put into <head></head>

Standard Victory.css

<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.5/dist/victory.min.css"> <script src="https://cdn.jsdelivr.net/npm/victory.css@0.5/dist/victory.min.js"></script>

Basic Victory.css

<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.5/dist/victory-basic.min.css"> <script src="https://cdn.jsdelivr.net/npm/victory.css@0.5/dist/victory-basic.min.js"></script>

Grid system

The grid system is very simple based on a maximum of 12 columns, and can only be added within an element with .v-row, the system is similar to other frameworks/toolkits (or whatever name you want to give to that)

Size Media-query Classname
All None .v-col-*
≥ 576px @media (min-width: 576px) .v-col-sm-*
≥ 768px @media (min-width: 768px) .v-col-md-*
≥ 992px @media (min-width: 992px) .v-col-lg-*
≥ 1200px @media (min-width: 1200px) .v-col-xl-*

An element with class .v-col-*-1 is equivalent makes the element equivalent to one column, an element with .v-col-*-2 is equivalent to three columns, for each .v-row the total must be 12, however a single .v-row can also contain 24 columns (depending on the sum) because the system itself will break in the desired amount

Grid example

sm-6
md-1
lg-2
xl-2
sm-6
md-4
lg-2
xl-2
sm-6
md-1
lg-2
xl-2
sm-6
md-2
lg-2
xl-2
sm-6
md-3
lg-3
xl-2
sm-6
md-1
lg-1
xl-2

Prevent wrong grid usage

The grid system of Victory.css was adjusted to prevent the developer from failing, something that is quite common in other frameworks / toolkits, in case of using the structure wrong the CSS itself will apply a pseudo-element informing that something is wrong in the structure, as in the following

Wrong element child in v-row

Foo
Bar
Baz
<div class="v-row"> <div class="doo">Foo</div> <!-- invalid element --> <div class="v-col-6">Bar</div> <div class="v-col-6">Baz</div> </div>

Wrong element parent from v-col-*

Foo
Bar
Baz
<div id="wrong-parent" class="anything"> <!-- invalid element --> <div class="v-col-6">Foo</div> <div class="v-col-4">Bar</div> <div class="v-col-2">Baz</div> </div>