CSS Helper Classes

2/2/2020 - 8:48 PM

/* Padding */
.p-0 {
    padding: 0px;
  }
  
  .p-3 {
    padding: 3px;
  }
  
  .p-5 {
    padding: 5px;
  }
  
  .p-10 {
    padding: 10px;
  }
  
  .p-15 {
    padding: 15px;
  }
  
  .p-20 {
    padding: 20px;
  }
  
  .p-25 {
    padding: 25px;
  }
  
  .p-30 {
    padding: 30px;
  }
  
  .p-35 {
    padding: 35px;
  }
  
  .p-40 {
    padding: 40px;
  }
  
  .p-45 {
    padding: 45px;
  }
  
  .p-50 {
    padding: 50px;
  }
  
  .pt-0 {
    padding-top: 0px;
  }
  
  .pt-3 {
    padding-top: 3px;
  }
  
  .pt-5 {
    padding-top: 5px;
  }
  
  .pt-10 {
    padding-top: 10px;
  }
  
  .pt-15 {
    padding-top: 15px;
  }
  
  .pt-20 {
    padding-top: 20px;
  }
  
  .pt-25 {
    padding-top: 25px;
  }
  
  .pt-30 {
    padding-top: 30px;
  }
  
  .pt-35 {
    padding-top: 35px;
  }
  
  .pt-40 {
    padding-top: 40px;
  }
  
  .pt-45 {
    padding-top: 45px;
  }
  
  .pt-50 {
    padding-top: 50px;
  }
  
  .pr-0 {
    padding-right: 0px;
  }
  
  .pr-3 {
    padding-right: 3px;
  }
  
  .pr-5 {
    padding-right: 5px;
  }
  
  .pr-10 {
    padding-right: 10px;
  }
  
  .pr-15 {
    padding-right: 15px;
  }
  
  .pr-20 {
    padding-right: 20px;
  }
  
  .pr-25 {
    padding-right: 25px;
  }
  
  .pr-30 {
    padding-right: 30px;
  }
  
  .pr-35 {
    padding-right: 35px;
  }
  
  .pr-40 {
    padding-right: 40px;
  }
  
  .pr-45 {
    padding-right: 45px;
  }
  
  .pr-50 {
    padding-right: 50px;
  }
  
  .pb-0 {
    padding-bottom: 0px;
  }
  
  .pb-3 {
    padding-bottom: 3px;
  }
  
  .pb-5 {
    padding-bottom: 5px;
  }
  
  .pb-10 {
    padding-bottom: 10px;
  }
  
  .pb-15 {
    padding-bottom: 15px;
  }
  
  .pb-20 {
    padding-bottom: 20px;
  }
  
  .pb-25 {
    padding-bottom: 25px;
  }
  
  .pb-30 {
    padding-bottom: 30px;
  }
  
  .pb-35 {
    padding-bottom: 35px;
  }
  
  .pb-40 {
    padding-bottom: 40px;
  }
  
  .pb-45 {
    padding-bottom: 45px;
  }
  
  .pb-50 {
    padding-bottom: 50px;
  }
  
  .pl-0 {
    padding-left: 0px;
  }
  
  .pl-3 {
    padding-left: 3px;
  }
  
  .pl-5 {
    padding-left: 5px;
  }
  
  .pl-10 {
    padding-left: 10px;
  }
  
  .pl-15 {
    padding-left: 15px;
  }
  
  .pl-20 {
    padding-left: 20px;
  }
  
  .pl-25 {
    padding-left: 25px;
  }
  
  .pl-30 {
    padding-left: 30px;
  }
  
  .pl-35 {
    padding-left: 35px;
  }
  
  .pl-40 {
    padding-left: 40px;
  }
  
  .pl-45 {
    padding-left: 45px;
  }
  
  .pl-50 {
    padding-left: 50px;
  }
  

  /* Margin  */
  .m-0 {
    margin: 0px;
  }
  
  .m-3 {
    margin: 3px;
  }
  
  .m-5 {
    margin: 5px;
  }
  
  .m-10 {
    margin: 10px;
  }
  
  .m-15 {
    margin: 15px;
  }
  
  .m-20 {
    margin: 20px;
  }
  
  .m-25 {
    margin: 25px;
  }
  
  .m-30 {
    margin: 30px;
  }
  
  .m-35 {
    margin: 35px;
  }
  
  .m-40 {
    margin: 40px;
  }
  
  .m-45 {
    margin: 45px;
  }
  
  .m-50 {
    margin: 50px;
  }
  
  .mt-0 {
    margin-top: 0px;
  }
  
  .mt-3 {
    margin-top: 3px;
  }
  
  .mt-5 {
    margin-top: 5px;
  }
  
  .mt-10 {
    margin-top: 10px;
  }
  
  .mt-15 {
    margin-top: 15px;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .mt-25 {
    margin-top: 25px;
  }
  
  .mt-30 {
    margin-top: 30px;
  }
  
  .mt-35 {
    margin-top: 35px;
  }
  
  .mt-40 {
    margin-top: 40px;
  }
  
  .mt-45 {
    margin-top: 45px;
  }
  
  .mt-50 {
    margin-top: 50px;
  }
  
  .mr-0 {
    margin-right: 0px;
  }
  
  .mr-3 {
    margin-right: 3px;
  }
  
  .mr-5 {
    margin-right: 5px;
  }
  
  .mr-10 {
    margin-right: 10px;
  }
  
  .mr-15 {
    margin-right: 15px;
  }
  
  .mr-20 {
    margin-right: 20px;
  }
  
  .mr-25 {
    margin-right: 25px;
  }
  
  .mr-30 {
    margin-right: 30px;
  }
  
  .mr-35 {
    margin-right: 35px;
  }
  
  .mr-40 {
    margin-right: 40px;
  }
  
  .mr-45 {
    margin-right: 45px;
  }
  
  .mr-50 {
    margin-right: 50px;
  }
  
  .mb-0 {
    margin-bottom: 0px;
  }
  
  .mb-3 {
    margin-bottom: 3px;
  }
  
  .mb-5 {
    margin-bottom: 5px;
  }
  
  .mb-10 {
    margin-bottom: 10px;
  }
  
  .mb-15 {
    margin-bottom: 15px;
  }
  
  .mb-20 {
    margin-bottom: 20px;
  }
  
  .mb-25 {
    margin-bottom: 25px;
  }
  
  .mb-30 {
    margin-bottom: 30px;
  }
  
  .mb-35 {
    margin-bottom: 35px;
  }
  
  .mb-40 {
    margin-bottom: 40px;
  }
  
  .mb-45 {
    margin-bottom: 45px;
  }
  
  .mb-50 {
    margin-bottom: 50px;
  }
  
  .ml-0 {
    margin-left: 0px;
  }
  
  .ml-3 {
    margin-left: 3px;
  }
  
  .ml-5 {
    margin-left: 5px;
  }
  
  .ml-10 {
    margin-left: 10px;
  }
  
  .ml-15 {
    margin-left: 15px;
  }
  
  .ml-20 {
    margin-left: 20px;
  }
  
  .ml-25 {
    margin-left: 25px;
  }
  
  .ml-30 {
    margin-left: 30px;
  }
  
  .ml-35 {
    margin-left: 35px;
  }
  
  .ml-40 {
    margin-left: 40px;
  }
  
  .ml-45 {
    margin-left: 45px;
  }
  
  .ml-50 {
    margin-left: 50px;
  }

/* Text Align */  
.text-justify {
    text-align:justify;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-right {
	text-align: left;
}

.align-top    { vertical-align: top; }
.align-bottom { vertical-align: bottom; }
.align-middle { vertical-align: middle; }


/* Mouse Cursor */
.mouse-alias {cursor: alias;}
.mouse-all-scroll {cursor: all-scroll;}
.mouse-auto {cursor: auto;}
.mouse-cell {cursor: cell;}
.mouse-context-menu {cursor: context-menu;}
.mouse-col-resize {cursor: col-resize;}
.mouse-copy {cursor: copy;}
.mouse-crosshair {cursor: crosshair;}
.mouse-default {cursor: default;}
.mouse-e-resize {cursor: e-resize;}
.mouse-ew-resize {cursor: ew-resize;}
.mouse-grab {cursor: -webkit-grab; cursor: grab;}
.mouse-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.mouse-help {cursor: help;}
.mouse-move {cursor: move;}
.mouse-n-resize {cursor: n-resize;}
.mouse-ne-resize {cursor: ne-resize;}
.mouse-nesw-resize {cursor: nesw-resize;}
.mouse-ns-resize {cursor: ns-resize;}
.mouse-nw-resize {cursor: nw-resize;}
.mouse-nwse-resize {cursor: nwse-resize;}
.mouse-no-drop {cursor: no-drop;}
.mouse-none {cursor: none;}
.mouse-not-allowed {cursor: not-allowed;}
.mouse-pointer {cursor: pointer;}
.mouse-progress {cursor: progress;}
.mouse-row-resize {cursor: row-resize;}
.mouse-s-resize {cursor: s-resize;}
.mouse-se-resize {cursor: se-resize;}
.mouse-sw-resize {cursor: sw-resize;}
.mouse-text {cursor: text;}
.mouse-url {cursor: url(myBall.mouse-cur),auto;}
.mouse-w-resize {cursor: w-resize;}
.mouse-wait {cursor: wait;}
.mouse-zoom-in {cursor: zoom-in;}
.mouse-zoom-out {cursor: zoom-out;}

/* Visibility Classes */
.hide { display: none; }

/* Typography */
.bold     { font-weight: bold; }
.regular  { font-weight: normal; }
.italic   { font-style: italic; }
.lowercase {text-transform:lowercase}
.uppercase {text-transform:uppercase}
.capitalize {text-transform:capitalize}

.ell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.break-word { word-wrap: break-word; }
.no-wrap    { white-space: nowrap; }

.f9 {
    font-size: 9px
}

.f10 {
    font-size: 10px
}

.f11 {
    font-size: 11px
}

.f12 {
    font-size: 12px
}

.f13 {
    font-size: 13px
}

.f14 {
    font-size: 14px
}

.f15 {
    font-size: 15px
}

.f16 {
    font-size: 16px
}

.f17 {
    font-size: 17px
}

.f18 {
    font-size: 18px;
    line-height: 30px
}

.f19 {
    font-size: 19px
}

.f20 {
    font-size: 20px
}

.f30 {
    font-size: 30px
}

.f40 {
    font-size: 40px
}

.f50 {
    font-size: 50px
}

.f60 {
    font-size: 60px
}

.size-small {
    font-size: 75% !important
}

.size-normal {
    font-size: 100% !important
}

.size-medium {
    font-size: 125% !important
}

.size-big,.size-large {
    font-size: 150% !important
}

.size-huge {
    font-size: 200% !important
}



/* ///////////////////////////////
 ----- FlexBox 
 ////////////////////////////////*/

/* container */
.flex { display: flex; }

/* direction */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-col-r { flex-direction: column-reverse; }
.flex-row-r { flex-direction: row-reverse; }

/* wrap */
.flex.nowrap { flex-wrap: nowrap; }
.flex.wrap { flex-wrap: wrap; }
.flex.wrap-reverse { flex-wrap: wrap; }

/* main axis */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* cross axis */
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* grow/shrink */
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }

/* Display */
.inline       { display: inline; }
.block        { display: block; }
.inline-block { display: inline-block; }
.hide         { display: none; }
.inline {display:inline}
.inline-block {display:inline-block}
.overflow-auto {overflow:auto}
.overflow-visible {overflow:visible}
.overflow-hidden {overflow:hidden}

/* Shadows */
.shadow-level-1{
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 1px 8px rgba(0, 0, 0, 0.08);
}

.shadow-level-2{
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.08);
}

.shadow-level-3{
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.08);
}

.shadow-level-4{
    box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.14), 0px 2px 8px rgba(0, 0, 0, 0.08);
}

.shadow-level-5{
    box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.08);
}


/* Borders */
/* $border-color: #f2f2f2; 
.border-all    { border:        1px solid $default-border-color; }
.border-top    { border-top:    1px solid $default-border-color; }
.border-bottom { border-bottom: 1px solid $default-border-color; }
.border-right  { border-right:  1px solid $default-border-color; }
.border-left   { border-left:   1px solid $default-border-color; }
*/

.no-radius {
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
    }

read.txt

Flexbox
Spacing
Align 
Text-Colors
Background Colors
Spacing 
Font-Size
Font-Style
Width / Height
Shadows 
Border Radius 
Media Query Font Size 
Tipografia 
Mouse Pointers

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CSS Helper Classes