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

ligo css

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


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

all elements in the form are prestyled


Share your love

Leave a Reply