Irpie CSS 3.0.0

Coloum :

full
col100
col90
col80
col75
col70
col60
col50
col40
col33
col30
col25
col20
col10
col8
fit

Offset :

col50 offset50
col33 offset33
col70 offset30

Class Offset :

Class Position
offset90 margin left 90%
offset80 margin left 80%
offset70 margin left 70%
offset60 margin left 60%
offset50 margin left 50%
offset40 margin left 40%
offset33 margin left 33.3%
offset30 margin left 30%
offset20 margin left 20%
offset10 margin left 10%
offset8 margin left 8.3%

Round :

round-s
round-m
round2-l
round-xl
round-xxl
round-circle

Margin :

mg-s
mg-m
mg-l
mg-xl
mg-auto

Padding :

pd-s
pd-m
pd-l
pd-xl

pd-lr-s
pd-lr-m
pd-lr-l
pd-lr-xl

pd-tb-s
pd-tb-m
pd-tb-l
pd-tb-xl

Content :

content-s
content-m
content-l
content-xl

List :

list-s
list-m
list-l
list-xl

Link & Text:

Button :

btn-blue btn-red btn-orange
btn-green btn-skyblue btn-torquise
btn-yellow btn-pink btn-purple
btn-brown btn-grey btn-dark
btn-white
btn-black

btn btn-s btn-orange
btn btn-s
btn btn-m btn-orange
btn btn-m
btn btn-l btn-orange
btn btn-l
btn btn-xl btn-orange
btn btn-xl
btn btn-full btn-m btn-green
btn-full btn-m

Alert :

alert-blue
alert-red
alert-orange
alert-green
alert-skyblue
alert-torquise
alert-yellow
alert-pink
alert-purple
alert-brown
alert-grey
alert-dark
alert-white
alert-black

alert alert-s alert-orange
alert alert-m alert-orange
alert alert-l alert-orange
alert alert-xl alert-orange

Background :

bg-blue
bg-red
bg-orange
bg-green
bg-skyblue
bg-torquise
bg-yellow
bg-pink
bg-purple
bg-brown
bg-grey
bg-dark
bg-white
bg-black

Input :

Input Text :
input-text input-s
input-text input-m
input-text input-l
input-text input-xl
Input Textarea :
input-textarea textarea-s
input-textarea textarea-m
input-textarea textarea-l
input-textarea textarea-xl
Input Option :
input-select select-s
input-select select-m
input-select select-l
input-select select-xl

Opacity :

No Opacity
opacity9
opacity8
opacity7
opacity6
opacity5
opacity4
opacity3
opacity2
opacity1

Shadow :

shadow-s
shadow-m
shadow-l
shadow-xl

Float & Align :

Style Class
Float Left float-left or left
Float Right float-right or right
Float None float-none
Text Center text-center or center
Text Left text-left
Text Right text-right
Text Justify justify

Display :

Style Class
Display Block block
Display None hide
Clear Both clear
Image Responsive img-res
Display Table display-table > table-cell

Wrapper :

Style Class Width
Wrapper Small wrapper-s 800px
Wrapper Medium wrapper-m 980px
Wrapper large wrapper-l 1024px
Wrapper Extra Large wrapper-xl 1280px
Wrapper Extra Small wrapper-xs 600px

Text Style :

Style Class Preview
Text Bold bold Text
Text Italic italic Text
Text Underline underline Text
Text Strikethrough strike-trough Text

Text Overflow :

nowrap-clips :
text text text text text text text text text text text text text text text
nowrap-ellipsis :
text text text text text text text text text text text text text text text
nowrap-ellipsis-2 :
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
nowrap-ellipsis-3 :
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Title :

title-s
title-m
title-l
title-xl

Tabel :

table
text text
text text
table table-clear
text text
text text
table-s
text text
text text
table-m
text text
text text
table-l
text text
text text
table-xl
text text
text text

Responsive :

Class Vs Width width > 800 width > 768 width > 640 width > 480 width > 360 width > 320
.res4-2-2     50% 50% 50% 50%
.res4-2-1     50% 50% 100% 100%
.res3-1     100% 100% 100% 100%
.res2-1         100% 100%
.res4-2-h     50% 50% hide hide
.res3-h     hide hide hide hide
.res2-h         hide hide
.res4-2-b     show show show show
.res3-b     show show show show
.res2-b         show show
.res3-o     overflow:scroll overflow:scroll overflow:scroll overflow:scroll
.res2-o         overflow:scroll overflow:scroll

Pagination :

li Style :

No Class
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
ul class li-none
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
Source :
https://cdn.jsdelivr.net/gh/irpian/css@master/3.0.0/3.0.0.css
https://cdn.jsdelivr.net/gh/irpian/css@master/3.0.0/3.0.0.min.css( minify version )

https://cdn.jsdelivr.net/gh/irpian/css@master/3.0.0/3.0.1.css
https://cdn.jsdelivr.net/gh/irpian/css@master/3.0.0/3.0.1.min.css( minify version )
: update responsive col offset

Comments

Post a Comment

Popular posts from this blog

irpie CSS 4.0.0

Coloum : full col100 col90 col80 col75 col70 col60 col50 col40 col33 col30 col25 col20 col10 col8 fit Offset : col50 offset50 col33 offset33 col70 offset30 Class Offset : Class Position offset90 margin left 90% offset80 margin left 80% offset70 margin left 70% offset60 mar
Read more

Irpie CSS 2.0.0

Coloum : full col100 col90 col80 col75 col70 col60 col50 col40 col33 col30 col25 col20 col10 fit Round : round-s round-m round2-l round-xl Margin : mg-s mg-m mg-l mg-xl mg-auto Padding : pd-s pd-m
Read more