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 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-none
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

Extra Padding & Margin :

Size Padding Top Padding Bottom Margin Top Margin Bottom
Small 4px pd-t-s pd-b-s mg-t-s mg-b-s
Medium 8px pd-t-m pd-b-m mg-t-m mg-b-m
Large 16px pd-t-l pd-b-l mg-t-l mg-b-l
Extra Large 24px pd-t-xl pd-b-xl mg-t-xl mg-b-xl
Extra Large S 36px pd-t-sxl pd-b-sxl mg-t-sxl mg-b-sxl
Extra Large M 48px pd-t-mxl pd-b-mxl mg-t-mxl mg-b-mxl
Extra Large L 64px pd-t-lxl pd-b-lxl mg-t-lxl mg-b-lxl
Extra Large XL 84px pd-t-xxl pd-b-xxl mg-t-xxl mg-b-xxl

Content :

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

List :

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

List Line :

list-line-s
list-line-m
list-line-l
list-line-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
Image Cover img-cover
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

Font Family :

Font Class
Arial font-arial
Verdana font-verdana
Helvetica font-helvetica
Tahoma font-tahoma
Times New Roman font-tmr
Georgia font-georgia
Garamond font-garamond
Courier New font-courier
Brush Script MT font-brush

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 hide hide show show show show
.res3-b hide hide show show show show
.res2-b hide hide hide hide show show
.res3-o     overflow:scroll overflow:scroll overflow:scroll overflow:scroll
.res2-o         overflow:scroll overflow:scroll
.res3-c     clear clear clear clear
.res2-c         clear clear

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/4.0.0/4.0.0.css
https://cdn.jsdelivr.net/gh/irpian/css@master/4.0.0/4.0.0.min.css ( minify version )

Comments

Post a Comment

Popular posts from this blog

Irpie CSS 1.0.0

Area : full div100 div90 div80 div75 div70 div60 div50 div40 div33 div30 div25 div20 div10 fit Round : round2 round4 round6 round8 Margin : mg2 mg4 mg8 mg12 mg0a Padding : pd2 pd4
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