What is ILUS CSS

What is ILUS.CSS

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

Follow us on social media platforms

whats new

  • tags
  • animations
  • dropdowns
  • tables
  • new colors
  • about
  • importing
  • classes
  • utility
  • more

importing

All ILUS css links are given below :-

Tags

tags are small containers for displaying a small part of a code eg &ltdiv&gt
tags can be made by adding .tag class to a span or by using a &lttag&gt&lt/tag&gt element info: bg color and text-color of a tag can be changed using text & color classes

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

hover me

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

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

  1. .anime-fastest
  2. .anime-faster
  3. .anime-fast
  4. .anime-slow
  5. .anime-slower
  6. .anime-slowest


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

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

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

  1. red
  2. salmon
  3. lime
  4. green
  5. blue
  6. cyan
  7. gold
  8. yellow
  9. violet
  10. purple
  11. teal
  12. sea
  13. rose
  14. pink
  15. orange
  16. orangy
  17. brown
  18. wood
  19. light
  20. grey
  21. bright
  22. dark
  23. night

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”

  1. text-red
  2. text-salmon
  3. text-lime
  4. text-green
  5. text-blue
  6. text-cyan
  7. text-gold
  8. text-yellow
  9. text-violet
  10. text-purple
  11. text-teal
  12. text-sea
  13. text-rose
  14. text-pink
  15. text-orange
  16. text-orangy
  17. text-brown
  18. text-wood
  19. text-light
  20. text-grey
  21. text-bright
  22. text-dark
  23. text-night
  24. text-auto
  25. 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


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

56

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

dropdown

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

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

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

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-contentthe 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 salmonredapplerosepinkamberorangevermilionmaroonyellowgoldsandgreenlimeolivebluecyanindigotealseaaquavioletpurplemagentalightgreysteelalphaautobrightnightdarkbrowncocowoodtransparentadd 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 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 alternate

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

    animation reverse

    use class .anime-reverseto 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

    1. .anime-fastest
    2. .anime-faster
    3. .anime-fast
    4. .anime-slow
    5. .anime-slower
    6. .anime-slowest

    Share your love

    Leave a Reply