Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

roylory/almost-inline-css

Repository files navigation

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 }

About

A collection of inline-like CSS classes

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

AltStyle によって変換されたページ (->オリジナル) /