AniCSS
Let Us CSS For You
There are two kinds of people in HTML and CSS, thoose who like a clean mark up and heavy CSS and thoose who like minimal CSS and heavy markup. There is no wrong or right way. Just do it your way. AniCSS lies in the heavy markup, AniCSS is great for prototyping, small apps and quick production websites.
Benefits
Quick Prototyping
One CSS File
Generic Use
Easy To Learn
Component Based CSS
Flexible and Adjustable
Animatations
Transform
Rotate Style 1
Rotate Style 2
Rotate 3
Slideshows
The slide slides are more complicated and require knowledge of containers.
STYLING
Below are font colours available:
The colours can be adjusted to your needs, however the default colours are kept a contemporary and easy on the eye colours
black-text <span class="black-text">black-text</span>white-text <span class="white-text black-bg">white-text</span>
red-text <span class="red-text">red-text</span>
blue-text <span class="blue-text">blue-text</span>
green-text <span class="green-text">green-text</span>
yellow-text <span class="yellow-text">yellow-text</span>
light-grey-text <span class="light-grey-text black-bg">light-grey-text</span>
dark-grey-text <span class="dark-grey-text">dark-grey-text</span>
cream-text <span class="cream-text black-bg">cream-text</span>
beige-text <span class="beige-text black-bg">beige-text</span>
LAYOUT
Display Control
Height and Width Control
- w = Width
- h = Height
- 100 = 100%
- 50 = 50%
Adding width and Height is done in percetages when using our classes.
when working with WIDTH we offer (10%, 15%, 20%, 25%, 33%, 49%, 50%, 66%, 75%, 100%).
when working with HEIGHT we offer (25%, 33%, 50%, 66%, 75%, 100%).
Example:
- Width 100% = w-100
<div class="w-100">Width 100</div>
Margin and Padding
- m = margin
- p = padding
- l = left
- r = right
- t = top
- b = bottom
- x = horizontal
- y = vertical
- 1 = 10px
- 2 = 20px
- 3 = 30px
- 4 = 40px
- 5 = 50px
Margin
Example:
- Margin Left
- Margin Right
- Margin Top
- Margin Bottom
- Margin Top and Bottom
- Margin Left and Right
- <p class="ml-1">Margin Left</p>
- <p class="mr-1">Margin Right</p>
- <p class="mt-1">Margin Top</p>
- <p class="mb-1">Margin Bottom</p>
- <p class="my-1">Margin Top and Bottom</p>
- <p class="mx-1">Margin Left and Right</p>
Margin Sizes
Example:
- Margin with 10px
- Margin with 20px
- Margin with 30px
- Margin with 40px
- Margin with 50px
- <p class="m-1">Margin with 10px</p>
- <p class="m-2">Margin with 20px</p>
- <p class="m-3">Margin with 30px</p>
- <p class="m-4">Margin with 40px</p>
- <p class="m-5">Margin with 50px</p>
Padding
Example:
- Padding Left
- Padding Right
- Padding Top
- Padding Bottom
- Padding Top and Bottom
- Padding Left and Right
- <p class="pl-1">Padding Left</p>
- <p class="pr-1">Padding Right</p>
- <p class="pt-1">Padding Top</p>
- <p class="pb-1">Padding Bottom</p>
- <p class="py-1">Padding Top and Bottom</p>
- <p class="px-1">Padding Left and Right</p>
Padding Sizes
Example:
- Padding with 10px
- Padding with 20px
- Padding with 30px
- Padding with 40px
- Padding with 50px
- <p class="p-1">Padding with 10px</p>
- <p class="p-2">Padding with 20px</p>
- <p class="p-3">Padding with 30px</p>
- <p class="p-4">Padding with 40px</p>
- <p class="p-5">Padding with 50px</p>
Dropdown Boxes
The Dropdown boxes is an good way to provide content in a compressed form. This is a good UX principles which means the user can click on the information they want to see without being redirected to another page. An excellent space saver.
<div class="dropdown">
<input id="dropdown1" type="checkbox" checked>
<label for="dropdown1">Overview</label>
<div class="dropdown-box">
<p>"Overview Text"</p>
</div>
</div>
<div class="dropdown">
<input id="dropdown2" type="checkbox">
<label for="dropdown2">HTML</label>
<div class="dropdown-box">
<p>"Html Text" </p>
</div>
</div>
<div class="dropdown">
<input id="dropdown3" type="checkbox">
<label for="dropdown3">CSS</label>
<div class="dropdown-box">
<p>"CSS Text" </p>
</div>
</div>
.dropdown {position: relative; margin: 0 0 5px; width: 100%; overflow: hidden;}
.dropdown input {display: none;}
.dropdown label {cursor: pointer; color: white; font-weight: bold; position: relative; display: block; padding: 10px; background: #96272b;}
.dropdown-box {max-height: 0vh; overflow: hidden; background: #f0dddd; transition: all ease-in-out 0.7s; transform: rotateY(90deg);}
.dropdown-box p {margin: 10px;}
.dropdown input:checked ~ .dropdown-box {transform: rotateY(0deg); max-height:100vh;}
.dropdown label::after {float: right;transition: all ease-in-out 0.3s}
.dropdown input[type=checkbox] + label::after {content: "+";}
.dropdown input[type=checkbox]:checked + label::after {transform: rotate(1040deg);}
GRID SYSTEM
The Grid System is made with CSS Grid. As of 2019 it is not fully supported across all browsers. please check your your consumers would have browsers that have been updated in the last three years. for further information please see caniuse.com
Filter System
The filter system can filter content boxes without javascript. it shows and hides the content-boxes using the radio button hack. once loaded in it requires very little computing power to filter the boxes and is extremely fast.
<div id="filter-system">
<input type="radio" name=filter id="all" checked>
<input type="radio" name=filter id="filter1">
<input type="radio" name=filter id="filter2">
<input type="radio" name=filter id="filter3">
<input type="radio" name=filter id="filter4">
<input type="radio" name=filter id="filter5">
<input type="radio" name=filter id="filter6">
<div id="filter-labels">
<label for="all" class="card-all">All</label>
<label for="filter1" class="card-filter1">Filter1</label>
<label for="filter2" class="card-filter2">Filter2</label>
<label for="filter3" class="card-filter3">Filter3</label>
<label for="filter4" class="card-filter4">Filter4</label>
<label for="filter5" class="card-filter5">Filter5</label>
<label for="filter6" class="card-filter6">Filter6</label>
</div>
<div class="card-list">
<div class="card card-filter1">
<a href="">
<div class="card-content">
<img class="card-content-img"
src="https://images.pexels.com/photos/460672/pexels-photo-460672.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="">
<p class="card-content-copy">Filter 1 copy description</p>
</div>
</a>
</div>
<div class="card card-filter2">
<a href="">
<div class="card-content">
<img class="card-content-img"
src="https://images.pexels.com/photos/237325/pexels-photo-237325.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="">
<p class="card-content-copy">Filter 2 copy description</p>
</div>
</a>
</div>
<div class="card card-filter3">
<a href="">
<div class="card-content">
<img class="card-content-img"
src="https://images.pexels.com/photos/338515/pexels-photo-338515.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="">
<p class="card-content-copy">Filter 3 copy description</p>
</div>
</a>
</div>
<div class="card card-filter4">
<a href="">
<div class="card-content">
<img class="card-content-img"
src="https://images.pexels.com/photos/466685/pexels-photo-466685.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="">
<p class="card-content-copy">Filter 4 copy description</p>
</div>
</a>
</div>
<div class="card card-filter5">
<a href="">
<div class="card-content">
<img class="card-content-img"
src="https://images.pexels.com/photos/34142/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="">
<p class="card-content-copy">Filter 5 copy description</p>
</div>
</a>
</div>
<div class="card card-filter6">
<a href="">
<div class="card-content">
<img class="card-content-img"
src="https://images.pexels.com/photos/17658/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="">
<p class="card-content-copy">Filter 6 copy description</p>
</div>
</a>
</div>
</div>
</div>
/* ===================== */
/* === Filter System === */
/* ===================== */
#filter-system {
display: block;
max-width: 1680px;
width: 100%;
text-align: center;
}
#filter-system input{
display: none;
}
#filter-system #filter-labels{
margin: 30px;
}
#filter-system #filter-labels label {
padding: 20px 30px;
display: inline-block;
font-size: 18px;
}
#filter-system .card-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#filter-system .card {
margin: 10px;
transition: all ease-in 0.3s;
width: 300px;
/* border: 1px black solid; */
}
#filter-system .card .card-content {
}
#filter-system .card .card-content .card-content-img {
width: 100%;
}
#filter-system .card .card-content .card-content-copy {
color: black;
}
/* Each Button Should have 31 combinations. */
/* =========================================================== */
/* ============== Filter1 FILTER BUTTON ================== */
input#filter1:checked~.card-list .card-filter2-filter3-filter4-filter5-filter6,
input#filter1:checked~.card-list .card-filter2-filter3-filter4-filter5,
input#filter1:checked~.card-list .card-filter2-filter3-filter4-filter6,
input#filter1:checked~.card-list .card-filter2-filter3-filter5-filter6,
input#filter1:checked~.card-list .card-filter2-filter4-filter5-filter6,
input#filter1:checked~.card-list .card-filter3-filter4-filter5-filter6,
input#filter1:checked~.card-list .card-filter2-filter3-filter4,
input#filter1:checked~.card-list .card-filter2-filter3-filter5,
input#filter1:checked~.card-list .card-filter2-filter3-filter6,
input#filter1:checked~.card-list .card-filter2-filter4-filter5,
input#filter1:checked~.card-list .card-filter2-filter4-filter6,
input#filter1:checked~.card-list .card-filter2-filter5-filter6,
input#filter1:checked~.card-list .card-filter3-filter4-filter5,
input#filter1:checked~.card-list .card-filter3-filter4-filter6,
input#filter1:checked~.card-list .card-filter3-filter5-filter6,
input#filter1:checked~.card-list .card-filter4-filter5-filter6,
input#filter1:checked~.card-list .card-filter2-filter3,
input#filter1:checked~.card-list .card-filter2-filter4,
input#filter1:checked~.card-list .card-filter2-filter5,
input#filter1:checked~.card-list .card-filter2-filter6,
input#filter1:checked~.card-list .card-filter3-filter4,
input#filter1:checked~.card-list .card-filter3-filter5,
input#filter1:checked~.card-list .card-filter3-filter6,
input#filter1:checked~.card-list .card-filter4-filter5,
input#filter1:checked~.card-list .card-filter4-filter6,
input#filter1:checked~.card-list .card-filter5-filter6,
input#filter1:checked~.card-list .card-filter2,
input#filter1:checked~.card-list .card-filter3,
input#filter1:checked~.card-list .card-filter4,
input#filter1:checked~.card-list .card-filter5,
input#filter1:checked~.card-list .card-filter6 {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
min-width: 0;
}
/* =========================================================== */
/* ============== Filter2 FILTER BUTTON ================== */
input#filter2:checked~.card-list .card-filter1-filter3-filter4-filter5-filter6,
input#filter2:checked~.card-list .card-filter1-filter3-filter4-filter5,
input#filter2:checked~.card-list .card-filter1-filter3-filter4-filter6,
input#filter2:checked~.card-list .card-filter1-filter3-filter5-filter6,
input#filter2:checked~.card-list .card-filter1-filter4-filter5-filter6,
input#filter2:checked~.card-list .card-filter3-filter4-filter5-filter6,
input#filter2:checked~.card-list .card-filter1-filter3-filter4,
input#filter2:checked~.card-list .card-filter1-filter3-filter5,
input#filter2:checked~.card-list .card-filter1-filter3-filter6,
input#filter2:checked~.card-list .card-filter1-filter4-filter5,
input#filter2:checked~.card-list .card-filter1-filter4-filter6,
input#filter2:checked~.card-list .card-filter1-filter5-filter6,
input#filter2:checked~.card-list .card-filter3-filter4-filter5,
input#filter2:checked~.card-list .card-filter3-filter4-filter6,
input#filter2:checked~.card-list .card-filter3-filter5-filter6,
input#filter2:checked~.card-list .card-filter4-filter5-filter6,
input#filter2:checked~.card-list .card-filter1-filter3,
input#filter2:checked~.card-list .card-filter1-filter4,
input#filter2:checked~.card-list .card-filter1-filter5,
input#filter2:checked~.card-list .card-filter1-filter6,
input#filter2:checked~.card-list .card-filter3-filter4,
input#filter2:checked~.card-list .card-filter3-filter5,
input#filter2:checked~.card-list .card-filter3-filter6,
input#filter2:checked~.card-list .card-filter4-filter5,
input#filter2:checked~.card-list .card-filter4-filter6,
input#filter2:checked~.card-list .card-filter5-filter6,
input#filter2:checked~.card-list .card-filter1,
input#filter2:checked~.card-list .card-filter3,
input#filter2:checked~.card-list .card-filter4,
input#filter2:checked~.card-list .card-filter5,
input#filter2:checked~.card-list .card-filter6 {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
min-width: 0;
}
/* =========================================================== */
/* ============== Filter3 FILTER BUTTON ================== */
input#filter3:checked~.card-list .card-filter1-filter2-filter4-filter5-filter6,
input#filter3:checked~.card-list .card-filter1-filter2-filter4-filter5,
input#filter3:checked~.card-list .card-filter1-filter2-filter4-filter6,
input#filter3:checked~.card-list .card-filter1-filter2-filter5-filter6,
input#filter3:checked~.card-list .card-filter1-filter4-filter5-filter6,
input#filter3:checked~.card-list .card-filter2-filter4-filter5-filter6,
input#filter3:checked~.card-list .card-filter1-filter2-filter4,
input#filter3:checked~.card-list .card-filter1-filter2-filter5,
input#filter3:checked~.card-list .card-filter1-filter2-filter6,
input#filter3:checked~.card-list .card-filter1-filter4-filter5,
input#filter3:checked~.card-list .card-filter1-filter4-filter6,
input#filter3:checked~.card-list .card-filter1-filter5-filter6,
input#filter3:checked~.card-list .card-filter2-filter4-filter5,
input#filter3:checked~.card-list .card-filter2-filter4-filter6,
input#filter3:checked~.card-list .card-filter2-filter5-filter6,
input#filter3:checked~.card-list .card-filter4-filter5-filter6,
input#filter3:checked~.card-list .card-filter1-filter2,
input#filter3:checked~.card-list .card-filter1-filter4,
input#filter3:checked~.card-list .card-filter1-filter5,
input#filter3:checked~.card-list .card-filter1-filter6,
input#filter3:checked~.card-list .card-filter2-filter4,
input#filter3:checked~.card-list .card-filter2-filter5,
input#filter3:checked~.card-list .card-filter2-filter6,
input#filter3:checked~.card-list .card-filter4-filter5,
input#filter3:checked~.card-list .card-filter4-filter6,
input#filter3:checked~.card-list .card-filter5-filter6,
input#filter3:checked~.card-list .card-filter1,
input#filter3:checked~.card-list .card-filter2,
input#filter3:checked~.card-list .card-filter4,
input#filter3:checked~.card-list .card-filter5,
input#filter3:checked~.card-list .card-filter6 {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
min-width: 0;
}
/* =========================================================== */
/* ============== Filter4 FILTER BUTTON ================== */
input#filter4:checked~.card-list .card-filter1-filter2-filter3-filter5-filter6,
input#filter4:checked~.card-list .card-filter1-filter2-filter3-filter5,
input#filter4:checked~.card-list .card-filter1-filter2-filter3-filter6,
input#filter4:checked~.card-list .card-filter1-filter2-filter5-filter6,
input#filter4:checked~.card-list .card-filter1-filter3-filter5-filter6,
input#filter4:checked~.card-list .card-filter2-filter3-filter5-filter6,
input#filter4:checked~.card-list .card-filter1-filter2-filter3,
input#filter4:checked~.card-list .card-filter1-filter2-filter5,
input#filter4:checked~.card-list .card-filter1-filter2-filter6,
input#filter4:checked~.card-list .card-filter1-filter3-filter5,
input#filter4:checked~.card-list .card-filter1-filter3-filter6,
input#filter4:checked~.card-list .card-filter1-filter5-filter6,
input#filter4:checked~.card-list .card-filter2-filter3-filter5,
input#filter4:checked~.card-list .card-filter2-filter3-filter6,
input#filter4:checked~.card-list .card-filter2-filter5-filter6,
input#filter4:checked~.card-list .card-filter3-filter5-filter6,
input#filter4:checked~.card-list .card-filter1-filter2,
input#filter4:checked~.card-list .card-filter1-filter3,
input#filter4:checked~.card-list .card-filter1-filter5,
input#filter4:checked~.card-list .card-filter1-filter6,
input#filter4:checked~.card-list .card-filter2-filter3,
input#filter4:checked~.card-list .card-filter2-filter5,
input#filter4:checked~.card-list .card-filter2-filter6,
input#filter4:checked~.card-list .card-filter3-filter5,
input#filter4:checked~.card-list .card-filter3-filter6,
input#filter4:checked~.card-list .card-filter5-filter6,
input#filter4:checked~.card-list .card-filter1,
input#filter4:checked~.card-list .card-filter2,
input#filter4:checked~.card-list .card-filter3,
input#filter4:checked~.card-list .card-filter5,
input#filter4:checked~.card-list .card-filter6 {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
min-width: 0;
}
/* =========================================================== */
/* ============== Filter5 FILTER BUTTON ================== */
input#filter5:checked~.card-list .card-filter1-filter2-filter3-filter4-filter6,
input#filter5:checked~.card-list .card-filter1-filter2-filter3-filter4,
input#filter5:checked~.card-list .card-filter1-filter2-filter3-filter6,
input#filter5:checked~.card-list .card-filter1-filter2-filter4-filter6,
input#filter5:checked~.card-list .card-filter1-filter3-filter4-filter6,
input#filter5:checked~.card-list .card-filter2-filter3-filter4-filter6,
input#filter5:checked~.card-list .card-filter1-filter2-filter3,
input#filter5:checked~.card-list .card-filter1-filter2-filter4,
input#filter5:checked~.card-list .card-filter1-filter2-filter6,
input#filter5:checked~.card-list .card-filter1-filter3-filter4,
input#filter5:checked~.card-list .card-filter1-filter3-filter6,
input#filter5:checked~.card-list .card-filter1-filter4-filter6,
input#filter5:checked~.card-list .card-filter2-filter3-filter4,
input#filter5:checked~.card-list .card-filter2-filter3-filter6,
input#filter5:checked~.card-list .card-filter2-filter4-filter6,
input#filter5:checked~.card-list .card-filter3-filter4-filter6,
input#filter5:checked~.card-list .card-filter1-filter2,
input#filter5:checked~.card-list .card-filter1-filter3,
input#filter5:checked~.card-list .card-filter1-filter4,
input#filter5:checked~.card-list .card-filter1-filter6,
input#filter5:checked~.card-list .card-filter2-filter3,
input#filter5:checked~.card-list .card-filter2-filter4,
input#filter5:checked~.card-list .card-filter2-filter6,
input#filter5:checked~.card-list .card-filter3-filter4,
input#filter5:checked~.card-list .card-filter3-filter6,
input#filter5:checked~.card-list .card-filter4-filter6,
input#filter5:checked~.card-list .card-filter1,
input#filter5:checked~.card-list .card-filter2,
input#filter5:checked~.card-list .card-filter3,
input#filter5:checked~.card-list .card-filter4,
input#filter5:checked~.card-list .card-filter6 {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
min-width: 0;
}
/* =========================================================== */
/* ============== Filter6 FILTER BUTTON ================== */
input#filter6:checked~.card-list .card-filter1-filter2-filter3-filter4-filter5,
input#filter6:checked~.card-list .card-filter1-filter2-filter3-filter4,
input#filter6:checked~.card-list .card-filter1-filter2-filter4-filter5,
input#filter6:checked~.card-list .card-filter1-filter3-filter4-filter5,
input#filter6:checked~.card-list .card-filter2-filter3-filter4-filter5,
input#filter6:checked~.card-list .card-filter1-filter2-filter3,
input#filter6:checked~.card-list .card-filter1-filter2-filter4,
input#filter6:checked~.card-list .card-filter1-filter2-filter5,
input#filter6:checked~.card-list .card-filter1-filter3-filter4,
input#filter6:checked~.card-list .card-filter1-filter3-filter5,
input#filter6:checked~.card-list .card-filter1-filter4-filter5,
input#filter6:checked~.card-list .card-filter2-filter3-filter4,
input#filter6:checked~.card-list .card-filter2-filter3-filter5,
input#filter6:checked~.card-list .card-filter2-filter4-filter5,
input#filter6:checked~.card-list .card-filter3-filter4-filter5,
input#filter6:checked~.card-list .card-filter1-filter2,
input#filter6:checked~.card-list .card-filter1-filter3,
input#filter6:checked~.card-list .card-filter1-filter4,
input#filter6:checked~.card-list .card-filter1-filter5,
input#filter6:checked~.card-list .card-filter2-filter3,
input#filter6:checked~.card-list .card-filter2-filter4,
input#filter6:checked~.card-list .card-filter2-filter5,
input#filter6:checked~.card-list .card-filter3-filter4,
input#filter6:checked~.card-list .card-filter3-filter5,
input#filter6:checked~.card-list .card-filter4-filter5,
input#filter6:checked~.card-list .card-filter1,
input#filter6:checked~.card-list .card-filter2,
input#filter6:checked~.card-list .card-filter3,
input#filter6:checked~.card-list .card-filter4,
input#filter6:checked~.card-list .card-filter5 {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
min-width: 0;
}
