ILUS.CSS

ilus is fast because of its compact size and structure it takes less time to load and it has zero dependencies ##getting started getting ilus into your webpage is too easy

whats new

tags
animations
dropdowns
tables
new colors
about
importing
classes
utility
more

importing

All ILUS css links are given below :-

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

Tables

styling table is a pain but ilus3.css brings you prestyled customisable table

item	cost	name
1	500	banana
2	400	shoe
3	100,000	penguin

all you need to do to make a regular table look like this is add a class of .table to the table element

Dropdowns

hover over the button
to make a dropdown first you need a div element with a class of .dropdown then inside it place a button with class .btn and also add another div with class .drop-conent inside div with class .drop-content add &lta&gtanchor tags (these are the dropdown buttons)


         &ltdiv class="dropdown"&gt
         &ltbutton class="btn"&gthover&lt/button&gt 
         
&ltdiv class="drop-content"&gt 
         &lta>help&lt/a&gt

         &lta>setup&lt/a&gt

         &lta>home&lt/a&gt

         &lt/div&gt

          &lt/div&gt

New colors

.steel .aqua .maroon .indigo .alpha .auto also available as text colors .text-steel,.text-maroon etc

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

Animations

ilus3 has 3 animations

spin
fade
zoom

Spin

adding a class of .anime-spin to any element makes it spin 360° one time (1s)

Zoom

adding a class of .anime-zoom to any element makes it zoom in one time (1s)

Fade

adding a class of .anime-fade to any element makes fade in one time (1s)

Infinite animations

to repeat the animation infinite times use .anime-forever class

Animation linear

animation timing will be at constant speed if you used class of .anime-constant 45 45 did you notice that the red badge has a very even rotation than black badge this is because of .anime-constant

Animation delay

to delay an animation by 1second use .anime-delayed class

Animation speed

speed of the animation can be controlled using

.anime-fastest
.anime-faster
.anime-fast
.anime-slow
.anime-slower
.anime-slowest

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

Buttons

ilus has a much more flat and good looking button it even has its own animation

simple button

a simple button can be made by adding the btn class to button element btn class also works for anchor tags(links)

disabled button

you can make a simple button disabled by adding disabled attribute to it

custom button

custom elements

all components in ilus.css are customisable you can use color classes to set the background color and text-clasess to set text color

Inputs

you are probably tired of the usual input ilus.css has a much better looking input

Sliders

sliders are ugly and styling them is hard ilus does the hard job for you and gives you an awsome range slider

all you need to do for making one of this is make an input with type of range and add the class "slider" to it

toggles

want an awsome toggle add class "toggle" to a input with type attribute of checkbox

default toggle

mini toggle

click here to learn how to use toggles and sliders in ilus

cards

well cards are just cards and can be made by adding class of 'card' to a div

hello world

i am a card which says hello world

badges

badges are used for representing numbers and symbols etc

567

custom badge

365

badges can be made by adding the class "badge" to a div

navbar

a simple fixed navbar can be made by adding "nav" class to a nav element

note: while using a navbar please add "wrap" class to the body

sidenav

a side nav could be made by adding class of "sidenav" to a div. the unorderd or ordered list placed inside a sidenav gets a special styling and a cool hover effect

To see an example press the menu button on the navbar of this website

alert:sidnav class will hide itself inorder to use it you need a menu button which has an onclick attribute calling a function that sets the width of the div with class sidenav (for an example function see the js tab of this code)

lists

regular html list elements are nice but for more cooler lists you want an ilus list

list

cool
amazing
marvellous
epic?

an ilus list can be made by adding the class of "list" to any regular &ltul> or &ltol>

note

notes can be used to give tips and important messages to the user there are 4 types of notes

default note

default note a default note could be made by just adding a "note" class to any div

victory note

victory

a default note could be turned into a victory note if you add an attribute of "victory" in the divhere is a link

alert note

alert: a default note can be turned into an alert note if you add an attribute of "alert" in the div

warn note

warning: a regular note could be turned to a warning note if you add the attribute of "warn" in the div

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

positioning classes

right

add class "right" to any element to position it right

left

add class"left" to any element for positioning it left

center

add class "center" to a parent element to center its child elements

text positioning

text-center

add 'text-center' class to center the text

text-right

adding class "text-right" aligns the text to the right

fonts

ilus comes with some good fonts you can use and you dont even have to remeber their names because ilus numbers the fonts

font-1
font-2
font-3
font-4

eg adding the "font-4" class to a h1 tag changes its font
font-1 is roberto default
font-2 is open sans
font-3 is comfortaa
font-4 is cinzel

colors

color classes can be used on any element to change its background color to it

red
salmon
lime
green
blue
cyan
gold
yellow
violet
purple
teal
sea
rose
pink
orange
orangy
brown
wood
light
grey
bright
dark
night

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

text-color

ilus v2 introduces text colors now text can be coloured using the color classes but you should add "text-" infront of the color
for eg "text-red"

text-red
text-salmon
text-lime
text-green
text-blue
text-cyan
text-gold
text-yellow
text-violet
text-purple
text-teal
text-sea
text-rose
text-pink
text-orange
text-orangy
text-brown
text-wood
text-light
text-grey
text-bright
text-dark
text-night
text-auto
text-alpha

note:"text-auto" makes the text adapt to its background with a darker tone while "text-alpha" does the same with a brighter tone

utility

sharp

"sharp" class can be used to make a rounded object sharp

img

"img" class is used to make images look better

bg-img

"bg-img" class can be used to align the background image properly

hide

hide class can be used on any element to hide it

show

show class can be used to show any hidden element

circle

circle class changes any element to a circle shaped one

alert: only works if the width and height of the element are the same

pill

pill class can be used on any element to give it a pill shape

flat

flat class removes all the shafow from an element

depth

depth class adds shadow to an element

CSS Text Animation

Login SignUp Forms

Loading Animations

Fun Javascript Tutorials

Button Animations /Button Effects

buttons

ilus has a way better button to replace default browser button to make a regular button an ilus button just add the class .btn to it

ilus buttons can be coloured with ilus colour classes or by using regular css

text inputs

ilus has a better looking in input too to make a regular input an ilus input add a class of .inp to it

.inp class can also be used on textarea

toggles & radios

in ilus checkboxes can take the form of toggles and radios becomes better looking just add a class of .toggle to a checkbox input to make it look like a toggle switch and add a class of .radio to a radio input to make it look awsome

you can add an attribute of [mini] to a toggle to make its tip smaller

sliders

ilus has an awsome looking range slider to make a regular range slider look like an ilus slider just add a class of .slider to it

learn more about sliders & toggles

codes & tags


                       i am a code block

&lti am a tag>

ilus makes code blocks & inline codes look better
tags can be made using a &lttag&gt&lt/tag&gttag text placed inside the tag tag will look like a code

regular code element can be made to look like ilus code by adding a class of .code to it

tables

#	name	address	balance
1	jade	local street.add	500$
2	crimeson	ht street.add	5000$
3	timmy	ed street.sub	300$

tables are hard to style but ilus does the hard job for you to make a table look better just add the class of .table to it

adding a class of .active to a table makes each row hoverable

lists

list item
list item
list item
list item

lists are a better version &ltul&gt&lt/ul> they can be made by adding a class of .list to a &ltul&gt&lt/ul> or &ltol&gt&lt/ol> adding a class of .active to a list makes each item hoverable

badges

badges can be used to show small amount of info to make one add the class of.badge on a span or div element
badges can be used on buttons see how

notes

exaple text exaple text exaple text exaple text exaple text exaple text exaple text exaple text

notes show important info to the user note can be made by adding a class of .note to a div the colour theme of the notes can be changed by adding attributes of alert,victory or warn to the note

basic cards

card

this is an example card btw example text example textexample textexample textexample textexample textexample textexample textexample textexample text

cards can be used to display information in card format. to make a card make a div add a class of .card and .card-content to it

tooltips

hover me

tooltips can be used to show brief information about any part of your webpage to enable tooltips on an element just give them an attribute of data-tooltip={text to be displayed}

loaders

loaders can be used to show that something is being loaded or some action is taking place

to make one make a div with class of .loader and place 3 empty spans inside that div

    &ltdiv class="loader">
        &ltspan>&lt/span>
        &ltspan>&lt/span>
        &ltspan>&lt/span>
&lt/div>

copy

placing a loader inside button with .btn class makes a loader button

dropdowns

dropdowns are just dropdowns
to make one make a div with class .dropdown add an ilus button and then add another div inside that div with the class of.dropdown-content

&ltdiv class="dropdown">
&ltbutton class="btn">dropdown btn&ltbutton&gt
&ltdiv class="dropdown-content">
            &lta>hellp&lt/a>
            &lta>setup&lt/a>
            &lta>code&lt/a>
        &lt/div>
&lt/div&gt

copy

bars

bars are progress bars in ilus

50%

to make one apply a class of .bar to a div and then inside it place a span with a class of .bar-status this is the loaded portion of the bar you can use regular css to control the width of the bar thus controlling loaded value


  &ltdiv class="bar">
    &ltspan class="bar-status" style="width:70%;">
        &ltdiv class="bar-label">70%&lt/div>
    &lt/span>
  &lt/div>

copy

of course you can change the color of progress bars loaded section by giving a color class or applying regular css to div with class .bar-status

accordions

section-1

example text example text example text example text example text example text example text example text

section-2

example text example text example text example text example text example text example text example text

section-3

example text example text example text example text example text example text example text example text

accordions are made by making a div with class .accordion now each section is. a span tag inside this div

each section contains an input of type radio with their name attribute being same all throughout the sections in that accordion and each with its own unique id
each section should also contain a label with "for" attributes value being the same as the id of the radio input in that section text inside this label tag is the visible part of the accordion

now for the hidden part, in each section place a div with class .accordion-content the text placed inside this div wont be shown unless the section is clicked


&ltdiv class="accordion">
&ltspan>
    &ltlabel for="ac-1">section-1&lt/label>
    &ltinput type="radio" name="acc" id=ac-1>
    &ltdiv class="accordion-content">
        example text  example text  example text  example text  example text  example text  example text  example text 
    &lt/div>
&lt/span>
&ltspan>
    &ltlabel for="ac-2">section-2&lt/label>
    &ltinput type="radio" name="acc" id=ac-2>
    &ltdiv class="accordion-content">
        example text  example text  example text  example text  example text  example text  example text  example text 
    &lt/div>
&lt/span>
&ltspan>
    &ltlabel for="ac-3">section-3&lt/label>
    &ltinput type="radio" name="acc" id=ac-3>
    &ltdiv class="accordion-content">
        example text  example text  example text  example text  example text  example text  example text  example text 
    &lt/div>
&lt/span>
&lt/div>

copy

instead of using radio inputs use checkbox inputs if you want multiple sections to be opened at once in your accordion

navbars

template for fully functional responsive navbar which collapses into a sidenav in smaller screens


&ltnav class="nav">
    &ltdiv class="nav-logo">logo&lt/div>
    &ltdiv class="nav-menu hide-from-md" onclick="openMenu()"&gt
        &ltspan class="burger-menu">&lt/span>
    &lt/div>
    &ltul class="hide-till-md">
       &ltli>menu item &lt/li>
       &ltli>menu item &lt/li>  
       &ltli>menu item &lt/li>  
       &ltli>menu item &lt/li>  
    &lt/ul>
&lt/nav>
&ltdiv class="sidenav hide-from-md">
  &ltul>
       &ltli>menu item &lt/li>
       &ltli>menu item &lt/li>  
       &ltli>menu item &lt/li>  
       &ltli>menu item &lt/li>  
    &lt/ul>
&lt/div>



&ltscript&gt
    function openMenu(){
        document.querySelector(".sidenav").classList.toggle("active")
    document.querySelector(".nav-menu").classList.toggle("opened")
    }
&lt/script>

copy

nav

adding a class of .nav to a nav element makes the nav an ilus nav

nav-logo

inside the ilus nav a div with class .nav-logo can be used as the logo for your site

nav-menu

inside the ilus nav a div with class .nav-menu represents the menu button to make it look like a burger menu add a span with class .burger-menu inside the nav-menu

you can also add an onclick attribute to trigger the function that opens the sidenav to the nav menu

you can also add an class of .hide-from-md to the nav menu to hide it on large devices where a sidenav is unecessary

regular menu

inside the ilus nav just add a ul with each list item representing the nav menu item also add a class of .hide-till-md if you dont want this menu to be shown on smaller devices

wrap

please add a class of .wrap to the body tag after making the nav it helps in aligning the content properly

sidenav

sidenav is a div with class .sidenav outside the ilus nav
inside the sidenav we add a ul with each list item representing a side nav menu option

topnav

adding a class of .topnav to a div with class .sidenav makes it a top fixed sidenav

hiding sidenavs

to hide a sidenav on larger devices add a class of .hide-from-md to it
sidenavs are hidden by default and are only visible when an active class is added to it

function for sidenav opening

to open the sidenav you need to write a simple javascript function


    function openMenu(){
        document.querySelector(".sidenav").classList.toggle("active")
    document.querySelector(".nav-menu").classList.toggle("opened")
    }

copy

all we are doing here is selecting the sidenav and toggling active class to it and we are also selecting nav-menu and toggling an opened class making it a close button when the sidenav is opened

responsive grid

ilus-5 comes with a 12column responsive grid system too it makes it a lot easier to align elements

to use the grid make a div with class .container and inside the container add another div with class.row this row has 12available places you can add elements with class.col inside the row a column width can be defined using classes from col-1 tocol-12 you can also offset an element using offset-1 to offset-12

you can also break the fluid grid into block in smaller devices to do that add a class of .break-at-sm or break-at-md to the container

utilities

alignment

alignment classes helps in positioning elements

.left:floats an element to left

.right:floats an element to right

.center:centers an element

.align-top:align an element to top

.align-left:align an element to left

.align-right:align an element to right

make sure that position property is set to something before using the align-top,bottom,left,right

text positioning

text positioning is exclusively for text

.text-left:aligns text to left

.text-right:aligns text to right

.text-center:centers the text

positions

position classes sets the position property

.fixed:sets position to fixed

.relative:sets position to relative

.absolute:sets position to absolute

display

display classes can be used to set display property

.hide:hides an element

.block:sets display to block

.grid:sets display to grid

.flex:sets display to flex

width & height

ilus provides a few classes for setting width & height based on view port size

.width-full:sets width to 100% of viewport width

.width-half:sets width to 50% of viewport width

.height-full:sets height to 100% of viewport height

.height-half:sets height to 50% of viewport height

font styles

ilus imports awsome fonts for you from google fonts and provides classes to use them

.font-1:sets font to roberto

.font-2:sets font to montserrat

.font-3:sets font to comfortaa

.font-4:sets font to cinzel

.font-mono:sets font to monospace

.font-cursive:sets font to cursive

.font-ariel:sets font to ariel

font sizes

ilus provides few font size classes .font-small .font-regular .font-medium .font-large .font-xl .font-jumbo fonts can also be changed using font-size-1 to font-size-8 classes

text boldness

.text-thinnest:sets to thinnest text

.text-thinner:sets to thinner text

.text-thin:sets to thin text boldness

.text-regular:sets to regular text boldness

.text-medium:sets fo medium text boldness

.text-bold:sets to bold text

.text-bolder:sets to bolder text

.text-boldest:sets to boldest text

border radius

border radius can be controlled by rounded classes .rounded class makes border radius around 7px round .lil-round class makes border radius a little bit less rounder .pill class makes border radius so high that it makes elements look like a pill .sharp class makes border radius around 0px round

.circle class makes elements a circle or ellipse

box shadow

box shadow classes lets you make easier box shadows .flat class removes box shadow .shadow class adds basic box shadow .depth class adds inner box shadow

pack

pack classes adds padding to an element

.pack-1 adds a padding of 0.25rem to any element

.pack-2 adds a padding of 0.5rem to any element

.pack-3 adds a padding of 0.75rem to any element

.pack-4 adds a padding of 1rem to any element

.pack-5 adds a padding of 1.5rem to any element

.pack-6 adds a padding of 3rem to any element

.pack-0removes padding from any element

margin

margin classes adds margin to an element

.margin-1 adds a margin of 0.25rem to any element

.margin-2 adds a margin of 0.5rem to any element

.margin-3 adds a margin of 0.75rem to any element

.margin-4 adds a margin of 1rem to any element

.margin-5 adds a margin of 1.5rem to any element

.margin-6 adds a margin of 3rem to any element

.margin-0removes margin from any element

wrap

wrap classes are used to set padding top & bottom

.wrap adds padding-top of 5rem

.wrap-just adds padding-top of 3rem

.wrap-bottom adds padding-bottom of 5rem

.wrap-bottom-just adds padding-bottom of 3rem

images

just add .img class to an image to make it responsive

background image

to make a background image align properly add the class.bg-img to the element

glass

add a class of .glass to any element to make it glassmorphic

colors

ilus has a awsome set of colours adding color classes to an element changes its background color to that color salmon red apple rose pink amber orange vermilion maroon yellow gold sand green lime olive blue cyan indigo teal sea aqua violet purple magenta light grey steel alpha auto bright night dark brown coco wood transparent add a text- infront of the color class to make it work on text for eg text-red

variable colours

all ilus colors are stored in variables so you can use them in regular css
for eg var(--teal)

animations

ilus can also serve as a mini animation library it comes with handy animation classes
toggle animation

left

add a class .anime-left to any element to give it a nice slide left animation

right

add a class .anime-right to any element to give it a nice slide right animation

top

add a class .anime-top to any element to give it a nice slide top animation

down

add a class .anime-down to any element to give it a nice slide down animation

zoom

add a class .anime-zoom to any element to give it a nice zoom animation

spin

add a class .anime-spin to any element to give it a nice spin animation

fade

add a class .anime-fade to any element to give it a nice fade animation

flip

add a class .anime-flip to any element to give it a nice flip animation

jelly

add a class .anime-jelly to any element to give it a nice wiggly animation animation

infinite animations

to repeat the animation infinite times use .anime-forever class anime-twice andvanime-thrice also exists wich plays animation 2 times & 3times respectively

animation linear

animation delay

to delay an animation by 1second use .anime-delayed class

animation alternate

use class .anime-alter to play animation in reverse & forwards alternatively

animation reverse

use class .anime-reverse to play the animation in reverse

animation forwards

using the class .anime-forwards stops the animation at last frame

animation speed

speed of the animation can be controlled using

.anime-fastest
.anime-faster
.anime-fast
.anime-slow
.anime-slower
.anime-slowest

What is ILUS CSS

ILUS.CSS

whats new

importing

Tags

Tables

Dropdowns

New colors

Animations

Spin

Zoom

Fade

Infinite animations

Animation linear

Animation delay

Animation speed

Buttons

simple button

disabled button

custom button

custom elements

Inputs

Sliders

toggles

default toggle

mini toggle

cards

hello world

badges

custom badge

navbar

sidenav

lists

list

note

default note

victory note

victory

alert note

warn note

positioning classes

right

left

center

text positioning

text-center

text-right

fonts

colors

text-color

utility

sharp

img

bg-img

hide

show

circle

pill

flat

depth

buttons

text inputs

toggles & radios

sliders

codes & tags

tables

lists

badges

notes

basic cards

card

tooltips

loaders

dropdowns

bars

accordions

navbars

nav

nav-logo

nav-menu