Skip to content

Instantly share code, notes, and snippets.

@apzentral
Last active June 9, 2023 16:11
Show Gist options
  • Save apzentral/2b1a72159635c9133c8d to your computer and use it in GitHub Desktop.
Save apzentral/2b1a72159635c9133c8d to your computer and use it in GitHub Desktop.
CSS: Utility Styles
/**
* Width
*/
.width-100-percent {
width: 100%;
}
/**
* divider
*/
.divider,
.divider-whitespace {
display: block;
height: 0;
padding: 0;
border: none;
border-bottom: 1px solid #d4dde3;
overflow: hidden;
margin: 24px auto;
}
.divider-whitespace {
border-bottom-width: 0;
}
/**
* Padding
*/
.no-padding-top {
padding-top: 0 !important;
}
.no-padding-bottom {
padding-bottom: 0 !important;
}
.padding-10 {
padding: 10px !important;
}
.padding-20 {
padding: 20px !important;
}
.padding-30 {
padding: 30px !important;
}
.padding-40 {
padding: 40px !important;
}
.padding-50 {
padding: 50px !important;
}
.padding-t10 {
padding-top: 10px !important;
}
.padding-t20 {
padding-top: 20px !important;
}
.padding-r10 {
padding-right: 10px !important;
}
.padding-r20 {
padding-right: 20px !important;
}
.padding-b10 {
padding-bottom: 10px !important;
}
.padding-b20 {
padding-bottom: 20px !important;
}
.padding-l10 {
padding-left: 10px !important;
}
.padding-l20 {
padding-left: 20px !important;
}
/**
* Margin
*/
.no-margin-top {
margin-top: 0 !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.margin-10 {
margin: 10px !important;
}
.margin-20 {
margin: 20px !important;
}
.margin-30 {
margin: 30px !important;
}
.margin-40 {
margin: 40px !important;
}
.margin-50 {
margin: 50px !important;
}
.margin-t0 {
margin-top: 0 !important;
}
.margin-t5 {
margin-top: 5px !important;
}
.margin-t10 {
margin-top: 10px !important;
}
.margin-t15 {
margin-top: 15px !important;
}
.margin-t20 {
margin-top: 20px !important;
}
.margin-t30 {
margin-top: 30px !important;
}
.margin-t40 {
margin-top: 40px !important;
}
.margin-t50 {
margin-top: 50px !important;
}
.margin-r0 {
margin-right: 0 !important;
}
.margin-r10 {
margin-right: 10px !important;
}
.margin-r20 {
margin-right: 20px !important;
}
.margin-r30 {
margin-right: 30px !important;
}
.margin-r40 {
margin-right: 40px !important;
}
.margin-r50 {
margin-right: 50px !important;
}
.margin-b5 {
margin-bottom: 5px !important;
}
.margin-b10 {
margin-bottom: 10px !important;
}
.margin-b15 {
margin-bottom: 15px !important;
}
.margin-b20 {
margin-bottom: 20px !important;
}
.margin-b30 {
margin-bottom: 30px !important;
}
.margin-b40 {
margin-bottom: 40px !important;
}
.margin-b50 {
margin-bottom: 50px !important;
}
.margin-l10 {
margin-left: 10px !important;
}
.margin-l20 {
margin-left: 20px !important;
}
.margin-l30 {
margin-left: 30px !important;
}
.margin-l40 {
margin-left: 40px !important;
}
.margin-l50 {
margin-left: 50px !important;
}
.max-height-200 {
max-height: 200px !important;
width: auto;
}
/**
* Height
*/
.max-height-250 {
max-height: 250px !important;
width: auto;
}
.max-height-280 {
max-height: 280px !important;
width: auto;
}
.max-height-300 {
max-height: 300px !important;
width: auto;
}
.max-height-350 {
max-height: 350px !important;
width: auto;
}
.max-height-400 {
max-height: 350px !important;
width: auto;
}
/**
* Background
*/
.no-bg {
background: none !important;
background-color: transparent !important;
}
/**
* Text
*/
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
/**
* Color - Bootflat
*/
.text-blue-jeans-light {
color: #5d9cec;
}
.text-blue-jeans-dark {
color: #4a89dc;
}
.text-aqua-light {
color: #4fc1e9;
}
.text-aqua-dark {
color: #3bafda;
}
.text-mint-light {
color: #48cfad;
}
.text-mint-dark {
color: #37bc9b;
}
.text-grass-light {
color: #a0d468;
}
.text-grass-dark {
color: #8cc152;
}
.text-sunflower-light {
color: #ffce54;
}
.text-sunflower-dark {
color: #f6bb42;
}
.text-bittersweet-light {
color: #fc6e51;
}
.text-bittersweet-dark {
color: #e9573f;
}
.text-grapefruit-light {
color: #ed5565;
}
.text-grapefruit-dark {
color: #da4453;
}
.text-lavender-light {
color: #ac92ec;
}
.text-lavender-dark {
color: #967adc;
}
.text-pink-rose-light {
color: #ec87c0;
}
.text-pink-rose-dark {
color: #d770ad;
}
.text-light-gray-light {
color: #f5f7fa;
}
.text-light-gray-dark {
color: #e6e9ed;
}
.text-medium-gray-light {
color: #ccd1d9;
}
.text-medium-gray-dark {
color: #aab2bd;
}
.text-dark-gray-light {
color: #656d78;
}
.text-dark-gray-dark {
color: #434a54;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment