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

Add the CSS file to your HTML as needed.

<link rel="stylesheet" href="./node_modules/@appsweet-co/spock-css/dist/spock.min.css">

You can also import Spock CSS directly from a CDN.

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

Remember to replace latest with a specifc version number when using the CDN. See Unpkg and jsDelivr 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 flat and eliminate the need to invent new names.

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

We include utilities for most CSS Properties. We exclude deprecated, experimental, and non-standard properties; float; and properties that use traditional directions and dimensions.

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.

:dart: PRO TIP: See Bonsai CSS for more info on why CSS Variables are a good thing.

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 like 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>