Neverending Plethora of Modules


    0.3.0 • Public • Published



    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="">
    <!-- OR -->
    <link rel="stylesheet" href="">

    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>

    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 i @appsweet-co/spock-css

    DownloadsWeekly Downloads






    Unpacked Size

    171 kB

    Total Files


    Last publish


    • dperuo