Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ivteplo/utilities.css
CSS library with utility classes
https://github.com/ivteplo/utilities.css
css-library css-utilities css-utils sass-framework sass-library utility utility-classes utility-library
Last synced: 22 days ago
JSON representation
CSS library with utility classes
- Host: GitHub
- URL: https://github.com/ivteplo/utilities.css
- Owner: ivteplo
- License: apache-2.0
- Created: 2022-05-13T09:55:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-08T20:27:15.000Z (about 2 months ago)
- Last Synced: 2024-10-01T03:21:01.510Z (about 1 month ago)
- Topics: css-library, css-utilities, css-utils, sass-framework, sass-library, utility, utility-classes, utility-library
- Language: SCSS
- Homepage: https://npmjs.com/package/@ivteplo/utilities.css
- Size: 311 KB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# utilities.css
CSS library with utility classes
## Installation
```bash
npm install @ivteplo/utilities.css
# or, if you prefer yarn:
yarn add @ivteplo/utilities.css
```## Usage
### Via CDN
Add this piece of code into the `` tag in your HTML file:
```html
```
Or, if you want to use the minified version:
```html
```
### Import from JavaScript
This requires a bundler that supports importing CSS:
```javascript
import "@ivteplo/utilities.css/build/main.css"
```Or minified version:
```javascript
import "@ivteplo/utilities.css/build/main.min.css"
```### Import from CSS
Using bundler:
```css
@import "@ivteplo/utilities.css";
```Using CDN:
```css
@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 styles
- `.font-normal` — normal style
- `.font-italic` — italic font
- `.font-oblique` — oblique font
- Font families
- `.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
- Text alignment
- `.text-left`
- `.text-center`
- `.text-right`
- `.text-justify`### Miscellaneous
Selection of text and other objects:
- `.selectable` — enable selection
- `.not-selectable` — disable selectionMouse cursor:
- `.cursor-pointer` — show pointer cursor on hover
## Development
### Prerequisites
- Node.js and npm
### Setup
1. Clone the repository
```bash
git clone https://github.com/ivteplo/utilities.css
```2. Navigate to the folder
```bash
cd utilities.css
```3. Install dependencies
```bash
npm install
```4. Happy hacking! 🎉
### Scripts / tasks
- Make a new CSS build
```bash
npm run build
```- Rebuild on changes
```bash
npm run watch
```- Format source files
```bash
npm run format
```