JSPM

pixel-perfect-css

3.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q31231F
  • License MIT

Pixel Perfect CSS is a powerful utility package designed to streamline the creation of visually appealing and responsive web application. With a focus on modern UI/UX principles, Pixel Perfect CSS provides a comprehensive set of CSS utilities to enhance your web development workflow.

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pixel-perfect-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Pixel Perfect CSS

    Pixel Perfect CSS is a utility-first CSS library designed to simplify the creation of responsive and reusable design components. It provides a set of CSS custom properties and utility classes for padding, margin, display, flex, and grid layouts, among others.

    Installation

    You can install Pixel Perfect CSS via npm:

    npm install pixel-perfect-css

    or if you are using yarn

    yarn add pixel-perfect-css

    Usage

    To use Pixel Perfect CSS in your project, include the CSS file in your HTML or import it into your CSS/SCSS files.

    Add below link tag

    <link rel="stylesheet" href="node_modules/pixel-perfect-css/css/output.css" />
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
          rel="stylesheet"
          href="node_modules/pixel-perfect-css/css/output.css"
        />
        <title>Pixel Perfect CSS Example</title>
      </head>
      <body>
        <div class="d-flex ai-center jc-center p-2 m-2">
          <p class="p-1 m-1">Hello, Pixel Perfect CSS!</p>
        </div>
      </body>
    </html>

    Available Sizes

    by default base = 16px; 1 : 1px 2 : 2px 3 : 3px 4 : 4px 8 : 8px 10 : base - 6px 20 : base + 4px 32: base X 2 48: base X 3 64: base X 4 80: base X 5 96: base X 6

    You can change base according to your project and choice by overwriting --base variable in your project! The above sizes follows good UI/UX principles. Use it wisely and consistently!