• Introduction
  • Components
  • Cards
  • Forms
  • Alerts
  • Badges
  • Buttons
  • Images
  • Navbars
  • Footers
  • Classes
  • Background Color
  • Text Color
  • Border
  • Border Color
  • Flexbox
  • Grid
  • Typography
  • Margin
  • Padding
  • Opacity
  • Z-Index
  • Height
  • Width
  • Add-on Utilities

Get started with PixelCSS

Introducing PixelCSS, your go-to utility-first CSS framework inspired by TailwindCSS  for creating stylish and responsive web designs with ease. PixelCSS offers a simple and intuitive way to build visually appealing websites. With a wide range of components and utilities, you can customize your designs to suit your needs. PixelCSS empowers you to effortlessly craft modern websites directly within your HTML.

PixelCSS is a versatile CSS framework filled with handy classes like display-f, pt-2, jc-center, and text-red.  You can easily mix and match these classes to create any design you want right in your HTML code. Even if you use the same colors and sizes, you can make each project look completely different.

Installation

Using Link

You can directly import the CSS file in your html using the following link tag.

Link PixelCSS in your HTML

<link rel="stylesheet" href="https://yogesh-rai.github.io/pixelcss/dist/index.css" />

Using npm

You can also use npm to install pixelcss and import the index.css file in your App

Install PixelCSS with npm

$ npm install pixelcss

Import index.css file in your app.js

import "pixelcss/dist/index.css";

Note: Import your own css styles after you import pixelcss. This way, you can easily override pixelcss classes whenever necessary.