🎯 Learning Objectives
After completing this course, you will be able to:
- Understand the benefits and trade-offs of CSS frameworks
- Use Bootstrap for rapid prototyping
- Build modern UIs with Tailwind CSS
- Customize framework themes and components
- Choose the right framework for your project
- Implement responsive designs efficiently
- Optimize framework bundle sizes
⚡ Prerequisites
- HTML & CSS Course completed
- Understanding of responsive design
- Basic command line knowledge
- Node.js and npm installed
1. Introduction to CSS Frameworks
Why Use CSS Frameworks?
- Speed: Rapid development and prototyping
- Consistency: Uniform design across projects
- Responsive: Built-in responsive grid systems
- Components: Pre-built UI components
- Browser Support: Cross-browser compatibility
- Community: Large ecosystems and resources
Trade-offs
- Bundle Size: Can be large if not optimized
- Learning Curve: Framework-specific syntax
- Customization: May require overriding styles
- Generic Look: Sites may look similar
- Dependency: Tied to framework updates
2. Bootstrap Fundamentals
What is Bootstrap?
Bootstrap is the most popular CSS framework for building responsive, mobile-first websites. It includes a comprehensive grid system, pre-styled components, and JavaScript plugins.
Bootstrap Setup
<!-- CDN Method -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Site</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content here -->
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!-- NPM Method -->
npm install bootstrap
Bootstrap Grid System
<!-- Container -->
<div class="container">
<!-- Row with columns -->
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
<!-- Responsive columns -->
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Responsive Column
</div>
</div>
<!-- Auto-layout columns -->
<div class="row">
<div class="col">Equal width</div>
<div class="col">Equal width</div>
<div class="col">Equal width</div>
</div>
</div>
Bootstrap Components
<!-- Buttons -->
<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>
<button class="btn btn-outline-primary">Outline</button>
<!-- Cards -->
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Card content goes here.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
Success message!
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
Bootstrap Utilities
<!-- Spacing utilities -->
<div class="mt-3">Margin top 3</div>
<div class="p-4">Padding 4</div>
<div class="mx-auto">Horizontal center</div>
<!-- Display utilities -->
<div class="d-none d-md-block">Hidden on mobile</div>
<div class="d-flex justify-content-between">Flexbox</div>
<!-- Text utilities -->
<p class="text-center text-primary fw-bold">Centered blue bold text</p>
<p class="text-uppercase">Uppercase text</p>
<!-- Background utilities -->
<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-light border rounded p-3">Light background with border</div>
3. Tailwind CSS
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.
Tailwind Setup
# Install Tailwind
npm install -D tailwindcss
npx tailwindcss init
# tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
# CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;
# Build
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Tailwind Utility Classes
<!-- Layout -->
<div class="flex items-center justify-between p-4">
<div class="w-1/3">Left</div>
<div class="w-1/3">Center</div>
<div class="w-1/3">Right</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-blue-500 p-4 rounded">Item 1</div>
<div class="bg-blue-500 p-4 rounded">Item 2</div>
<div class="bg-blue-500 p-4 rounded">Item 3</div>
</div>
<!-- Button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>
<!-- Card -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="image.jpg" alt="Card">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Card Title</div>
<p class="text-gray-700 text-base">
Card content goes here.
</p>
</div>
</div>
<!-- Responsive Design -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
Responsive text size
</div>
<!-- Hover and Focus States -->
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300">
Interactive Button
</button>
Tailwind Custom Components
<!-- Using @apply directive in CSS -->
<style>
.btn-primary {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.card {
@apply bg-white rounded-lg shadow-md p-6;
}
</style>
<!-- Use in HTML -->
<button class="btn-primary">Primary Button</button>
<div class="card">Card content</div>
4. Bulma Framework
What is Bulma?
Bulma is a modern CSS framework based on Flexbox. It's lightweight, modular, and doesn't require JavaScript.
Bulma Components
<!-- Setup -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<!-- Columns -->
<div class="columns">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<!-- Button -->
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-success">Success</button>
<!-- Card -->
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="image.jpg" alt="Card">
</figure>
</div>
<div class="card-content">
<div class="content">
Card content here
</div>
</div>
</div>
<!-- Notification -->
<div class="notification is-success">
Success notification
</div>
5. Customization
Bootstrap Customization
// Custom Bootstrap with Sass
// custom.scss
// Override default variables
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$font-family-base: 'Roboto', sans-serif;
$border-radius: 0.5rem;
// Import Bootstrap
@import "~bootstrap/scss/bootstrap";
// Custom styles
.custom-button {
@extend .btn;
@extend .btn-primary;
border-radius: 2rem;
}
Tailwind Customization
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#007bff',
'brand-green': '#28a745',
},
fontFamily: {
'sans': ['Roboto', 'sans-serif'],
},
spacing: {
'72': '18rem',
'84': '21rem',
'96': '24rem',
},
borderRadius: {
'xl': '1rem',
'2xl': '2rem',
}
}
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
]
}
6. Framework Comparison
| Feature |
Bootstrap |
Tailwind |
Bulma |
| Approach |
Component-based |
Utility-first |
Component-based |
| Learning Curve |
Easy |
Moderate |
Easy |
| Customization |
Good |
Excellent |
Good |
| Bundle Size |
Large |
Small (with PurgeCSS) |
Medium |
| JavaScript |
Required for components |
Optional |
Not required |
| Best For |
Quick prototypes |
Custom designs |
Simple projects |
7. Best Practices
💡 Framework Best Practices
- Optimize Bundle Size: Remove unused CSS with PurgeCSS or tree-shaking
- Customize Thoughtfully: Override only what's necessary
- Maintain Consistency: Use framework conventions
- Semantic HTML: Don't sacrifice semantics for utility classes
- Accessibility: Ensure components are accessible
- Performance: Load only required components
- Documentation: Document custom components and utilities
- Version Control: Lock framework versions for stability
Practice Exercises
Create a landing page using Bootstrap with:
- Responsive navigation bar
- Hero section with call-to-action
- Feature cards in a grid
- Contact form
- Footer with social links
Build a dashboard interface with Tailwind:
- Sidebar navigation
- Top header with user menu
- Statistics cards
- Data table
- Responsive design
Customize a framework with your brand:
- Define custom color palette
- Set custom typography
- Create reusable components
- Build a style guide page
🎉 Summary
You've completed the CSS Frameworks course! You now know:
- When and why to use CSS frameworks
- Bootstrap grid system and components
- Tailwind utility-first approach
- Bulma's Flexbox-based system
- How to customize frameworks
- Framework comparison and selection
- Best practices for framework usage
Total points available: 10/10