Blox — CSS Component Library

Overview

Blox is a lightweight and responsive CSS component library that provides ready-to-use Buttons, Cards, and Navbars. It’s designed to be easy to integrate, customizable, and mobile-friendly out of the box.

Getting Started

• 1. Add Blox to Your Project

  To start using Blox, simply include the CSS inside the head and JavaScript at the end of body.

  CSS

  <link rel="stylesheet" href="https://manish99verma.github.io/blox/style.css"/>

  Copy

  JavaScript

  <script src="https://manish99verma.github.io/blox/script.js"></script>

  Copy

  ---

• 2. Components

  Blox comes with three types of UI components:

  • Buttons — Multiple styles like primary, outline, ghost, rounded, icon buttons, and more.
  • Cards — Variations including image cards, profile cards, product cards, hover effects, and more.
  • Navbars — Responsive navigation bars with fixed, sticky, centered, and icon-based layouts.

  ---

• 3. How to Use

  • Visit the Buttons, Cards, or Navbars pages from the navigation menu to explore all available variants.
  • Each component has:
    • Live Preview — See how it looks in real-time.
    • Code Snippet — Ready-to-copy HTML & CSS.
    • Copy Button — Instantly copy code to your clipboard.
  • All components are responsive by default.

  ---

• 4. Customization

  • Change colors, spacing, and typography using CSS variables in :root.
  • Supports light and dark themes — toggle dark mode to see changes instantly.
  • Override any class in your own stylesheet for custom styles.

  ---

• 5. Example

  <button class="btn btn-primary">Primary Button</button>

  Copy

  ---

• 6. License

  Blox is free to use for personal and commercial projects. No attribution required, but appreciated.