Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appsweet-co/spock-css
A lightweight CSS utility library using logical properties
https://github.com/appsweet-co/spock-css
css logical-properties responsive-layout sass utility-classes utility-library
Last synced: 6 days ago
JSON representation
A lightweight CSS utility library using logical properties
- Host: GitHub
- URL: https://github.com/appsweet-co/spock-css
- Owner: Appsweet-co
- License: mit
- Created: 2021-08-13T16:31:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-03T21:10:06.000Z (8 months ago)
- Last Synced: 2024-12-02T04:14:29.501Z (2 months ago)
- Topics: css, logical-properties, responsive-layout, sass, utility-classes, utility-library
- Language: SCSS
- Homepage: https://github.com/Appsweet-co/spock-css
- Size: 304 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@appsweet-co/spock-css
Lightweight CSS utilities using logical properties and CSS variables
Spock CSS is a lightweight CSS utility library. It uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) and [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables) to keep things small and easy to work with.
## Quick Start
Install Spock CSS using npm.
```zsh
npm i @appsweet-co/spock-css
```
Add the CSS file to your HTML as needed.
```html
```
You can also import Spock CSS directly from a CDN.
```html
```
Remember to replace `latest` with a specifc version number when using the CDN. See [Unpkg](https://unpkg.com/) and [jsDelivr](https://www.jsdelivr.com/) for details.
## Design Goals
### Utility First
Utility styles are easy to reuse. They do one thing in the same way every time with no side effects. They keep the [CSS specificity](https://specificity.keegan.st/) flat and eliminate the need to [invent new names](https://en.wikipedia.org/wiki/Principle_of_least_astonishment).
:dart: ***PRO TIP: Read [this article](https://frontstuff.io/in-defense-of-utility-first-css) for more info on why Utility-First CSS is a good thing.***
We include utilities for most [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS). We exclude deprecated, experimental, and non-standard properties; `float`; and properties that use [traditional directions and dimensions](#logical-properties).
### Logical Properties
We use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) instead of traditional directions and dimensions. This makes it easy to localize your projects for right-to-left languages. Example:
```html
Hello World
```
### CSS Variables
We use [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables) instead of CSS Classes. This keeps our library small and universal.
:dart: ***PRO TIP: See [Bonsai CSS](https://www.bonsaicss.com/#utility-complete-css) for more info on why CSS Variables are a good thing.***
### Native CSS Functions
We encourage the use of [native CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions) instead of traditional breakpoints like you see in frameworks like [Bootstrap](https://getbootstrap.com/docs/5.1/layout/breakpoints/) or [Tailwind](https://tailwindcss.com/docs/breakpoints). This keeps our library small and makes it easy for your code to work across all screens sizes.
### Theme Agnostic
We make no assumptions about your project's theme. Use CSS variables as needed to set properties. Example:
```html
Hello World
```
We also make no assumptions about your project's baseline CSS. We built our library to work well with other CSS Frameworks like [Bootstrap](https://getbootstrap.com/docs/5.1/layout/breakpoints/) or [Tailwind](https://tailwindcss.com/docs/breakpoints).
### Verbose Names
Abbreviations are hard to understand. Our utility names mirror the selectors they reference. This makes it easy to read and write. Examples:
```html
Hello World
```