@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 and CSS Variables to keep things small and easy to work with.

Quick Start

Install Spock CSS using npm.

npm i @appsweet-co/spock-css

Import the CSS files as needed.

@import "~@appsweet-co/spock-css/build/spock.min.css";

You can also import Spock CSS directly from a CDN.

<link rel="stylesheet" href="https://unpkg.com/browse/@appsweet-co/spock-css@latest/dist/spock.min.css">

<!-- OR -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@appsweet-co/spock-css@latest/dist/spock.min.css">

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 flat and eliminate the need to invent new names.

🎯 PRO TIP: Read this article for more info on why Utility-First CSS is a good thing.

Logical Properties

We use logical properties instead of traditional directions and dimensions. This makes it easy to localize your projects for right-to-left languages. Example:

<h1 style="--margin-block-end:2rem">Hello World</h1>

CSS Variables

We use CSS Variables instead of CSS Classes. This keeps our library small and universal.

Native CSS Functions

We encourage the use of native CSS functions instead of traditional breakpoints like you see in frameworks like Bootstrap or Tailwind. 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:

<h1 style="--color:var(--primary); --font-size:var(--size-lg)">Hello World</h1>

We also make no assumptions about your project's baseline CSS. We built our library to work well with other CSS Frameworks Bootstrap or Tailwind.

Verbose Names

Abbreviations are hard to understand. Our utility names mirror the selectors they reference. This makes it easy to read and write. Examples:

<div style="--aspect-ratio:1; --width:100vw">
  <h1 style="--text-align:center">Hello World</h1>
</div>

Updating This README

We generate this README with the @appnest/readme tool.

Run npx @appnest/readme generate or npm run readme to update this file.

npm