A collection of inline-like CSS classes. It is not considered as a good practice, but sometimes it could be very useful. Similar philosophy as tailwindcss.
/* margin, padding examples */ .margin-none { margin: none } .margin-10px { margin: 10px } .margin-top-25px { margin-top: 25px } .padding-5px { padding: 5px } .padding-right-100px { padding-right: 100px }
/* width, height examples */ .width-300px { width: 300px } .height-520px { height: 520px } .min-width-140px { min-width: 140px } .min-height-80px { min-height: 80px } .max-width-1000px { max-width: 1000px } .max-height-860px { max-height: 860px }
/* border examples */ .border-1px { border-width: 1px } .border-blue { border-color: blue } .border-DDD { border-color: #DDD } .border-top-2px { border-top-width: 2px } .border-top-green { border-top-color: green }
/* bg examples */ .bg-pink { background-color: pink } .bg-EEE { background-color: #EEE }
/* text examples */ .text-red { color: red } /* same as .color-red */ .text-decoration-none { text-decoration: none } /* same as .text-none */ .text-underline { text-decoration: underline } /* same as .text-decoration-underline */ .text-center { text-align: center } /* same as .text-align-center */
/* vertical align examples */ .valign-middle { vertical-align: middle } /* same as .vertial-align-middle */ .valign-top { vertical-align: top } /* same as .vertial-align-top */
/* display examples */ .display-none { display: none } .display-block { display: block } .display-inline-block { display: inline-block } .display-inline { display: inline } .display-flex { display: flex } .display-inline-flex { display: inline-flex }
/* flex examples */ .flex-1 { flex: 1 } .flex-auto { flex: auto } .flex-column { flex-direction: column } /* same as .flex-direction-column */ .flex-grow-1 { flex-grow: 1 } .justify-content-center { justify-content: center } .align-items-center { align-items: center }
/* other examples */ .float-left { float: left } .clear-both { clear: both } .font-size-18px { font-size: 18px } .font-weight-bold { font-weight: bold }