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