MACRO NEPAL
Complete Guide to HTML and CSS Reusable Components
awiskar acharya
March 13, 2026
3:01 pm

Table of Contents

  1. Introduction to Reusable Components
  2. CSS Methodologies
  3. Button Components
  4. Card Components
  5. Navigation Components
  6. Form Components
  7. Modal Components
  8. Alert and Notification Components
  9. Loading and Progress Components
  10. Layout Components
  11. Utility Classes
  12. Component Libraries and Frameworks
  13. Building a Component System
  14. Practical Examples
  15. Best Practices

Introduction to Reusable Components

Reusable components are the building blocks of modern web development. They allow you to create consistent, maintainable, and scalable user interfaces by defining pieces of UI that can be used multiple times across your website.

Why Reusable Components?

/* Without reusable components (messy and inconsistent) */
.header-button {
background: blue;
color: white;
padding: 10px 20px;
border-radius: 4px;
}
.sidebar-button {
background: blue;
color: white;
padding: 8px 16px;  /* Different padding! */
border-radius: 5px;   /* Different radius! */
}
/* With reusable components (consistent and maintainable) */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
cursor: pointer;
border: none;
}
.btn-primary {
background: #007bff;
color: white;
}
.btn-primary:hover {
background: #0056b3;
}

Benefits of Reusable Components

<!-- Benefits demonstration -->
<div class="benefits-grid">
<div class="benefit-card">
<h3>🎯 Consistency</h3>
<p>Same component looks the same everywhere</p>
</div>
<div class="benefit-card">
<h3>⚡ Efficiency</h3>
<p>Write once, use everywhere</p>
</div>
<div class="benefit-card">
<h3>🛠️ Maintainability</h3>
<p>Update in one place, changes everywhere</p>
</div>
<div class="benefit-card">
<h3>📦 Scalability</h3>
<p>Build complex UIs from simple pieces</p>
</div>
</div>

CSS Methodologies

BEM (Block Element Modifier)

BEM is a popular naming convention that makes CSS more maintainable and reusable.

/* BEM Naming Convention */
.block { }                    /* Component container */
.block__element { }          /* Part of component */
.block--modifier { }         /* Variant of component */
/* Example: Button component */
.btn {                        /* Block */
padding: 10px 20px;
border: none;
border-radius: 4px;
}
.btn__icon {                  /* Element */
margin-right: 8px;
font-size: 18px;
}
.btn--primary {               /* Modifier */
background: #007bff;
color: white;
}
.btn--large {                 /* Modifier */
padding: 15px 30px;
font-size: 18px;
}
/* HTML usage */
<button class="btn btn--primary">
<span class="btn__icon">👍</span>
Click me
</button>
<button class="btn btn--large">Large Button</button>

SMACSS (Scalable and Modular Architecture for CSS)

/* SMACSS Categories */
/* Base - Default styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* Layout - Major components */
.l-header { }
.l-sidebar { }
.l-main { }
.l-footer { }
/* Module - Reusable components */
.button { }
.card { }
.modal { }
/* State - Different states */
.is-active { }
.is-hidden { }
.is-disabled { }
/* Theme - Visual variations */
.theme-dark { }
.theme-light { }

OOCSS (Object-Oriented CSS)

/* OOCSS - Separate structure from skin */
/* Structure */
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Skin */
.btn-primary {
background: #007bff;
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-success {
background: #28a745;
color: white;
}
/* HTML */
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>

ITCSS (Inverted Triangle CSS)

/* ITCSS Layers (from low to high specificity) */
/* 1. Settings - Variables */
:root {
--color-primary: #007bff;
--spacing-unit: 8px;
--font-base: 16px;
}
/* 2. Tools - Mixins/functions */
/* (In preprocessors like SCSS) */
/* 3. Generic - Reset/normalize */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 4. Elements - Bare HTML elements */
body {
font-family: sans-serif;
line-height: 1.5;
}
h1, h2, h3 {
margin-bottom: 1rem;
}
/* 5. Objects - Layout patterns */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.grid {
display: grid;
gap: 20px;
}
/* 6. Components - UI components */
.card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* 7. Utilities - Overrides */
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.hidden { display: none; }

Button Components

Basic Button Component

<!-- Button variants -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-link">Link Button</button>
/* Button base styles */
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
line-height: 1.5;
font-family: inherit;
}
/* Button variants */
.btn-primary {
background: #007bff;
color: white;
}
.btn-primary:hover {
background: #0056b3;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #545b62;
}
.btn-success {
background: #28a745;
color: white;
}
.btn-success:hover {
background: #218838;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-danger:hover {
background: #c82333;
}
.btn-warning {
background: #ffc107;
color: #212529;
}
.btn-warning:hover {
background: #e0a800;
}
.btn-info {
background: #17a2b8;
color: white;
}
.btn-info:hover {
background: #138496;
}
.btn-light {
background: #f8f9fa;
color: #212529;
border: 1px solid #ddd;
}
.btn-light:hover {
background: #e2e6ea;
}
.btn-dark {
background: #343a40;
color: white;
}
.btn-dark:hover {
background: #23272b;
}
.btn-link {
background: transparent;
color: #007bff;
text-decoration: underline;
}
.btn-link:hover {
color: #0056b3;
background: transparent;
}

Button Sizes

<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary btn-block">Block Button</button>
/* Button sizes */
.btn-sm {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
}
.btn-lg {
padding: 15px 30px;
font-size: 18px;
border-radius: 6px;
}
.btn-block {
display: block;
width: 100%;
}

Button States

<button class="btn btn-primary" disabled>Disabled Button</button>
<button class="btn btn-primary loading">Loading...</button>
<button class="btn btn-primary active">Active Button</button>
/* Button states */
.btn:disabled,
.btn.disabled {
opacity: 0.65;
cursor: not-allowed;
pointer-events: none;
}
.btn.active {
transform: translateY(2px);
box-shadow: none;
}
/* Loading state */
.btn.loading {
position: relative;
color: transparent !important;
}
.btn.loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

Button Groups

<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
<div class="btn-group-vertical">
<button class="btn btn-primary">Top</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Bottom</button>
</div>
/* Button groups */
.btn-group {
display: inline-flex;
border-radius: 4px;
overflow: hidden;
}
.btn-group .btn {
border-radius: 0;
margin: 0;
}
.btn-group .btn:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .btn:not(:last-child) {
border-right: 1px solid rgba(0,0,0,0.1);
}
/* Vertical button groups */
.btn-group-vertical {
display: inline-flex;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
}
.btn-group-vertical .btn {
border-radius: 0;
margin: 0;
}
.btn-group-vertical .btn:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.btn-group-vertical .btn:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

Icon Buttons

<button class="btn btn-icon">
<span class="icon">👍</span>
<span class="btn-text">Like</span>
</button>
<button class="btn btn-icon-only" aria-label="Search">
<span class="icon">🔍</span>
</button>
<button class="btn btn-primary btn-with-icon">
<span class="icon">📧</span>
<span>Send Email</span>
</button>
/* Icon buttons */
.btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-icon-only {
padding: 10px;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.btn-icon-only .icon {
font-size: 20px;
}
.btn-with-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Icon positioning */
.btn-icon-right {
flex-direction: row-reverse;
}
.btn-icon-top {
flex-direction: column;
gap: 4px;
}

Card Components

Basic Card

<div class="card">
<img src="image.jpg" alt="Card image" class="card-img">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p class="card-text">This is a simple card with some content. It's reusable and can be used anywhere.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
/* Base card */
.card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: 20px;
}
.card-title {
margin: 0 0 10px 0;
font-size: 1.25rem;
font-weight: 600;
color: #333;
}
.card-text {
margin: 0 0 20px 0;
color: #666;
line-height: 1.5;
}

Card Variants

<!-- Horizontal card -->
<div class="card card-horizontal">
<img src="image.jpg" alt="Card image" class="card-img">
<div class="card-body">
<h3 class="card-title">Horizontal Card</h3>
<p class="card-text">This card has a horizontal layout.</p>
</div>
</div>
<!-- Card with header and footer -->
<div class="card">
<div class="card-header">
<h3>Card Header</h3>
</div>
<div class="card-body">
<p>Card content goes here</p>
</div>
<div class="card-footer">
<button class="btn btn-primary">Action</button>
</div>
</div>
<!-- Card with overlay -->
<div class="card card-overlay">
<img src="background.jpg" alt="Background" class="card-img">
<div class="card-overlay-content">
<h3 class="card-title">Overlay Title</h3>
<p class="card-text">Content over image</p>
</div>
</div>
/* Horizontal card */
.card-horizontal {
display: flex;
align-items: center;
}
.card-horizontal .card-img {
width: 200px;
height: 100%;
object-fit: cover;
}
/* Card header/footer */
.card-header {
padding: 15px 20px;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
font-weight: 600;
}
.card-footer {
padding: 15px 20px;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
}
/* Card with overlay */
.card-overlay {
position: relative;
}
.card-overlay .card-img {
filter: brightness(0.7);
}
.card-overlay-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
color: white;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.card-overlay .card-title {
color: white;
}
.card-overlay .card-text {
color: rgba(255,255,255,0.9);
}

Card Grid

<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
/* Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}

Navigation Components

Navbar Component

<nav class="navbar">
<div class="navbar-brand">
<a href="/" class="navbar-logo">
<img src="logo.png" alt="Logo">
<span>Brand Name</span>
</a>
</div>
<button class="navbar-toggler" aria-label="Toggle navigation">
<span class="toggler-icon"></span>
</button>
<div class="navbar-menu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<div class="navbar-actions">
<button class="btn btn-outline">Login</button>
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</nav>
/* Navbar styles */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
flex-wrap: wrap;
}
.navbar-brand {
display: flex;
align-items: center;
}
.navbar-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #333;
font-weight: 600;
font-size: 1.25rem;
}
.navbar-logo img {
height: 40px;
width: auto;
}
.navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.navbar-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1rem;
}
.nav-link {
text-decoration: none;
color: #666;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: all 0.3s;
}
.nav-link:hover {
color: #007bff;
background: rgba(0,123,255,0.1);
}
.nav-link.active {
color: #007bff;
font-weight: 600;
}
.navbar-actions {
display: flex;
gap: 0.5rem;
}
/* Mobile toggler */
.navbar-toggler {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
}
.toggler-icon {
display: block;
width: 25px;
height: 3px;
background: #333;
position: relative;
transition: all 0.3s;
}
.toggler-icon::before,
.toggler-icon::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: #333;
transition: all 0.3s;
}
.toggler-icon::before {
top: -8px;
}
.toggler-icon::after {
bottom: -8px;
}
/* Mobile responsive */
@media (max-width: 768px) {
.navbar-toggler {
display: block;
}
.navbar-menu {
display: none;
width: 100%;
flex-direction: column;
padding: 1rem 0;
}
.navbar-menu.show {
display: flex;
}
.navbar-nav {
flex-direction: column;
width: 100%;
text-align: center;
}
.navbar-actions {
width: 100%;
justify-content: center;
}
}

Tabs Component

<div class="tabs">
<div class="tab-nav">
<button class="tab-link active" data-tab="tab1">Tab 1</button>
<button class="tab-link" data-tab="tab2">Tab 2</button>
<button class="tab-link" data-tab="tab3">Tab 3</button>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Content for tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Content for tab 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Content for tab 3</p>
</div>
</div>
</div>
/* Tabs component */
.tabs {
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
}
.tab-nav {
display: flex;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.tab-link {
padding: 12px 24px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #666;
transition: all 0.3s;
position: relative;
}
.tab-link:hover {
color: #007bff;
background: rgba(0,123,255,0.05);
}
.tab-link.active {
color: #007bff;
font-weight: 600;
}
.tab-link.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: #007bff;
}
.tab-pane {
display: none;
padding: 20px;
}
.tab-pane.active {
display: block;
}

Breadcrumbs

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Home</a>
</li>
<li class="breadcrumb-item">
<a href="/products">Products</a>
</li>
<li class="breadcrumb-item">
<a href="/products/electronics">Electronics</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Smartphones
</li>
</ol>
</nav>
/* Breadcrumbs */
.breadcrumb {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
padding: 0 8px;
color: #6c757d;
}
.breadcrumb-item a {
color: #007bff;
text-decoration: none;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item.active {
color: #6c757d;
}

Pagination

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
/* Pagination */
.pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.page-item {
margin: 0 2px;
}
.page-link {
display: block;
padding: 8px 12px;
color: #007bff;
text-decoration: none;
border: 1px solid #dee2e6;
border-radius: 4px;
transition: all 0.3s;
}
.page-link:hover {
background: #e9ecef;
color: #0056b3;
}
.page-item.active .page-link {
background: #007bff;
color: white;
border-color: #007bff;
}
.page-item.disabled .page-link {
color: #6c757d;
pointer-events: none;
cursor: not-allowed;
background: #e9ecef;
}

Form Components

Input Component

<div class="form-group">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
<small class="form-text">We'll never share your email.</small>
</div>
<div class="form-group">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="select" class="form-label">Select option</label>
<select class="form-control" id="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label for="textarea" class="form-label">Message</label>
<textarea class="form-control" id="textarea" rows="3" placeholder="Enter message"></textarea>
</div>
/* Form components */
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
}
.form-control {
display: block;
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background: white;
border: 1px solid #ced4da;
border-radius: 4px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}
.form-control:disabled {
background: #e9ecef;
cursor: not-allowed;
}
.form-text {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
color: #6c757d;
}
/* Validation states */
.form-control.is-valid {
border-color: #28a745;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
}
.form-control.is-invalid {
border-color: #dc3545;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23dc3545' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath fill='%23ffffff' d='M5.5 3h1v4h-1zM5.5 7h1v2h-1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
}
.invalid-feedback {
display: block;
margin-top: 0.25rem;
color: #dc3545;
font-size: 0.875rem;
}
.valid-feedback {
display: block;
margin-top: 0.25rem;
color: #28a745;
font-size: 0.875rem;
}

Input Groups

<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>
<div class="input-group">
<button class="btn btn-outline-secondary">Button</button>
<input type="text" class="form-control" placeholder="With button">
</div>
/* Input groups */
.input-group {
display: flex;
align-items: stretch;
width: 100%;
}
.input-group .form-control {
flex: 1 1 auto;
width: 1%;
border-radius: 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
color: #495057;
text-align: center;
background: #e9ecef;
border: 1px solid #ced4da;
}
.input-group :first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.input-group :last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

Checkbox and Radio Components

<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkbox1">
<label class="form-check-label" for="checkbox1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkbox2" checked>
<label class="form-check-label" for="checkbox2">
Checked checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkbox3" disabled>
<label class="form-check-label" for="checkbox3">
Disabled checkbox
</label>
</div>
<!-- Radio buttons -->
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio1" checked>
<label class="form-check-label" for="radio1">
Option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio2">
<label class="form-check-label" for="radio2">
Option 2
</label>
</div>
<!-- Switch -->
<div class="form-switch">
<input class="form-check-input" type="checkbox" id="switch">
<label class="form-check-label" for="switch">Toggle switch</label>
</div>
/* Checkbox and radio */
.form-check {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.form-check-input {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
cursor: pointer;
}
.form-check-label {
cursor: pointer;
color: #333;
}
.form-check-input:disabled + .form-check-label {
color: #6c757d;
cursor: not-allowed;
}
/* Switch */
.form-switch {
display: flex;
align-items: center;
}
.form-switch .form-check-input {
width: 2.5rem;
height: 1.25rem;
appearance: none;
background: #dee2e6;
border-radius: 1rem;
position: relative;
transition: background 0.3s;
}
.form-switch .form-check-input::before {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
background: white;
border-radius: 50%;
top: 0.125rem;
left: 0.125rem;
transition: transform 0.3s;
}
.form-switch .form-check-input:checked {
background: #007bff;
}
.form-switch .form-check-input:checked::before {
transform: translateX(1.25rem);
}

Modal Components

Modal Component

<!-- Modal trigger -->
<button class="btn btn-primary" onclick="openModal('myModal')">Open Modal</button>
<!-- Modal -->
<div class="modal" id="myModal">
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<h3 class="modal-title">Modal Title</h3>
<button class="modal-close" onclick="closeModal('myModal')">&times;</button>
</div>
<div class="modal-body">
<p>This is the modal content. You can put anything here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal('myModal')">Cancel</button>
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.modal.show {
display: block;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
animation: fadeIn 0.3s;
}
.modal-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 8px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
animation: slideIn 0.3s;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #dee2e6;
}
.modal-title {
margin: 0;
font-size: 1.25rem;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
line-height: 1;
color: #6c757d;
}
.modal-close:hover {
color: #333;
}
.modal-body {
padding: 1rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem;
border-top: 1px solid #dee2e6;
}
/* Modal sizes */
.modal-sm .modal-container {
max-width: 300px;
}
.modal-lg .modal-container {
max-width: 800px;
}
.modal-xl .modal-container {
max-width: 1140px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translate(-50%, -60%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
// JavaScript for modal
function openModal(id) {
document.getElementById(id).classList.add('show');
document.body.style.overflow = 'hidden';
}
function closeModal(id) {
document.getElementById(id).classList.remove('show');
document.body.style.overflow = '';
}
// Close on overlay click
document.querySelectorAll('.modal-overlay').forEach(overlay => {
overlay.addEventListener('click', function() {
this.closest('.modal').classList.remove('show');
});
});
// Close on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.modal.show').forEach(modal => {
modal.classList.remove('show');
});
}
});

Alert and Notification Components

Alert Component

<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
<strong>Success!</strong> Your action was completed successfully.
</div>
<div class="alert alert-danger" role="alert">
<strong>Error!</strong> Something went wrong.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Please check your input.
</div>
<div class="alert alert-info" role="alert">
<strong>Info:</strong> New update available.
</div>
<!-- Alert with dismiss button -->
<div class="alert alert-warning alert-dismissible">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-dismiss="alert">&times;</button>
</div>
<!-- Alert with icon -->
<div class="alert alert-success">
<div class="alert-icon">✓</div>
<div class="alert-content">
<strong>Success!</strong> Your changes have been saved.
</div>
</div>
/* Alert styles */
.alert {
position: relative;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-primary {
color: #004085;
background: #cce5ff;
border-color: #b8daff;
}
.alert-secondary {
color: #383d41;
background: #e2e3e5;
border-color: #d6d8db;
}
.alert-success {
color: #155724;
background: #d4edda;
border-color: #c3e6cb;
}
.alert-danger {
color: #721c24;
background: #f8d7da;
border-color: #f5c6cb;
}
.alert-warning {
color: #856404;
background: #fff3cd;
border-color: #ffeeba;
}
.alert-info {
color: #0c5460;
background: #d1ecf1;
border-color: #bee5eb;
}
/* Dismissible alert */
.alert-dismissible {
padding-right: 3rem;
}
.btn-close {
position: absolute;
top: 0;
right: 0;
padding: 1rem;
background: none;
border: none;
cursor: pointer;
font-size: 1.25rem;
color: inherit;
}
.btn-close:hover {
opacity: 0.7;
}
/* Alert with icon */
.alert-icon {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
font-size: 1.25rem;
text-align: center;
border-radius: 50%;
}

Toast Notification

<!-- Toast container -->
<div class="toast-container">
<div class="toast show">
<div class="toast-header">
<strong class="mr-auto">Notification</strong>
<small>just now</small>
<button type="button" class="btn-close" data-dismiss="toast">&times;</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div class="toast show">
<div class="toast-header">
<strong class="mr-auto">Success</strong>
<small>2 seconds ago</small>
<button type="button" class="btn-close" data-dismiss="toast">&times;</button>
</div>
<div class="toast-body">
Your changes have been saved.
</div>
</div>
</div>
/* Toast notifications */
.toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1050;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 350px;
}
.toast {
background: white;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
overflow: hidden;
animation: slideInRight 0.3s;
width: 100%;
}
.toast.hide {
animation: slideOutRight 0.3s forwards;
}
.toast-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.toast-body {
padding: 1rem;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}

Loading and Progress Components

Spinners

<!-- Basic spinner -->
<div class="spinner"></div>
<!-- Spinner with different sizes -->
<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>
<!-- Colored spinners -->
<div class="spinner spinner-primary"></div>
<div class="spinner spinner-success"></div>
<div class="spinner spinner-danger"></div>
<!-- Spinner with text -->
<div class="spinner-container">
<div class="spinner"></div>
<span>Loading...</span>
</div>
<!-- Button with spinner -->
<button class="btn btn-primary" disabled>
<div class="spinner spinner-sm"></div>
<span>Loading...</span>
</button>
<!-- Growing spinner -->
<div class="spinner-grow"></div>
<div class="spinner-grow spinner-grow-sm"></div>
<div class="spinner-grow spinner-grow-lg"></div>
/* Spinner component */
.spinner {
display: inline-block;
width: 2rem;
height: 2rem;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #007bff;
animation: spin 1s linear infinite;
}
.spinner-sm {
width: 1rem;
height: 1rem;
border-width: 2px;
}
.spinner-lg {
width: 3rem;
height: 3rem;
border-width: 4px;
}
/* Colored spinners */
.spinner-primary {
border-top-color: #007bff;
}
.spinner-success {
border-top-color: #28a745;
}
.spinner-danger {
border-top-color: #dc3545;
}
/* Growing spinner */
.spinner-grow {
display: inline-block;
width: 2rem;
height: 2rem;
background: #007bff;
border-radius: 50%;
opacity: 0;
animation: grow 1.5s linear infinite;
}
.spinner-grow-sm {
width: 1rem;
height: 1rem;
}
.spinner-grow-lg {
width: 3rem;
height: 3rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes grow {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}

Progress Bars

<!-- Basic progress bar -->
<div class="progress">
<div class="progress-bar" style="width: 75%">75%</div>
</div>
<!-- Progress bar with different colors -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 45%">45%</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 30%">30%</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 15%">15%</div>
</div>
<!-- Striped progress bar -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 50%">50%</div>
</div>
<!-- Animated striped progress bar -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 80%">80%</div>
</div>
<!-- Stacked progress bars -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 35%">35%</div>
<div class="progress-bar bg-warning" style="width: 20%">20%</div>
<div class="progress-bar bg-danger" style="width: 15%">15%</div>
</div>
/* Progress bar */
.progress {
display: flex;
height: 1.5rem;
overflow: hidden;
background: #e9ecef;
border-radius: 4px;
margin: 1rem 0;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: white;
text-align: center;
white-space: nowrap;
background: #007bff;
transition: width 0.3s ease;
}
/* Colors */
.bg-success { background: #28a745; }
.bg-info { background: #17a2b8; }
.bg-warning { background: #ffc107; }
.bg-danger { background: #dc3545; }
/* Striped */
.progress-bar-striped {
background-image: linear-gradient(
45deg,
rgba(255,255,255,0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem;
}
/* Animated */
.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
from { background-position: 1rem 0; }
to { background-position: 0 0; }
}

Layout Components

Container

<!-- Fixed width container -->
<div class="container">
<h1>Fixed Container</h1>
<p>This container has a fixed max-width and centers itself.</p>
</div>
<!-- Fluid container (full width) -->
<div class="container-fluid">
<h1>Fluid Container</h1>
<p>This container takes the full width of the viewport.</p>
</div>
/* Container components */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.container-fluid {
width: 100%;
padding: 0 20px;
margin: 0 auto;
}
/* Responsive containers */
@media (min-width: 576px) {
.container { max-width: 540px; }
}
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 992px) {
.container { max-width: 960px; }
}
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}

Grid System

<!-- Basic grid -->
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
<!-- Grid with different column sizes -->
<div class="row">
<div class="col-4">4 columns</div>
<div class="col-8">8 columns</div>
</div>
<!-- Responsive grid -->
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Responsive column
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Responsive column
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Responsive column
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Responsive column
</div>
</div>
<!-- Grid with offsets -->
<div class="row">
<div class="col-4 offset-2">Offset by 2</div>
<div class="col-4">Normal column</div>
</div>
<!-- Nested grid -->
<div class="row">
<div class="col-8">
Parent column
<div class="row">
<div class="col-6">Nested 1</div>
<div class="col-6">Nested 2</div>
</div>
</div>
<div class="col-4">Sidebar</div>
</div>
/* Grid system */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
[class*="col-"] {
padding: 0 15px;
box-sizing: border-box;
}
/* Base columns */
.col {
flex: 1 0 0%;
}
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* Offsets */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }
/* Responsive breakpoints */
@media (min-width: 576px) {
.col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
.col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
.col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
.col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

Flex Utilities

<!-- Flex container -->
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- Justify content -->
<div class="flex justify-start">Items at start</div>
<div class="flex justify-center">Items centered</div>
<div class="flex justify-end">Items at end</div>
<div class="flex justify-between">Items with space between</div>
<div class="flex justify-around">Items with space around</div>
<!-- Align items -->
<div class="flex items-center" style="height: 200px;">
<div>Centered vertically</div>
</div>
<!-- Flex direction -->
<div class="flex flex-col">Column direction</div>
<div class="flex flex-row">Row direction</div>
<!-- Flex wrap -->
<div class="flex flex-wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- Gap -->
<div class="flex gap-1">Gap 0.25rem</div>
<div class="flex gap-2">Gap 0.5rem</div>
<div class="flex gap-4">Gap 1rem</div>
/* Flex utilities */
.flex {
display: flex;
}
/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
/* Align items */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
/* Flex direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }
/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }

Utility Classes

Spacing Utilities

/* Margin utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
/* Margin top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
/* Margin bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
/* Margin left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
/* Margin right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
/* Margin x (left & right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Margin y (top & bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
/* Padding top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
/* ... and so on for pb, pl, pr, px, py */

Typography Utilities

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
/* Text transform */
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
/* Font weight */
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
/* Font size */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
/* Text color */
.text-primary { color: #007bff; }
.text-secondary { color: #6c757d; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #17a2b8; }
.text-dark { color: #343a40; }
.text-light { color: #f8f9fa; }
.text-white { color: #fff; }
.text-muted { color: #6c757d; }
/* Text decoration */
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }

Display Utilities

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

Border Utilities

/* Border */
.border { border: 1px solid #dee2e6; }
.border-0 { border: none; }
.border-t { border-top: 1px solid #dee2e6; }
.border-b { border-bottom: 1px solid #dee2e6; }
.border-l { border-left: 1px solid #dee2e6; }
.border-r { border-right: 1px solid #dee2e6; }
/* Border colors */
.border-primary { border-color: #007bff; }
.border-secondary { border-color: #6c757d; }
.border-success { border-color: #28a745; }
/* Border radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.125rem; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

Component Libraries and Frameworks

Popular CSS Frameworks

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Foundation -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<!-- Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Creating Your Own Component Library

/* my-components.css - Your custom component library */
/* ==========================================================================
Variables
========================================================================== */
:root {
/* Colors */
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--danger: #dc3545;
--warning: #ffc107;
--info: #17a2b8;
--light: #f8f9fa;
--dark: #343a40;
/* Spacing */
--spacing-unit: 8px;
--container-max-width: 1200px;
/* Typography */
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-base: 16px;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Shadows */
--shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
--shadow-md: 0 4px 8px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
}
/* ==========================================================================
Reset / Base
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--dark);
}
/* ==========================================================================
Layout
========================================================================== */
@import 'layout/container.css';
@import 'layout/grid.css';
/* ==========================================================================
Components
========================================================================== */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/forms.css';
@import 'components/navbar.css';
@import 'components/modals.css';
/* ==========================================================================
Utilities
========================================================================== */
@import 'utilities/spacing.css';
@import 'utilities/typography.css';
@import 'utilities/display.css';

Building a Component System

Component Architecture

/* components/button.css */
.my-button {
/* Base styles */
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
/* Variants */
.my-button--primary {
background: var(--primary);
color: white;
}
.my-button--primary:hover {
background: var(--primary-dark, #0056b3);
}
.my-button--secondary {
background: var(--secondary);
color: white;
}
.my-button--outline {
background: transparent;
border-color: currentColor;
}
/* Sizes */
.my-button--sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
.my-button--lg {
padding: 1rem 2rem;
font-size: 1.125rem;
}
/* States */
.my-button:disabled,
.my-button[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Loading state */
.my-button--loading {
position: relative;
color: transparent !important;
}

Component Documentation

<!-- Component documentation example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Component Documentation</title>
<link rel="stylesheet" href="dist/my-components.css">
<style>
.doc-section {
margin: 2rem 0;
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 4px;
}
.doc-title {
margin: 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary);
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.code-block {
background: #f8f9fa;
padding: 1rem;
border-radius: 4px;
font-family: monospace;
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="container">
<h1 class="doc-title">Button Component</h1>
<!-- Variants -->
<section class="doc-section">
<h2>Variants</h2>
<div class="demo-grid">
<button class="my-button my-button--primary">Primary</button>
<button class="my-button my-button--secondary">Secondary</button>
<button class="my-button my-button--success">Success</button>
<button class="my-button my-button--danger">Danger</button>
<button class="my-button my-button--warning">Warning</button>
<button class="my-button my-button--info">Info</button>
<button class="my-button my-button--light">Light</button>
<button class="my-button my-button--dark">Dark</button>
<button class="my-button my-button--link">Link</button>
</div>
<div class="code-block">
<pre>&lt;button class="my-button my-button--primary"&gt;Primary&lt;/button&gt;</pre>
</div>
</section>
<!-- Sizes -->
<section class="doc-section">
<h2>Sizes</h2>
<div class="demo-grid">
<button class="my-button my-button--primary my-button--sm">Small</button>
<button class="my-button my-button--primary">Default</button>
<button class="my-button my-button--primary my-button--lg">Large</button>
</div>
<div class="code-block">
<pre>&lt;button class="my-button my-button--primary my-button--sm"&gt;Small&lt;/button&gt;</pre>
</div>
</section>
<!-- States -->
<section class="doc-section">
<h2>States</h2>
<div class="demo-grid">
<button class="my-button my-button--primary">Normal</button>
<button class="my-button my-button--primary" disabled>Disabled</button>
<button class="my-button my-button--primary my-button--loading">Loading</button>
</div>
</section>
<!-- Full width -->
<section class="doc-section">
<h2>Block Level</h2>
<button class="my-button my-button--primary" style="display: block; width: 100%;">
Full Width Button
</button>
</section>
</div>
</body>
</html>

Practical Examples

Example 1: Complete UI Component Showcase

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Component Library</title>
<style>
/* Import all components */
@import 'components/components.css';
/* Demo page styles */
.demo-page {
padding: 2rem;
background: #f5f5f5;
min-height: 100vh;
}
.demo-section {
background: white;
border-radius: 8px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.demo-section h2 {
margin-bottom: 1.5rem;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 0.5rem;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.demo-item {
padding: 1rem;
border: 1px dashed #dee2e6;
border-radius: 4px;
}
.demo-item h3 {
margin-bottom: 1rem;
color: #6c757d;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="demo-page">
<h1 style="margin-bottom: 2rem;">UI Component Library Demo</h1>
<!-- Buttons Section -->
<section class="demo-section">
<h2>Buttons</h2>
<div class="demo-grid">
<div class="demo-item">
<h3>Primary Button</h3>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary" disabled>Disabled</button>
</div>
<div class="demo-item">
<h3>Secondary Button</h3>
<button class="btn btn-secondary">Secondary</button>
</div>
<div class="demo-item">
<h3>Success Button</h3>
<button class="btn btn-success">Success</button>
</div>
<div class="demo-item">
<h3>Danger Button</h3>
<button class="btn btn-danger">Danger</button>
</div>
<div class="demo-item">
<h3>Button Sizes</h3>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>
</div>
<div class="demo-item">
<h3>Outline Buttons</h3>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-secondary">Secondary</button>
</div>
</div>
</section>
<!-- Cards Section -->
<section class="demo-section">
<h2>Cards</h2>
<div class="demo-grid">
<div class="demo-item">
<h3>Basic Card</h3>
<div class="card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="demo-item">
<h3>Card with Image</h3>
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img" alt="Placeholder">
<div class="card-body">
<h3 class="card-title">Card with Image</h3>
<p class="card-text">Card with image on top.</p>
</div>
</div>
</div>
<div class="demo-item">
<h3>Horizontal Card</h3>
<div class="card card-horizontal">
<img src="https://via.placeholder.com/150x150" class="card-img" alt="Placeholder">
<div class="card-body">
<h3 class="card-title">Horizontal Card</h3>
<p class="card-text">Card with horizontal layout.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Forms Section -->
<section class="demo-section">
<h2>Forms</h2>
<div class="demo-grid">
<div class="demo-item">
<h3>Input Fields</h3>
<div class="form-group">
<label class="form-label">Text Input</label>
<input type="text" class="form-control" placeholder="Enter text">
</div>
<div class="form-group">
<label class="form-label">Email Input</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="demo-item">
<h3>Select & Textarea</h3>
<div class="form-group">
<label class="form-label">Select</label>
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Textarea</label>
<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
</div>
</div>
<div class="demo-item">
<h3>Checkbox & Radio</h3>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1">
<label class="form-check-label" for="check1">Checkbox 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2">
<label class="form-check-label" for="check2">Checkbox 2</label>
</div>
<div class="form-check">
<input type="radio" name="radio" class="form-check-input" id="radio1">
<label class="form-check-label" for="radio1">Radio 1</label>
</div>
<div class="form-check">
<input type="radio" name="radio" class="form-check-input" id="radio2">
<label class="form-check-label" for="radio2">Radio 2</label>
</div>
</div>
<div class="demo-item">
<h3>Input Groups</h3>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="demo-item">
<h3>Validation States</h3>
<div class="form-group">
<input type="text" class="form-control is-valid" placeholder="Valid input">
<div class="valid-feedback">Looks good!</div>
</div>
<div class="form-group">
<input type="text" class="form-control is-invalid" placeholder="Invalid input">
<div class="invalid-feedback">Please check this field.</div>
</div>
</div>
</div>
</section>
<!-- Alerts Section -->
<section class="demo-section">
<h2>Alerts</h2>
<div class="alert alert-primary">Primary alert! Check it out.</div>
<div class="alert alert-success">Success alert! Your action completed.</div>
<div class="alert alert-danger">Danger alert! Something went wrong.</div>
<div class="alert alert-warning">Warning alert! Please check your input.</div>
<div class="alert alert-info">Info alert! New update available.</div>
<div class="alert alert-success alert-dismissible">
Dismissible alert
<button class="btn-close" data-dismiss="alert">&times;</button>
</div>
</section>
<!-- Navigation Section -->
<section class="demo-section">
<h2>Navigation</h2>
<!-- Simple Navbar -->
<nav class="navbar">
<div class="navbar-brand">
<a href="#" class="navbar-logo">MyApp</a>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
<div class="navbar-actions">
<button class="btn btn-outline-primary">Login</button>
<button class="btn btn-primary">Sign Up</button>
</div>
</nav>
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" style="margin-top: 1rem;">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Products</a></li>
<li class="breadcrumb-item active">Details</li>
</ol>
</nav>
<!-- Tabs -->
<div class="tabs" style="margin-top: 1rem;">
<div class="tab-nav">
<button class="tab-link active">Tab 1</button>
<button class="tab-link">Tab 2</button>
<button class="tab-link">Tab 3</button>
</div>
<div class="tab-content">
<div class="tab-pane active">Tab 1 content</div>
</div>
</div>
</section>
<!-- Loading Section -->
<section class="demo-section">
<h2>Loading States</h2>
<div class="demo-grid">
<div class="demo-item">
<h3>Spinners</h3>
<div class="spinner"></div>
<div class="spinner spinner-primary"></div>
<div class="spinner spinner-sm"></div>
</div>
<div class="demo-item">
<h3>Growing Spinners</h3>
<div class="spinner-grow"></div>
<div class="spinner-grow spinner-grow-sm"></div>
<div class="spinner-grow spinner-grow-lg"></div>
</div>
<div class="demo-item">
<h3>Progress Bars</h3>
<div class="progress">
<div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 50%">50%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">75%</div>
</div>
</div>
<div class="demo-item">
<h3>Button with Spinner</h3>
<button class="btn btn-primary">
<span class="spinner spinner-sm"></span>
Loading...
</button>
</div>
</div>
</section>
<!-- Utilities Section -->
<section class="demo-section">
<h2>Utility Classes</h2>
<div class="demo-grid">
<div class="demo-item">
<h3>Text Colors</h3>
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-muted">Muted text</p>
</div>
<div class="demo-item">
<h3>Text Alignment</h3>
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
</div>
<div class="demo-item">
<h3>Spacing</h3>
<div class="p-2 bg-light">Padding 2</div>
<div class="mt-2">Margin top 2</div>
<div class="mx-auto" style="width: 100px;">Centered</div>
</div>
<div class="demo-item">
<h3>Borders</h3>
<div class="border p-2">Border all</div>
<div class="border-t p-2">Border top</div>
<div class="rounded p-2 bg-light">Rounded corners</div>
</div>
</div>
</section>
<!-- Modal Trigger -->
<section class="demo-section">
<h2>Modal</h2>
<button class="btn btn-primary" onclick="document.getElementById('demoModal').classList.add('show')">
Open Modal
</button>
<div class="modal" id="demoModal">
<div class="modal-overlay" onclick="this.closest('.modal').classList.remove('show')"></div>
<div class="modal-container">
<div class="modal-header">
<h3 class="modal-title">Demo Modal</h3>
<button class="modal-close" onclick="document.getElementById('demoModal').classList.remove('show')">&times;</button>
</div>
<div class="modal-body">
<p>This is a demo modal showing our reusable modal component.</p>
<p>You can put any content here, including forms, text, or other components.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="document.getElementById('demoModal').classList.remove('show')">Close</button>
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</section>
</div>
<script>
// Close modal on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.modal.show').forEach(modal => {
modal.classList.remove('show');
});
}
});
</script>
</body>
</html>

Best Practices

Component Design Principles

/* 1. Single Responsibility Principle */
/* Each component should do one thing well */
/* Good */
.button {
/* Only button styling */
}
.button-group {
/* Only button group layout */
}
/* Bad - mixing concerns */
.button {
/* button styles */
display: flex; /* Should be in a layout component */
max-width: 1200px; /* Should be in container */
}
/* 2. Open/Closed Principle */
/* Open for extension, closed for modification */
/* Base button */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Extend without modifying base */
.btn-primary {
background: #007bff;
color: white;
}
.btn-outline {
background: transparent;
border: 2px solid currentColor;
}
/* 3. Composition over Inheritance */
/* Compose utilities instead of inheriting styles */
/* Utilities */
.text-center { text-align: center; }
.bg-primary { background: #007bff; }
.p-4 { padding: 1rem; }
/* Compose utilities in component */
.alert {
composes: p-4 text-center bg-primary;
/* Additional specific styles */
}
/* 4. Consistency */
/* Use consistent naming, spacing, and patterns */
/* Consistent spacing scale */
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
}
/* Consistent color palette */
:root {
--primary-100: #e6f2ff;
--primary-300: #7bb3ff;
--primary-500: #007bff;
--primary-700: #0056b3;
--primary-900: #003580;
}
/* 5. Reusability */
/* Make components context-independent */
/* Good - reusable */
.card {
background: white;
border-radius: 8px;
padding: 1rem;
}
/* Bad - context-dependent */
.homepage-card {
background: white;
border-radius: 8px;
padding: 1rem;
width: 500px; /* Too specific */
}

Component Organization

/* File structure */
components/
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── variables.css
├── layout/
│   ├── container.css
│   ├── grid.css
│   └── flex.css
├── ui/
│   ├── button.css
│   ├── card.css
│   ├── form.css
│   ├── modal.css
│   └── navigation.css
├── utils/
│   ├── spacing.css
│   ├── colors.css
│   └── display.css
└── main.css
/* main.css - Import all components */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/typography.css';
@import 'layout/container.css';
@import 'layout/grid.css';
@import 'ui/button.css';
@import 'ui/card.css';
@import 'ui/form.css';
@import 'utils/spacing.css';

Documentation Template

<!-- Component documentation template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Component: Button</title>
<link rel="stylesheet" href="../dist/components.css">
<style>
.doc-page {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.component-preview {
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 2rem;
margin: 2rem 0;
background: white;
}
.component-props {
background: #f8f9fa;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.prop-table {
width: 100%;
border-collapse: collapse;
}
.prop-table th,
.prop-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #dee2e6;
}
.code-example {
background: #1e1e1e;
color: #d4d4d4;
padding: 1rem;
border-radius: 4px;
font-family: monospace;
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="doc-page">
<h1>Button Component</h1>
<p class="text-muted">A reusable button component with multiple variants and sizes.</p>
<!-- Installation -->
<section>
<h2>Installation</h2>
<div class="code-example">
@import 'components/button.css';
</div>
</section>
<!-- Examples -->
<section>
<h2>Examples</h2>
<div class="component-preview">
<h3>Button Variants</h3>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
</div>
</div>
<div class="code-example">
&lt;button class="btn btn-primary"&gt;Primary&lt;/button&gt;
</div>
</section>
<!-- Props/Modifiers -->
<section>
<h2>Modifiers</h2>
<div class="component-props">
<h3>Variants</h3>
<table class="prop-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>btn-primary</code></td>
<td>Primary action button</td>
</tr>
<tr>
<td><code>btn-secondary</code></td>
<td>Secondary action button</td>
</tr>
<tr>
<td><code>btn-success</code></td>
<td>Success/positive action</td>
</tr>
<tr>
<td><code>btn-danger</code></td>
<td>Danger/destructive action</td>
</tr>
</tbody>
</table>
</div>
<div class="component-props">
<h3>Sizes</h3>
<table class="prop-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>btn-sm</code></td>
<td>Small button</td>
</tr>
<tr>
<td><code>btn-lg</code></td>
<td>Large button</td>
</tr>
</tbody>
</table>
</div>
<div class="component-props">
<h3>States</h3>
<table class="prop-table">
<thead>
<tr>
<th>Attribute/Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>disabled</code></td>
<td>Disabled button state</td>
</tr>
<tr>
<td><code>btn-block</code></td>
<td>Full-width button</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Accessibility -->
<section>
<h2>Accessibility</h2>
<ul>
<li>Use semantic <code>&lt;button&gt;</code> element when possible</li>
<li>Include <code>aria-label</code> for icon-only buttons</li>
<li>Maintain focus indicators</li>
<li>Ensure sufficient color contrast</li>
</ul>
</section>
<!-- Usage Guidelines -->
<section>
<h2>Usage Guidelines</h2>
<ul>
<li>Use primary buttons for main actions</li>
<li>Limit primary buttons to one per section</li>
<li>Use danger buttons for destructive actions</li>
<li>Place primary buttons prominently</li>
<li>Maintain consistent spacing</li>
</ul>
</section>
</div>
</body>
</html>

Conclusion

Reusable components are the foundation of scalable, maintainable web development. This comprehensive guide covered:

Key Takeaways

  1. Component Architecture: Build UIs from small, focused pieces
  2. CSS Methodologies: BEM, SMACSS, OOCSS for maintainable code
  3. Component Types: Buttons, cards, forms, navigation, modals, alerts, loaders
  4. Utility Classes: Create flexible, composable styling
  5. Documentation: Essential for team collaboration
  6. Consistency: Use design tokens and naming conventions
  7. Accessibility: Make components usable for everyone
  8. Performance: Optimize and organize for efficiency

Best Practices Summary

PrincipleDescription
Single ResponsibilityEach component does one thing
DRY (Don't Repeat Yourself)Reuse components, not code
CompositionBuild complex from simple
DocumentationAlways document usage
TestingTest components in isolation
VersioningTrack changes systematically
AccessibilityDesign for all users
PerformanceOptimize critical components

Next Steps

  1. Start with simple components (buttons, cards)
  2. Create a design system with consistent tokens
  3. Document your components thoroughly
  4. Build a component library
  5. Test across different browsers
  6. Optimize for performance
  7. Share and get feedback
  8. Iterate and improve

Remember: Good components are invisible - they just work and make development faster and more consistent!

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

Category : HTML AND CSS

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper