Simple and easy to use utilities CSS, inspired by tailwindcss, but the tailwindcss is more complex and verbose to use. This only focused on wrap the most common used css into class name. Most of them is steal from Bootstrap utilities.
npm install utilities-css
Or from CDN
<link href="https://unpkg.com/utilities-css" rel="stylesheet">
The naming is display-{value}, {value} is one
of none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex, grid.
<div class="display-block">some text</div>Beware the float utilities have no effect on flex items. float-{value}, {value} is one of left, right, none.
<div class="float-left">some text</div>The naming is position-{value}, {value} is one of static, relative, absolute, fixed, sticky.
<div class="position-relative">some text</div>The naming is visible or invisible.
<div class="invisible">some text</div>The naming as blow
overflow-{value}, {value} is one ofvisible, hidden, scroll, autooverflow-{x|y}-{value}, {value} is one ofvisible, hidden, scroll, auto
<div class="overflow-hidden">some text</div>
<div class="overflow-x-hidden">some text</div>The naming is z-{value}, {value} for 0|10|20|30|40|50|auto
<div class="z-10">some text</div>The classes are naming using the format {property}{sides}-{size}
The {property} is one of:
- m for classes that set margin
- p for classes that set padding
Where {sides} is one of:
- t for classes that set margin-top or padding-top
- b for classes that set margin-bottom or padding-bottom
- l for classes that set margin-left or padding-left
- r for classes that set margin-right or padding-right
- x for classes that set both _-left and _-right
- y for classes that set both _-top and _-bottom
- blank for classes that set a margin or padding on all 4 sides of the element
Where {size} is one of:
- 0 for classes that eliminate the margin or padding by setting it to 0
- 1 for classes that set the margin or padding to
$spacer * .25 - 2 for classes that set the margin or padding to
$spacer * .5 - 3 for classes that set the margin or padding to
$spacer - 4 for classes that set the margin or padding to
$spacer * 1.5 - 5 for classes that set the margin or padding to
$spacer * 3 - auto for classes that set the margin to auto
the
$spacerdefault 1rem
Example:
<!-- mt-0 set the element margin-top with 0 value -->
<div class="mt-0">some text</div>
<!-- px-0 set the element padding left and right with 0 value -->
<div class="px-0">some text</div>
<!-- mx-auto set the element margin left and right with auto value -->
<div class="mx-auto">some text</div>The shadow utility copied from bootstrap.
shadow-noneshadow-smshadowshadow-lg
<div class="shadow-sm">some text</div>The border default width is 1px solid #6c757d
borderborder-topborder-rightborder-bottomborder-left
Border style:
border-solidborder-dashedborder-dottedborder-none
Border width:
.border-{0|1|2|3|4|5}.border-{top|right|bottom|left}-{0|1|2|3|4|5}
Border radius:
roundedrounded-{sm|lg}radius sizerounded-{top|right|bottom|left}rounded-{top|right|bottom|left}-{sm|lg}rounded-circlecirclerounded-0no radius
<div class="border-top border-dashed rounded-top">some text</div>w-{25|50|75|100|auto}for width 25%, 50%, 75%, 100% and autoh-{25|50|75|100|auto}for height 25%, 50%, 75%, 100% and automw-100set the max-width 100%mh-100set the max-height 100%w-100set width 100%h-100set height 100%wh-100set both the with and height 100%
<div class="w-100">some text</div>Support most features of flex layout and let user quickly manage the layout, alignment and more of control. steal from Bootstrap flex utilities.
- flex direction
flex-rowflex-row-reverseflex-columnflex-column-reverse
- flex wrap
flex-wrapflex-nowrapflex-wrap-reverse
- flex grow and shrink
flex-fillflex-grow-0flex-grow-1flex-shrink-0flex-shrink-1
- justify content
justify-content-startjustify-content-endjustify-content-centerjustify-content-betweenjustify-content-around
- align items
align-items-startalign-items-endalign-items-centeralign-items-baselinealign-items-stretch
- align content
align-content-startalign-content-endalign-content-centeralign-content-betweenalign-content-aroundalign-content-stretch
- align self
align-self-autoalign-self-startalign-self-endalign-self-centeralign-self-baselinealign-self-stretch
- other
- flex-center (display flex and set both horizontal and vertical center)
<div class="display-flex justify-content-center align-content-center">
some text
</div>font weight
fw-lightfont weight with 300fw-normalfont weight with 400fw-boldfont weight with 700
font style
fst-italicfont-style with italicfst-normalfont-style with normal
font size
fs-1font-size with 2.5rem , it related to h1fs-2font-size with 2rem , it related to h2fs-3font-size with 1.75rem , it related to h3fs-4font-size with 1.5rem , it related to h4fs-5font-size with 1.25rem , it related to h5fs-6font-size with 1rem , it related to h6
text align
text-align-starttext-align with lefttext-align-endtext-align with righttext-align-centertext-align with center
white space
text-wrapwhite space with normaltext-nowrapwhite space with nowrap
word break
text-breakwith break-word
text transform
text-lowercasetext-transform with lowercasetext-uppercasetext-transform with uppercasetext-capitalizetext-transform with capitalize
text decoration
text-decoration-nonetext-decoration with nonetext-decoration-underlinetext-decoration with underlinetext-decoration-line-throughtext-decoration with line-through
line height
lh-1line-height with 1lh-smline-height with 1.25lh-baseline-height with 1.5lh-lgline-height with 2
text reset
text-resetreset text color with parent
clearfixtext-centerlist-unstyled
If you're interested in contributing to Utilities CSS, please read our CONTRIBUTING.md before submitting a pull request.