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"/>JavaScript
<script src="https://manish99verma.github.io/blox/script.js"></script>
-
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>
-
6. License
Blox is free to use for personal and commercial projects. No attribution required, but appreciated.