• smcssv0.9.0

smcss — a css for prototyping

Installation

npm i vbarbarosh/smcss

First try

echo -e "@import 'smcss'\n.foo\n\t@include sm('w100 h100 red')" > a.sass
sass -I node_modules a.sass > a.css

background

xbgbackground: none
blackbackground: #000
graybackground: #888
silverbackground: #ccc
whitebackground: #fff
redbackground: #f88
greenbackground: #8f8
bluebackground: #88f
yellowbackground: #ff8
cyanbackground: #8ff
checkerboardbackground: 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

xborderborder: none
xborder-tborder-top: none
xborder-lborder-left: none
xborder-rborder-right: none
xborder-bborder-bottom: none
xborder-vborder-top: none
border-bottom: none
xborder-hborder-left: none
border-right: none
xborder-vlborder-top: none
border-left: none
border-bottom: none
xborder-vrborder-top: none
border-right: none
border-bottom: none
xborder-htborder-top: none
border-left: none
border-right: none
xborder-hbborder-left: none
border-right: none
border-bottom: none
borderborder: 1px solid
dashedborder: 1px dashed
xbrborder-radius: 0
brNborder-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

bboxbox-sizing: border-box
cboxbox-sizing: content-box

button

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

cursor

cur-aliascursor: alias
cur-all-scrollcursor: all-scroll
cur-autocursor: auto
cur-cellcursor: cell
cur-col-resizecursor: col-resize
cur-context-menucursor: context-menu
cur-copycursor: copy
cur-crosshaircursor: crosshair
cur-defaultcursor: default
cur-e-resizecursor: e-resize
cur-ew-resizecursor: ew-resize
cur-helpcursor: help
cur-inheritcursor: inherit
cur-initialcursor: initial
cur-movecursor: move
cur-n-resizecursor: n-resize
cur-ne-resizecursor: ne-resize
cur-nesw-resizecursor: nesw-resize
cur-no-dropcursor: no-drop
cur-nonecursor: none
cur-not-allowedcursor: not-allowed
cur-ns-resizecursor: ns-resize
cur-nw-resizecursor: nw-resize
cur-nwse-resizecursor: nwse-resize
cur-pointercursor: pointer
cur-progresscursor: progress
cur-row-resizecursor: row-resize
cur-s-resizecursor: s-resize
cur-se-resizecursor: se-resize
cur-sw-resizecursor: sw-resize
cur-textcursor: text
cur-vertical-textcursor: vertical-text
cur-w-resizecursor: w-resize
cur-waitcursor: wait

display

xddisplay: none
dbdisplay: block
didisplay: inline
dibdisplay: inline-block
dtdisplay: table
dtcdisplay: table-cell

display-flex

flex-rowdisplay: flex
flex-direction: row
flex-irowdisplay: inline-flex
flex-direction: row
flex-row-center@include flex-row
@include flex-center
flex-irow-center@include flex-irow
@include flex-center
flex-coldisplay: flex
flex-direction: col
flex-icoldisplay: inline-flex
flex-direction: col
flex-col-center@include flex-col
@include flex-center
flex-icol-center@include flex-icol
@include flex-center
flex-wrap
flex-nowrap
flex-wrap-r
flex-center
flex-align-startalign-items: flex-start
flex-align-endalign-items: flex-end
flex-align-centeralign-items: center
flex-align-baselinealign-items: baseline
flex-align-stretchalign-items: stretch
flex-justify-startjustify-content: flex-start
flex-justify-endjustify-content: flex-end
flex-justify-centerjustify-content: center
flex-justify-betweenjustify-content: space-between
flex-justify-aroundjustify-content: space-around
flex-growflex-grow: 1
flex-nogrowflex-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

display-flex-hsplit

hsplit
vsplit

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%

float

xffloat: none
flfloat: left
frfloat: right
xcclear: none
cbclear: both
clclear: left
crclear: 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

xfsfont-size: inherit
fsNfont-size: N
lsNletter-spacing: N
lhNline-height: N
nfont-style: normal
ifont-style: italic
qfont-style: oblique
iifont-style: inherit
bfont-weight: bold
xfwfont-weight: normal
fw3font-weight: 300
fw4font-weight: 400
fw5font-weight: 500
fw6font-weight: 600
fw7font-weight: 700
fw8font-weight: 800
fw9font-weight: 900

list

xlslist-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

opacity

xo
opacity: 1
oN
opacity: N/100

outline

xoutline
outline: none
outline
outline: 1px 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
{{ resulted_class }}

{{ resulted_class }}

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-tposition: sticky
top: 0
sticky-lposition: sticky
left: 0
sticky-rposition: sticky
right: 0
sticky-bposition: 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
    &::-webkit-scrollbar
        display: none

size

ww
width: 100%
hh
height: 100%
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

ltext-align: left
rtext-align: right
ctext-align: center
jtext-align: justify
vmvertical-align: middle
vtvertical-align: top
vbvertical-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

ellipsisShow 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?
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?
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-navytheme-navy
theme-bluetheme-blue
theme-aquatheme-aqua
theme-tealtheme-teal
theme-olivetheme-olive
theme-greentheme-green
theme-limetheme-lime
theme-yellowtheme-yellow
theme-orangetheme-orange
theme-redtheme-red
theme-maroontheme-maroon
theme-fuchsiatheme-fuchsia
theme-purpletheme-purple
theme-blacktheme-black
theme-graytheme-gray
theme-silvertheme-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

hfliptransform: scale(-1, 1)
vfliptransform: scale(1, -1)
scaleNtransform: scale(N/100)
rotateDtransform: rotate(Ddeg)

user-select

no-user-selectuser-select: none

z-index

zNz-index: N