@supra/pico

This is a super lightweight (~1.5KB) client side npm package for @picocss/pico.

Table of Contents

• @supra/pico
  • Table of Contents
  • Background
    • What is @picocss/pico?
  • Install
    • With NPM
    • With Yarn
    • With Pnpm
    • With Bun
  • Usage
    • Quickstart
  • Contributing
  • License

Background

What is @picocss/pico?

This is from the @picocss/pico docs.

A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.

Write HTML, Add Pico CSS, and Voilà!

I highly advise you to read the docs.

What the team behind Pico is doing is phenomenal. Whether or not you like the visual appeal of it, it is objectively a hyper performant, modern, and responsive approach to css, with a number of other out of the box benefits. If tailwindcss represents the bane of the growing complexity of the modern css landscape, @picocss/pico stands in refreshing and competent juxtapositon.

Install

With NPM

npm install @supra/pico

With Yarn

yarn add @supra/pico

With Pnpm

pnpm add @supra/pico

With Bun

bun add @supra/pico

Usage

Quickstart

import pico from '@supra/pico';

const { init, render, unmount } = pico();

/**
 * Sets up @picocss/pico in the DOM
 * */
init();

/**
 * Renders @picocss/pico theme widget in the DOM
 * */
render();

/**
 * Removes @picocss/pico theme widget from the DOM
 * Removes @picocss/pico link from the DOM
 * */
unmount();

Contributing

See the contributing file!

PRs accepted.

Small note: If editing the Readme, please conform to the standard-readme specification.

License

MIT ©