npm i vbarbarosh/smcss
echo -e "@import 'smcss'\n.foo\n\t@include sm('w100 h100 red')" > a.sass
sass -I node_modules a.sass > a.css
| 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
|
| 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 |
| xborder-h | border-left: none |
| xborder-vl | border-top: none |
| xborder-vr | border-top: none |
| xborder-ht | border-top: none |
| xborder-hb | border-left: 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>
| 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) |
| bbox | box-sizing: border-box |
|---|---|
| cbox | box-sizing: content-box |
| xbutton | Reset any BUTTON styles. After it a BUTTON will have no look (e.g. just like DIV element). |
|---|
| 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-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 |
| xd | display: none |
|---|---|
| db | display: block |
| di | display: inline |
| dib | display: inline-block |
| dt | display: table |
| dtc | display: table-cell |
| flex-row | display: flex |
|---|---|
| flex-irow | display: inline-flex |
| flex-row-center | @include flex-row |
| 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-irow-center | @include flex-irow |
| flex-col | display: flex |
| flex-icol | display: inline-flex |
| flex-col-center | @include flex-col |
| 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-icol-center | @include flex-icol |
| 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-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 |
| hsplit | |
|---|---|
| vsplit |
| 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%
|
|---|
| 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
|
| 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 |
| 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 |
| xls | list-style: none |
|---|
| 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 |
| mhN | margin-left: N |
| mtN | margin-top: N |
| mlN | margin-left: N |
| mrN | margin-right: N |
| mbN | margin-bottom: N |
| 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.
.mg5 > :not(:last-child) { margin-bottom: 5px; }
.mg10 > :not(:last-child) { margin-bottom: 10px; }
.mi5 > :not(:last-child) { margin-right: 5px; }
.mi10 > :not(:last-child) { margin-right: 10px; }
| xo | opacity: 1 |
|---|---|
| oN | opacity: N/100 |
| xoutline | outline: none |
|---|---|
| outline | outline: 1px currentColor |
| oa | overflow: auto |
|---|---|
| oh | overflow: hidden |
| os | overflow: scroll |
| 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 |
| phN | padding-left: N |
| ptN | padding-top: N |
| plN | padding-left: N |
| prN | padding-right: N |
| pbN | padding-bottom: N |
| 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
| no-pointer-events | pointer-events: none |
|---|
| 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 |
| 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 }}
| 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 |
| sticky-t | position: sticky top: 0 |
|---|---|
| sticky-l | position: sticky left: 0 |
| sticky-r | position: sticky right: 0 |
| sticky-b | position: sticky bottom: 0 |
| xresize | resize: none |
|---|---|
| resize | resize: both |
| resize-h | resize: horizontal |
| resize-v | resize: vertical |
| no-scrollbars |
@mixin no-scrollbars
overflow: scroll
overflow: -moz-scrollbars-none
-ms-overflow-style: none
&::-webkit-scrollbar
display: none
|
|---|
| 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 |
| 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 |
| 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.
|
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 |
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>
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>
| hflip | transform: scale(-1, 1) |
|---|---|
| vflip | transform: scale(1, -1) |
| scaleN | transform: scale(N/100) |
| rotateD | transform: rotate(Ddeg) |
| no-user-select | user-select: none |
|---|
| zN | z-index: N |
|---|