reference | smcss (a css for prototyping)

background

xbg	`background: none`
black	`background: #000`
gray	`background: #888`
silver	`background: #ccc`
white	`background: #fff`
red	`background: #f88`
green	`background: #8f8`
blue	`background: #88f`
yellow	`background: #ff8`
cyan	`background: #8ff`
checkerboard	`background: url('data:image/png;base64,...')`
rainbow	& > :nth-child(3n+1) @include red & > :nth-child(3n+2) @include green & > :nth-child(3n+3) @include blue

border

xborder	`border: none`
xborder-t	`border-top: none`
xborder-l	`border-left: none`
xborder-r	`border-right: none`
xborder-b	`border-bottom: none`
xborder-v	`border-top: none border-bottom: none`
xborder-h	`border-left: none border-right: none`
xborder-vl	`border-top: none border-left: none border-bottom: none`
xborder-vr	`border-top: none border-right: none border-bottom: none`
xborder-ht	`border-top: none border-left: none border-right: none`
xborder-hb	`border-left: none border-right: none border-bottom: none`
border	`border: 1px solid`
dashed	`border: 1px dashed`
xbr	`border-radius: 0`
brN	`border-radius: N`

Cut unwanted borders approach

.app-border-style1 {
    border: 1px solid black;
}
.app-border-style2 {
    border: 1px solid red;
}

<div class="app-border-style1 xborder-v"></div>
<div class="app-border-style2 xborder-h"></div>

.xborder-t

.xborder-l

.xborder-r

.xborder-b

.xborder-h

.xborder-ht

.xborder-hb

.xborder-v

.xborder-vl

.xborder-vr

shadow

xbs	box-shadow: none
bsN	box-shadow: 0 0 N rgba(0, 0, 0, 0.75)
isN	box-shadow: inset 0 0 N rgba(0, 0, 0, 0.75)

box-sizing

bbox	`box-sizing: border-box`
cbox	`box-sizing: content-box`

button

xbutton	Reset any BUTTON styles. After it a BUTTON will have no look (e.g. just like DIV element).

cursor

cur-alias	`cursor: alias`
cur-all-scroll	`cursor: all-scroll`
cur-auto	`cursor: auto`
cur-cell	`cursor: cell`
cur-col-resize	`cursor: col-resize`
cur-context-menu	`cursor: context-menu`
cur-copy	`cursor: copy`
cur-crosshair	`cursor: crosshair`
cur-default	`cursor: default`
cur-e-resize	`cursor: e-resize`
cur-ew-resize	`cursor: ew-resize`
cur-grab	`cursor: grab`
cur-grabbing	`cursor: grabbing`
cur-help	`cursor: help`
cur-inherit	`cursor: inherit`
cur-initial	`cursor: initial`
cur-move	`cursor: move`
cur-n-resize	`cursor: n-resize`
cur-ne-resize	`cursor: ne-resize`
cur-nesw-resize	`cursor: nesw-resize`
cur-no-drop	`cursor: no-drop`
cur-none	`cursor: none`
cur-not-allowed	`cursor: not-allowed`
cur-ns-resize	`cursor: ns-resize`
cur-nw-resize	`cursor: nw-resize`
cur-nwse-resize	`cursor: nwse-resize`
cur-pointer	`cursor: pointer`
cur-progress	`cursor: progress`
cur-row-resize	`cursor: row-resize`
cur-s-resize	`cursor: s-resize`
cur-se-resize	`cursor: se-resize`
cur-sw-resize	`cursor: sw-resize`
cur-text	`cursor: text`
cur-vertical-text	`cursor: vertical-text`
cur-w-resize	`cursor: w-resize`
cur-wait	`cursor: wait`

display

xd	`display: none`
db	`display: block`
di	`display: inline`
dib	`display: inline-block`
dt	`display: table`
dtc	`display: table-cell`

display-flex

flex-row	`display: flex flex-direction: row`
iflex-row	`display: inline-flex flex-direction: row`
flex-row-wrap	`@include flex-row @include flex-wrap`
flex-row-c
flex-row-cl
flex-row-cr
flex-row-ct
flex-row-cb
flex-row-tl
flex-row-tr
flex-row-bl
flex-row-br
flex-row-uniform	`@include flex-row & > * { flex: 1; min-width: 0 }`
iflex-row-c	`@include iflex-row @include flex-center`
flex-col	`display: flex flex-direction: col`
iflex-col	`display: inline-flex flex-direction: column`
flex-col-c
flex-col-cl
flex-col-cr
flex-col-ct
flex-col-cb
flex-col-tl
flex-col-tr
flex-col-bl
flex-col-br
flex-col-uniform	`@include flex-col & > * { flex: 1; min-height: 0 }`
iflex-col-c	`@include iflex-col @include flex-center`
flex-wrap
flex-nowrap
flex-wrap-r
flex-center
flex-align-start	`align-items: flex-start`
flex-align-end	`align-items: flex-end`
flex-align-center	`align-items: center`
flex-align-baseline	`align-items: baseline`
flex-align-stretch	`align-items: stretch`
flex-self-start	`align-self: flex-start`
flex-self-end	`align-self: flex-end`
flex-self-center	`align-self: center`
flex-self-baseline	`align-self: baseline`
flex-self-stretch	`align-self: stretch`
flex-justify-start	`justify-content: flex-start`
flex-justify-end	`justify-content: flex-end`
flex-justify-center	`justify-content: center`
flex-justify-between	`justify-content: space-between`
flex-justify-around	`justify-content: space-around`
flex-grow	`flex-grow: 1`
flex-nogrow	`flex-grow: 0`
flex-shrink	flex-shrink: 1 flex-basis: auto min-width: 0 min-height: 0
flex-fluid	@include flex-grow @include flex-shrink // Fix for IE10 and IE11; flex-basis: auto doesn't work -ms-flex-preferred-size: 0
flex-static	`@include flex-nogrow @include flex-noshrink`

display-flex-hsplit

hsplit
vsplit
hsplit-uniform	@include hsplit & > * { flex: 1 1 0; min-width: 0; min-height: 0 } &:has(> .fluid) > * { flex: none } &:has(> .fluid) > .fluid { flex: 1 1 0; min-width: 0; min-height: 0 }
vsplit-uniform	@include vsplit & > * { flex: 1 1 0; min-width: 0; min-height: 0 } &:has(> .fluid) > * { flex: none } &:has(> .fluid) > .fluid { flex: 1 1 0; min-width: 0; min-height: 0 }

display-grid

grid-left-center-right	display: grid grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) align-items: stretch & > :first-child { max-width: 100%; justify-self: start } & > :last-child { max-width: 100%; justify-self: end }
grid-left-top-bottom	display: grid grid-template-columns: auto 1fr grid-template-rows: auto auto align-items: start & > :nth-child(1) { grid-row: 1 / span 2; margin: auto } & > :nth-child(2) { align-self: end }

grid-left-center-right

display: grid
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)
align-items: stretch
& > :first-child { max-width: 100%; justify-self: start }
& > :last-child { max-width: 100%; justify-self: end }

grid-left-top-bottom

display: grid
grid-template-columns: auto 1fr
grid-template-rows: auto auto
align-items: start
& > :nth-child(1) { grid-row: 1 / span 2; margin: auto }
& > :nth-child(2) { align-self: end }

expand

expand	@mixin expand($width, $height) @include db // Very often target of this class will be A element @include rel // Almost always children will be absolutely positioned &:before @include db content: '' padding-top: to-number($height) / to-number($width) * 100%

@mixin expand($width, $height)
    @include db     // Very often target of this class will be A element
    @include rel    // Almost always children will be absolutely positioned
    &:before
        @include db
        content: ''
        padding-top: to-number($height) / to-number($width) * 100%

float

xf	`float: none`
fl	`float: left`
fr	`float: right`
xc	`clear: none`
cb	`clear: both`
cl	`clear: left`
cr	`clear: right`
clearfix	// http://compass-style.org/reference/compass/utilities/general/clearfix/ @mixin clearfix *zoom: 1 &:after content: '\0020' display: block height: 0 clear: both overflow: hidden visibility: hidden
floats	@include clearfix > * @include fl

font

xfs	`font-size: inherit`
fsN	`font-size: N`
lsN	`letter-spacing: N`
lhN	`line-height: N`
n	`font-style: normal`
i	`font-style: italic`
q	`font-style: oblique`
ii	`font-style: inherit`
b	`font-weight: bold`
xfw	`font-weight: normal`
fw1	`font-weight: 100`
fw2	`font-weight: 200`
fw3	`font-weight: 300`
fw4	`font-weight: 400`
fw5	`font-weight: 500`
fw6	`font-weight: 600`
fw7	`font-weight: 700`
fw8	`font-weight: 800`
fw9	`font-weight: 900`
xff	`font-family: inherit`
ff-sans	`font-family: sans-serif`
ff-serif	`font-family: serif`
ff-mono	`font-family: monospace`

gap

gapN	`gap: Npx`

gap — space between the children of a flex or grid container. Block containers use mg/mi instead.

list

xls	`list-style: none`

margin

xm	margin: 0
xmt	margin-top: 0
xml	margin-left: 0
xmr	margin-right: 0
xmb	margin-bottom: 0
mN	margin: N
mvN	margin-top: N margin-bottom: N
mhN	margin-left: N margin-right: N
mtN	margin-top: N
mlN	margin-left: N
mrN	margin-right: N
mbN	margin-bottom: N

margin groups

mgN	.mgN > :not(:last-child) { margin-bottom: N; }
miN	.miN > :not(:last-child) { margin-right: N; }

mg — vertical space between immediate children.

mi — horizontal space between immediate children.

Margins and paddings should be distributed by container.

block-level margin groups (children are distributed vertically)

.mg5 > :not(:last-child) { margin-bottom: 5px; }
.mg10 > :not(:last-child) { margin-bottom: 10px; }

inline-level margin groups (children are distributed horizontally)

.mi5 > :not(:last-child) { margin-right: 5px; }
.mi10 > :not(:last-child) { margin-right: 10px; }

a

b

c

a

b

c

a

b

c

a

b

c

object-fit

fit-none	`object-fit: none`
fit-fill	`object-fit: fill`
fit-contain	`object-fit: contain`
fit-cover	`object-fit: cover`
fit-scale-down	`object-fit: scale-down`

opacity

xo	opacity: 1
oN	opacity: N/100

outline

xoutline	outline: none
outline	outline: 1px solid currentColor

overflow

oa	overflow: auto
oh	overflow: hidden
os	overflow: scroll

padding

xp	margin: 0
xpt	padding-top: 0
xpl	padding-left: 0
xpr	padding-right: 0
xpb	padding-bottom: 0
pN	padding: N
pvN	padding-top: N padding-bottom: N
phN	padding-left: N padding-right: N
ptN	padding-top: N
plN	padding-left: N
prN	padding-right: N
pbN	padding-bottom: N

padding-group

pgN	.pgN > :not(:last-child) { padding-bottom: N; }
piN	.piN > :not(:last-child) { padding-right: N; }

pg — vertical space between immediate children

pi — horizontal space between immediate children

pointer-events

no-pointer-events	pointer-events: none

position

stat	position: static
rel	position: relative
abs	position: absolute
fix	position: fixed
sticky	position: sticky
tlbr[N=0]	top: N left: N right: N bottom: N
ta	top: auto
la	left: auto
ra	right: auto
ba	bottom: auto
tN	top: N
lN	left: N
rN	right: N
bN	bottom: N

position-abs

abs-f
abs-t
abs-b
abs-l
abs-r
abs-c
abs-tl
abs-tl-c
abs-tl-ct
abs-tl-cb
abs-tl-cl
abs-tl-cr
abs-tl-tr
abs-tl-bl
abs-tl-br
abs-tr
abs-tr-c
abs-tr-ct
abs-tr-cb
abs-tr-cl
abs-tr-cr
abs-tr-tl
abs-tr-bl
abs-tr-br
abs-bl
abs-bl-c
abs-bl-ct
abs-bl-cb
abs-bl-cl
abs-bl-cr
abs-bl-tl
abs-bl-tr
abs-bl-br
abs-br
abs-br-c
abs-br-ct
abs-br-cb
abs-br-cl
abs-br-cr
abs-br-tl
abs-br-tr
abs-br-bl
abs-c-ct
abs-c-cb
abs-c-cl
abs-c-cr
abs-c-tl
abs-c-tr
abs-c-bl
abs-c-br
abs-ct
abs-ct-c
abs-ct-cb
abs-ct-cl
abs-ct-cr
abs-ct-tl
abs-ct-tr
abs-ct-bl
abs-ct-br
abs-cb
abs-cb-c
abs-cb-ct
abs-cb-cb
abs-cb-cl
abs-cb-cr
abs-cb-tl
abs-cb-tr
abs-cb-bl
abs-cb-br
abs-cl
abs-cl-c
abs-cl-ct
abs-cl-cb
abs-cl-cr
abs-cl-tl
abs-cl-tr
abs-cl-bl
abs-cl-br
abs-cr
abs-cr-c
abs-cr-ct
abs-cr-cb
abs-cr-cl
abs-cr-tl
abs-cr-tr
abs-cr-bl
abs-cr-br

position-fix

fix-f
fix-t
fix-b
fix-l
fix-r
fix-c
fix-tl
fix-tl-c
fix-tl-ct
fix-tl-cb
fix-tl-cl
fix-tl-cr
fix-tl-tr
fix-tl-bl
fix-tl-br
fix-tr
fix-tr-c
fix-tr-ct
fix-tr-cb
fix-tr-cl
fix-tr-cr
fix-tr-tl
fix-tr-bl
fix-tr-br
fix-bl
fix-bl-c
fix-bl-ct
fix-bl-cb
fix-bl-cl
fix-bl-cr
fix-bl-tl
fix-bl-tr
fix-bl-br
fix-br
fix-br-c
fix-br-ct
fix-br-cb
fix-br-cl
fix-br-cr
fix-br-tl
fix-br-tr
fix-br-bl
fix-c-ct
fix-c-cb
fix-c-cl
fix-c-cr
fix-c-tl
fix-c-tr
fix-c-bl
fix-c-br
fix-ct
fix-ct-c
fix-ct-cb
fix-ct-cl
fix-ct-cr
fix-ct-tl
fix-ct-tr
fix-ct-bl
fix-ct-br
fix-cb
fix-cb-c
fix-cb-ct
fix-cb-cb
fix-cb-cl
fix-cb-cr
fix-cb-tl
fix-cb-tr
fix-cb-bl
fix-cb-br
fix-cl
fix-cl-c
fix-cl-ct
fix-cl-cb
fix-cl-cr
fix-cl-tl
fix-cl-tr
fix-cl-bl
fix-cl-br
fix-cr
fix-cr-c
fix-cr-ct
fix-cr-cb
fix-cr-cl
fix-cr-tl
fix-cr-tr
fix-cr-bl
fix-cr-br

position-sticky

sticky-t	position: sticky top: 0
sticky-l	position: sticky left: 0
sticky-r	position: sticky right: 0
sticky-b	position: sticky bottom: 0

resize

xresize	resize: none
resize	resize: both
resize-h	resize: horizontal
resize-v	resize: vertical

scrollbar

no-scrollbars	@mixin no-scrollbars overflow: scroll overflow: -moz-scrollbars-none -ms-overflow-style: none scrollbar-width: none &::-webkit-scrollbar display: none

size

ww	width: 100%
hh	height: 100%
max-content	width: max-content
wN	width: N
hN	height: N
min-wN	min-width: N
min-hN	min-height: N
max-wN	max-width: N
max-hN	max-height: N

text

l	`text-align: left`
r	`text-align: right`
c	`text-align: center`
j	`text-align: justify`
vm	`vertical-align: middle`
vt	`vertical-align: top`
vb	`vertical-align: bottom`

left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left

right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right

center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center

justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify

text-ellipsis

ellipsis	Show single line of text, cut overflow with ellipsis
ellipsis2	Show only two lines of text, cut overflow with ellipsis (line-height + max-height). Cons: It's no allowed to use `padding-bottom` on elements with `ellipsis2`. Text on it won't be hidden.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, at deserunt dicta doloremque et facere harum hic incidunt, labore molestias nam nemo nisi pariatur placeat possimus quos reiciendis sed veniam?

theme

Work in progress.
This is an attempt to specify both color and background at the same time.

theme-navy	theme-navy
theme-blue	theme-blue
theme-aqua	theme-aqua
theme-teal	theme-teal
theme-olive	theme-olive
theme-green	theme-green
theme-lime	theme-lime
theme-yellow	theme-yellow
theme-orange	theme-orange
theme-red	theme-red
theme-maroon	theme-maroon
theme-fuchsia	theme-fuchsia
theme-purple	theme-purple
theme-black	theme-black
theme-gray	theme-gray
theme-silver	theme-silver

toggle

Work in progress.
This is an attempt to structure html/css for elements like checkboxes and radio buttons.

Define .toggle classes with .if-on and .if-off

The most basic toggle

.toggle.active .if-off { display: none; }
.toggle:not(.active) .if-on { display: none; }

<button v-on:click="toggle" v-bind:class="{active: is_active}" class="toggle">
    <span class="if-on">ON</span>
    <span class="if-off">OFF</span>
</button>

Use Case #1

There is a BUTTON with SVG icon and text inside. This two elements should have slightly different gray colors by default, but they should have the same red color when button is hovered by mouse.

One solution for this task is to use two separate elements with when generic .if-on and .if-off classes

<button class="toggle-hover app-color-silver1 app-hover-color-red">
    <svg-icon-close class="if-on app-color-silver2"></svg>
    <svg-icon-close class="if-off app-color-red"></svg>
    Disconnect
</button>

Another solution would be to use just one element but with a class prefixed with if-on

<button class="toggle-hover app-color-silver1 app-hover-color-red">
    <svg-icon-close class="if-on-app-color-red app-color-silver2"></svg>
    Disconnect
</button>

<style>
.toggle-hover .if-on-app-color-red { color: red; }
</style>

transform

hflip	transform: scale(-1, 1)
vflip	transform: scale(1, -1)
scaleN	transform: scale(N/100)
rotateD	transform: rotate(Ddeg)

user-select

no-user-select	user-select: none

z-index

zN	z-index: N

smcss — a css for prototyping

Installation

First try