N4Ig7glgJg5gpgFygQwaiCA2cQC4QCycAdgK4gA0IAzgBYD2YCG2ARsgE54Bmym1cKsWQBbHPjFlKITPWRQ4ADwRwOwzHgQdSgmgGMOcEnu4w8oSaT30FeENIHXiKDgE87C3qUwJpezMjU1HbSlsxY4iBQ9HrUAHQAPNRa9MQwAHx6AExxTNwJAPTJHKkZoSSk4diYEMQA1na1CopxAA60rQ4MYHqciHap0lAlrdFgxP4Qeg34Dgiu2CoirQEqdgAicF4+0q301BgQg/jCAG7sHAC0HBAwtL5UAFakyRDcEHBQIVSyMPTfUVQyDswAAOiBLODcABtMEgKpwKHggAqlXoNz41HBFHBqC0AH1aIZuEiQABibHguiMXqGBBQrQ6HE0UisSF4WHghGkgDKiFIrVwAAICMgIJhKSA8RxCcTSQVWsh4AVReLwQBfChw7l4cF8hAC4UAeWINWIcCFPIYrUl0tlW3liuVJrNcEuVvoNpAmu1LERupA+sNQvW9BEYuIWMouIQBKJDoDCqVcAK3QQ9Eu0XDtSjPq5ftJAE16KQOEKAArJ6iWxl6A2GW2xmXxkmJp0p9uXYpWev+vPwgsBgASjCF6eF8igQuQQvNYArycbcblbeTqcY6cuc/bGq1+YipJH8/HQrA6Lqp4wtCFyLgy1WcCjzLtLcda7TGaWK1Qj93voPw6jieZ4cBekAINeABi6IiE+MbLgmuDgkmyofpc3Awbme4DgBSEgEeY70MKnwYGOtAWkQZBLs2K54ShKZoSRCCXOy/Y6nhAByUyqEKpb8NR9qtnR7YFMQ3FXHxuYALpsYOeEAEqPtQJYcHov7RlKTaCaSFIadSPR9PSmjaIIVKsuyML/tgvJoMwehCopQQqWpcGaQhQnISJPK2VMlyOcppYuX++7WQGkHIKcUypNWABklrfnQ1AGEYkYCa+q7KuFkVONQ7oJbQSWGCQWFWf6eGVrGqipRpL60Z5a4VSoaglSFZXggAgqQUBHGldUgPRBSdd19AajJ2HseCmynHAsitKorm1Yh4K6cy+m0ogDImat5kVFCnI4aFeHQRwsG9Ut/UiRhJ0tQdbUgAAUjyRocUK7XlgAkmdHkXWuj3PZcb2fd641ySid7fioC1aelwlrsi5YADLBbdNkLI+5GIFD7lvsqADCPI8sjE0gO1rStFjNHnQNpPk0ToOEIgQIwBT2kZSmYhoJcaDM6Nsm4eCkElMQKjOF9OmSmthmbUyZlsrtHKlaSADq0DwAgLMw/Vyoq7AmN0/zIDIuRYga31A1G3e6l84dYP3j+ptUyJt525D+s2yAlbwA730DZ7VsyTJXSMEOoisKW8BcPggyauAquINAdiWPi+IACwAKKPI8KduAAnNwACO7WhDYfA8JiugiCXmCQFAEEAuGei0AAjAADMIYh2DXassRU3pAA

CSS Helper

Paddings

Padding

.p0 {padding: 0px;}                        
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p30 {padding: 30px;}
.p40 {padding: 40px;}
.p50 {padding: 50px;}

Padding Top

.pt5 {padding-top: 5px;}                        
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}

Padding Bottom

.pb5 {padding-bottom: 5px;}                        
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}

Padding Left

.pl5 {padding-left: 5px;}                        
.pl10 {padding-left: 10px;}
.pl15 {padding-left: 15px;}
.pl20 {padding-left: 20px;}

Padding Right

.pr5 {padding-right: 5px;}                        
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}


Margins

Margin

.m0 {padding: 0px;}
.m10 {padding: 10px;}
.m20 {padding: 20px;}
.m30 {padding: 30px;}
.m40 {padding: 40px;}
.m50 {padding: 50px;}

Margin Top

.mt5 {padding-top: 5px;}
.mt10 {padding-top: 10px;}
.mt15 {padding-top: 15px;}
.mt20 {padding-top: 20px;}

Margin Bottom

.mb5 {padding-bottom: 5px;}
.mb10 {padding-bottom: 10px;}
.mb15 {padding-bottom: 15px;}
.mb20 {padding-bottom: 20px;}

Margin Left

.ml5 {padding-left: 5px;}
.ml10 {padding-left: 10px;}
.ml15 {padding-left: 15px;}
.ml20 {padding-left: 20px;}

Margin Right

.mr5 {padding-right: 5px;}
.mr10 {padding-right: 10px;}
.mr15 {padding-right: 15px;}
.mr20 {padding-right: 20px;}

Flex

CSS Markup

.flex {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}

HTML Markup

<div class="flex">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>

Columns

Special

Animations

Fast Animation

.animate-fast {
-webkit-transition: all .25s ease-in-out !important;
-moz-transition: all .25s ease-in-out !important;
-ms-transition: all .25s ease-in-out !important;
}

Medium Animation

.animate-medium {
-webkit-transition: all .5s ease-in-out !important;
-moz-transition: all .5s ease-in-out !important;
-ms-transition: all .5s ease-in-out !important;
}

Slow Animation

.animate-slow {
-webkit-transition: all 1s ease-in-out !important;
-moz-transition: all 1s ease-in-out !important;
-ms-transition: all 1s ease-in-out !important;
}

Shadows

Thin Shadow

.shadow-thin {
-moz-box-shadow: 0 0 0px 2px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 0px 2px rgba(0, 0, 0, .2);
box-shadow: 0 0 0px 2px rgba(0, 0, 0, .2);
}

Medium Shadow

.shadow-medium {
-moz-box-shadow: 0 0 0px 5px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 0px 5px rgba(0, 0, 0, .2);
box-shadow: 0 0 0px 5px rgba(0, 0, 0, .2);
}

Large Shadow

.shadow-large {
-moz-box-shadow: 0 0 0px 15px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 0px 15px rgba(0, 0, 0, .2);
box-shadow: 0 0 0px 15px rgba(0, 0, 0, .2);
}

Cover + Repeat

Cover

.cover {
background-position: center center!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-repeat: cover!important
}

Repeat

.repeat {
background-position: center center!important;
-webkit-background-size: repeat!important;
-moz-background-size: repeat!important;
-o-background-size: repeat!important;
background-size: repeat!important;
background-repeat: repeat!important
}

no-select

.noselect {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
-o-user-select: none !important;
user-select: none !important;
}

Highlight

.highlight {
-moz-animation: flash 1s ease-out !important;
-moz-animation-iteration-count: 1 !important;
-webkit-animation: flash 1s ease-out !important;
-webkit-animation-iteration-count: 1 !important;
-ms-animation: flash 1s ease-out !important;
-ms-animation-iteration-count: 1 !important;
animation: flash 1s ease-out !important;
animation-iteration-count: 1 !important;
}

Animation Keyframes

@-webkit-keyframes flash {
0% {
background-color: transparent;
}
50% {
background-color: #fbf8b2;
}
100% {
background-color: transparent;
}
}
@-moz-keyframes flash {
0% {
background-color: transparent;
}
50% {
background-color: #fbf8b2;
}
100% {
background-color: transparent;
}
}
@-ms-keyframes flash {
0% {
background-color: transparent;
}
50% {
background-color: #fbf8b2;
}
100% {
background-color: transparent;
}
}
@keyframes flash {
0% {
background-color: transparent;
}
50% {
background-color: #fbf8b2;
}
100% {
background-color: transparent;
}
}

Breakout

 

CSS Preprocessing

Vendor Prefixes

Color Manipulation

CSS Variables

Default Variables

Custom Variables


Website CSS

Structure

Usage

Examples

Simple Examples

Advanced Examples