1.1.1 • Published 12 months ago
@ivteplo/utilities.css v1.1.1
utilities.css
CSS library with utility classes
Installation
npm install @ivteplo/utilities.css
# or, if you prefer yarn:
yarn add @ivteplo/utilities.cssUsage
Via CDN
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">Import from JavaScript
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"Import from CSS
Using bundler:
@import "@ivteplo/utilities.css";Using CDN:
@import "https://unpkg.com/@ivteplo/utilities.css/build/main.min.css";Classes
Flexbox
.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
Fonts
- Font weights
.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 families
.font-system- default system font
Text
- Text alignment
.text-left.text-center.text-right.text-justify
Miscellaneous
Selection of text and other objects:
.selectable- enable selection.not-selectable- disable selection
Mouse cursor:
.cursor-pointer- show pointer cursor on hover
Development
Prerequisites
- Node.js and npm
Setup
- Clone the repository
git clone https://github.com/ivteplo/utilities.css- Navigate to the folder
cd utilities.css- Install dependencies
npm install- Happy hacking! 🎉
Scripts / tasks
- Make a new CSS build
npm run build- Rebuild on changes
npm run watch- Format source files
npm run format