A library to create small, reusable CSS that scales as your website grows.
image-orientationThe image-orientation CSS property specifies a layout-independent correction to the orientation of an image.
<!-- image-orientation: from-image -->
<img class="Ior(fi)" />
image-renderingThe image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.
<!-- image-rendering: crisp-edges -->
<img class="Iren(ce)" />
accent-colorThe accent-color CSS property sets the accent color for user-interface controls generated by some elements.
<input type="checkbox" checked class="Acc(red)" />
caret-colorThe caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
<input value="This field uses a custom caret color!" class="Cac(red)" />
print-color-adjustThe print-color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
<!-- print-color-adjust: exact -->
<div class="Pca(ex)">
<p>Need more contrast!</p>
</div>
touch-actionThe touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
<!-- touch-action: pinch-zoom -->
<div class="Tcha(pz)">Some interactive thing</div>
will-changeThe will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.
<!-- will-change: scroll-position -->
<div class="Wc(sp)">Some content with overflow-scroll</div>
box-decoration-breakThe box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
<!-- box-decoration-break: clone -->
<span class="Bxdb(c)">The<br />quick<br />orange fox</span>
object-positionThe object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box.
<!-- object-position: center -->
<img class="Objp(c)" src="logo.svg" alt="Logo" />
place-contentThe place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.
<div class="D(f) Flw(w) Pc(fe,c)"> <!-- place-content: flex-end, center -->
<div class="small">Lorem</div>
<div class="small">Lorem<br />ipsum</div>
<div class="large">Lorem</div>
<div class="large">Lorem<br />ipsum</div>
<div class="large"></div>
<div class="large"></div>
</div>
place-itemsThe CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.
<div class="D(f) Pi(st)"> <!-- place-items: stretch -->
<div class="small">Lorem</div>
<div class="small">Lorem<br />ipsum</div>
<div class="large">Lorem</div>
<div class="large">Lorem<br />ipsum</div>
<div class="large"></div>
<div class="large"></div>
</div>
place-selfThe place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.
<article class="D(g)">
<span>First</span>
<span class="Ps(s,c)">Second</span> <!-- place-self: start, center -->
<span class="Ps(c,s)">Third</span> <!-- place-self: center, start -->
<span class="Ps(e)">Fourth</span> <!-- place-self: end -->
</article>
Added support for outline-color, outline-style, and outline-width properties.
<div class="Oc(red) Os(d) Ow(m)">Error!</div>
font-kerningThe font-kerning CSS property sets the use of the kerning information stored in a font.
<!-- font-kerning: auto -->
<p class="Kf(a)">Hello World!</p>
font-stretchThe font-stretch CSS property selects a normal, condensed, or expanded face from a font.
<!-- font-stretch: expanded -->
<p class="Fst(e)">Hello World!</p>
orphansThe orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.
<div class="Orp(2)">
<p>This is the first paragraph containing some text.</p>
<p>
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how orphans work.
</p>
</div>
widowsThe widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
<div class="Wid(1)">
<p>This is the first paragraph containing some text.</p>
<p>
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how widows work.
</p>
</div>
writing-modeThe writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
<!-- writing-mode: horizontal-tb -->
<p class="Wm(htb)">我家没有电脑.</p>
Citation: CSS property description and examples borrowed from MDN.