What Is Ligo.css | Material Icons | free svg Icons

Ligo.css (Material.io Icons)

simple•unique•light

 

---

What is it ?

ligo.css is a css library which makes your website simple and good looking its entirely free to use

How to use?

inorder to use it you need to import it so to do that just copy paste this link in your head

&ltlink href="https://cdn.jsdelivr.net/gh/atoms19/ligo.css/ligo-1.min.css" rel="stylesheet">  

---

---

buttons

in ligo.css buttons look very diffrent

this kind of buttons can be achived by adding a class of .btn to any element

primary buttons

a class of .primary can be added to a regular button to make it look important

secondary buttons

a class of .secondary can be added to a regular button to make it look grey

danger buttons

a class of .danger can be added to a regular button to make it look dangerous

success buttons

a class of .success can be added to a regular button to make it look successful and safe

warning buttons

a class of .warning can be added to a regular button to make it look warning

inverted buttons

a class of .inverted can be added to a regular button to make it look dark

outlined buttons

outlined buttons has a border around it add a class of .outlined to a button to achive this look also adding this class to a primary,secondary,success,danger or warning button will give diifrent coloured outlines

icon buttons

icon buttons can contain icons inorder to turn a regular button to an icon button just add the class .icon to it

button sizes

buttons comes in 3 diffrent sizes large,default,small

add .large to make a large button
add .small to make a small button

loading buttons

loading buttons can be used to show that button is loading something just add .loading class to the button

 CSS Text Animation

 Login SignUp Forms 

 Loading Animations 

 Fun Javascript Tutorials

 Button Animations /Button Effects 

Typography

---

ligo.css use roboto as its default font while all heading tags has montserrat font applied to it and the color of the text is a dark grey color to reduce eyestrain

headings

h1 heading2.5rem

h2 heading2.25rem

h3 heading 2rem

h4 heading1.75rem

h5 heading1.5rem

h6 heading1.25rem

blockquote

in ligo a blockquote looks like this

you can hack websites with css

-someone

others

kbd looks like this cntrl+z marked text looks like this i am marked a link looks like this link

code

code in ligo are of 2 types inline and block as default all code tags are inline inline code when you place a code tag inside a pre tag it becomes a code block

 hello="i am a code block"

you can also add a class of .inverted to make the code & code block appear dark inverted inline code

 hello="i am an inverted code block"

icons

you no longer need to import fontawsome its all here at ligo.css ligo uses material icons and delivers it to you in a diffrent way
to display an icon use icon tag &lticon&gt&lt/icon&gtand inside it write the name of icon you want to be displayed cloud

House

you can find a list of all icons here

---

Tables

tables are amazing way to display data ligo makes ordinary tables look way better

world records

#	name	xp	team
1	jack	5000	team26
2	matteo	3009	team27
3	atoms	3000	team23

and the best part is you dont even need to do anything tables look this good in ligo by default

striped

adding a class of .striped to a table makes it look striped

world records

#	name	xp	team
1	jack	5000	team26
2	matteo	3009	team27
3	atoms	3000	team23

ignore

in case you want an unstyled table just add the attribute of ignore to the table tag it will not be styled

---

Forms

ligo helps you build a stylish form

inputs

groups noice all elements in the form are prestyled

---

 CSS Text Animation

 Login SignUp Forms 

 Loading Animations 

 Fun Javascript Tutorials

 Button Animations /Button Effects