CSS library with utility classes
npm install @ivteplo/utilities.css
# or, if you prefer yarn:
yarn add @ivteplo/utilities.css
Add this piece of code into the <head>
tag in your HTML file:
<link
rel="stylesheet"
href="https://unpkg.com/@ivteplo/utilities.css/build/main.css"
/>
Or, if you want to use the minified version:
<link
rel="stylesheet"
href="https://unpkg.com/@ivteplo/utilities.css/build/main.min.css"
/>
This requires a bundler that supports importing CSS:
import "@ivteplo/utilities.css/build/main.css"
Or minified version:
import "@ivteplo/utilities.css/build/main.min.css"
Using bundler:
@import "@ivteplo/utilities.css";
Using CDN:
@import "https://unpkg.com/@ivteplo/utilities.css/build/main.min.css";
.row
— flexbox container with horizontal direction
.reversed-order
— reverse the order of items.wrap
— wrap the items that overflow the horizontal axis to a new line.reversed-wrap
— the same as .wrap
, but in reverse order.no-wrap
— disable wrapping of children.items-start
, .items-center
, .items-end
, .items-stretch
, .items-baseline
— vertical alignment of children.content-start
, .content-center
, .content-end
, .content-stretch
, .content-baseline
— vertical alignment of children if there some children have been wrapped to a new row.justify-start
, .justify-center
, .justify-end
, .justify-stretch
, .justify-baseline
— horizontal alignment of children.column
— flexbox container with vertical direction
.reversed-order
— reverse the order of items.wrap
— wrap the items that overflow the vertical axis to a new column.reversed-wrap
— the same as .wrap
, but in reverse order.no-wrap
— disable wrapping of children.items-start
, .items-center
, .items-end
, .items-stretch
, .items-baseline
— horizontal alignment of children.content-start
, .content-center
, .content-end
, .content-stretch
, .content-baseline
— horizontal alignment of children if there some children have been wrapped to a new column.justify-start
, .justify-center
, .justify-end
, .justify-stretch
, .justify-baseline
— vertical alignment of children.fill
— fill the parent, applies to a child of a flexbox container.font-thin
(100).font-extra-light
(200).font-light
(300).font-regular
(400).font-medium
(500).font-semibold
(600).font-bold
(700).font-extra-bold
(800).font-black
(900).font-normal
— normal style.font-italic
— italic font.font-oblique
— oblique font.font-system
— default system font.font-monospace
— cross-platform monospace font.font-serif
— cross-platform serif font.font-sans-serif
— cross-platform sans-serif font.text-left
.text-center
.text-right
.text-justify
Selection of text and other objects:
.selectable
— enable selection.not-selectable
— disable selectionMouse cursor:
.cursor-pointer
— show pointer cursor on hovergit clone https://github.com/ivteplo/utilities.css
cd utilities.css
npm install
npm run build
npm run watch
npm run format