almost-inline.css

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

/* 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

/* 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, border-color

/* 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 }

background-color

/* bg examples */
.bg-pink { background-color: pink }
.bg-EEE { background-color: #EEE }

text

/* 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

/* vertical align examples */
.valign-middle { vertical-align: middle } /* same as .vertial-align-middle */
.valign-top { vertical-align: top } /* same as .vertial-align-top */

display

/* 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

/* 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 }

others

/* other examples */
.float-left { float: left }
.clear-both { clear: both }
.font-size-18px { font-size: 18px }
.font-weight-bold { font-weight: bold }