Skip to content

Commit 64a60d8

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #130 from codeharborhub/dev-1
Done css framework docs
2 parents abc26f5 + 46c617b commit 64a60d8

File tree

6 files changed

+903
-5
lines changed

6 files changed

+903
-5
lines changed

‎docs/css/css-frameworks/bootstrap.mdx‎

Lines changed: 148 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,148 @@
1-
<ComingSoon />
1+
---
2+
title: "Bootstrap (Component-Based Framework)"
3+
description: "A detailed tutorial on Bootstrap, the most popular component-based CSS framework, covering its grid system, pre-built components, and customization options."
4+
keywords: [Bootstrap, CSS framework, component-based, responsive grid, Sass, JavaScript components, utility classes]
5+
tags: [Bootstrap, CSS framework, component-based, responsive grid, Sass, JavaScript components, utility classes]
6+
sidebar_label: Bootstrap
7+
---
8+
9+
Bootstrap is a free, open-source CSS framework directed at responsive, mobile-first frontend web development. It is the most well-known and widely used CSS framework, providing a collection of ready-made HTML, CSS, and JavaScript templates for common interface components.
10+
11+
While modern trends often favor utility-first systems like Tailwind CSS, Bootstrap remains an excellent choice for rapid prototyping, developing standard enterprise applications, and ensuring a consistent, accessible baseline design with minimal effort.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Core Concept: Component-Based Design
17+
18+
Bootstrap operates on a **component-based** philosophy. Instead of applying individual styling utilities, you apply a single semantic class that bundles all the necessary styles, states, and responsive behavior for a common UI element.
19+
20+
### Component Example
21+
22+
To create a primary-style button, you simply use the predefined classes:
23+
24+
```html title="index.html"
25+
<!-- The .btn class provides common button styling (padding, font, border). -->
26+
<!-- The .btn-primary class provides the specific color scheme (skin). -->
27+
<button type="button" class="btn btn-primary">
28+
Get Started
29+
</button>
30+
```
31+
32+
### Key Advantages
33+
34+
* **Rapid Prototyping:** Components look good out of the box, requiring minimal custom CSS.
35+
* **Consistency:** Provides a standard, cohesive look across the entire application.
36+
* **Ease of Use:** Low barrier to entry; developers only need to learn the class names, not the underlying CSS properties.
37+
38+
## 2. The Responsive Grid System
39+
40+
Bootstrap's most enduring and crucial feature is its Flexbox-based 12-column responsive grid system. It allows developers to define complex layouts that adapt seamlessly across various screen sizes using predefined classes.
41+
42+
### Grid Structure
43+
44+
The grid is built on three core concepts:
45+
46+
1. **Containers:** `.container` (fixed width based on breakpoint) or `.container-fluid` (full width).
47+
2. **Rows:** `.row` creates a horizontal group for columns, ensuring correct negative margin and Flexbox behavior.
48+
3. **Columns:** `.col-*` classes define the number of columns (out of 12) a section should span.
49+
50+
### Column Breakpoints
51+
52+
Bootstrap uses five default breakpoints to control column stacking and size:
53+
54+
| Prefix | Breakpoint | Device Type | Purpose |
55+
| :--- | :--- | :--- | :--- |
56+
| `col-` | $\lt 576px$ | Extra Small (Mobile) | Stacks vertically by default. |
57+
| `col-sm-` | $\ge 576px$ | Small (Landscape Mobile) | Defines behavior for small screens and up. |
58+
| `col-md-` | $\ge 768px$ | Medium (Tablet) | Defines behavior for tablets and up. |
59+
| `col-lg-` | $\ge 992px$ | Large (Desktop) | Defines behavior for desktops and up. |
60+
| `col-xl-` | $\ge 1200px$ | Extra Large | Defines behavior for large desktops. |
61+
62+
<AdsComponent />
63+
<br />
64+
65+
### Responsive Grid Example
66+
67+
This layout stacks on mobile, shows two equal columns on tablets, and three equal columns on desktops.
68+
69+
```html title="index.html"
70+
<div class="container">
71+
<div class="row">
72+
<!-- Full width on mobile, 6 columns on tablet, 4 columns on desktop -->
73+
<div class="col-12 col-md-6 col-lg-4">Item 1</div>
74+
<div class="col-12 col-md-6 col-lg-4">Item 2</div>
75+
<div class="col-12 col-md-12 col-lg-4">Item 3</div>
76+
</div>
77+
</div>
78+
```
79+
80+
## 3. Pre-built Components
81+
82+
Bootstrap provides dozens of pre-styled, functional components, often including necessary JavaScript behaviors (like toggling visibility or managing state).
83+
84+
| Component Category | Purpose | Example Component |
85+
| :--- | :--- | :--- |
86+
| **Navigation** | Site structure and menus. | Navbars, Tabs, Breadcrumbs |
87+
| **Content** | Displaying structured information. | Cards, Carousels, Collapse |
88+
| **Forms** | User input and validation feedback. | Input groups, Selects, Validation styles |
89+
| **Feedback** | Alerts and notifications. | Modals, Toasts, Alerts, Spinners |
90+
91+
### Component Example: Card
92+
93+
```html title="index.html"
94+
<div class="card" style="width: 18rem;">
95+
<img src="..." class="card-img-top" alt="Card image">
96+
<div class="card-body">
97+
<h5 class="card-title">Project Title</h5>
98+
<p class="card-text">A brief summary of the project.</p>
99+
<a href="#" class="btn btn-primary">Read More</a>
100+
</div>
101+
</div>
102+
```
103+
104+
## 4. Customization and Styling
105+
106+
Modern Bootstrap is highly customizable, moving away from the rigid themes of its early versions.
107+
108+
### A. Sass Variables
109+
110+
Bootstrap's source code is built with **Sass (SCSS)**. The most scalable way to customize Bootstrap is to override its default variables *before* the Sass files are compiled. This allows you to change global defaults like primary colors, font stacks, and spacing increments.
111+
112+
```scss title="custom/_variables.scss"
113+
// 1. Override Primary Color
114+
$primary: #007bff; // Default blue
115+
$primary: #4CAF50; // Custom green
116+
117+
// 2. Override Border Radius
118+
$border-radius: 0.5rem;
119+
$border-radius-lg: 0.75rem;
120+
121+
// Must import Bootstrap after defining variables
122+
@import "bootstrap/scss/bootstrap";
123+
```
124+
125+
<AdsComponent />
126+
<br />
127+
128+
### B. Utility API
129+
130+
Since Bootstrap 4, the framework has incorporated an increasing number of reusable utility classes (similar to Tailwind, but less comprehensive). These are primarily used for small adjustments like margin, padding, and display properties.
131+
132+
| Utility Class | Description |
133+
| :--- | :--- |
134+
| `m-3` | Sets `margin` on all sides to 1rem. |
135+
| `pt-4` | Sets `padding-top` to 1.5rem. |
136+
| `d-flex` | Sets `display: flex;`. |
137+
| `text-center` | Sets `text-align: center;`. |
138+
139+
These utilities are essential for fine-tuning the spacing and alignment of pre-built components without needing to write custom CSS.
140+
141+
## Try It Out
142+
143+
Now that you've seen the basics of Bootstrap's component-based framework, responsive grid system, and customization options, it's time to try it yourself!
144+
145+
<CodePenEmbed
146+
title="CodeHarborHub Bootstrap Demo"
147+
penId="XJdyKge"
148+
/>

‎docs/css/css-frameworks/bulma.mdx‎

Lines changed: 168 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,168 @@
1-
<ComingSoon />
1+
---
2+
title: "Bulma (Flexbox-First Framework)"
3+
description: "Explore Bulma, a modern, lightweight, and responsive CSS framework based entirely on Flexbox, offering intuitive components and an easy-to-read utility class structure."
4+
keywords: [Bulma CSS, Flexbox framework, CSS components, responsive design, modular CSS, lightweight framework]
5+
tags: [Bulma CSS, Flexbox framework, CSS components, responsive design, modular CSS, lightweight framework]
6+
sidebar_label: Bulma
7+
---
8+
9+
Bulma is a modern, open-source CSS framework that distinguishes itself by being built entirely on **Flexbox**. Unlike older frameworks, Bulma is purely CSS, it provides no built-in JavaScript components, making it lightweight and easy to integrate with any JavaScript framework (React, Vue, Angular, etc.).
10+
11+
Bulma is known for its highly readable class names and its strong focus on a clean, modular component architecture, offering a refreshing alternative to larger, more traditional frameworks.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Core Philosophy: Pure CSS and Modularity
17+
18+
Bulma's core design principles prioritize simplicity and separation of concerns:
19+
20+
### A. Pure CSS
21+
22+
Bulma consists only of CSS files. All interactive components (like dropdowns, modals, and tabs) require developers to supply their own JavaScript implementation to manage the necessary `is-active` or `is-hidden` state classes. This gives developers complete control over the front-end logic.
23+
24+
### B. Modularity
25+
26+
Bulma's source code is modular, broken down into 39 individual Sass files. This allows developers to easily import only the specific components they need (e.g., just the grid and buttons) to minimize the final stylesheet size.
27+
28+
### C. Readable Class Names
29+
30+
Bulma uses highly descriptive, hyphenated class names that are easy to remember and understand, such as `is-primary`, `is-fullwidth`, or `has-text-centered`.
31+
32+
## 2. The Responsive Flexbox Grid
33+
34+
Since Bulma is Flexbox-based from the ground up, its grid system is highly flexible and intuitive, relying on the `columns` and `column` classes.
35+
36+
### A. Structure
37+
38+
1. **Container:** `.container` (fixed width, centered) or `.is-fluid` (full width).
39+
2. **Columns Wrapper:** `.columns` initializes the Flexbox container, providing necessary negative margins and spacing.
40+
3. **Columns:** `.column` acts as the flexible item inside the wrapper.
41+
42+
### B. Size and Breakpoints
43+
44+
Columns are defined by using the fraction of the 12-column grid system (e.g., `is-half` for 6/12, `is-one-third` for 4/12).
45+
46+
Bulma uses four main breakpoints:
47+
48+
| Prefix | Breakpoint (Min-Width) | Device Type | Purpose |
49+
| :--- | :--- | :--- | :--- |
50+
| `is-mobile` | Default | Mobile (Default Stack) | Mobile-only classes. |
51+
| `is-tablet` | $\ge 769px$ | Tablet | Defines behavior for tablets and up. |
52+
| `is-desktop` | $\ge 1024px$ | Desktop | Defines behavior for desktops and up. |
53+
| `is-widescreen` | $\ge 1216px$ | Large Desktop | Defines behavior for larger screens. |
54+
55+
### Responsive Grid Example
56+
57+
This layout uses three equal columns on tablet size and larger, and stacks vertically on mobile.
58+
59+
```html title="index.html"
60+
<div class="container">
61+
<div class="columns is-desktop">
62+
63+
<!-- Each column takes 1/3 of the space on desktop and tablet -->
64+
<div class="column is-one-third">
65+
<p>Column 1 (4/12)</p>
66+
</div>
67+
<div class="column is-one-third">
68+
<p>Column 2 (4/12)</p>
69+
</div>
70+
<div class="column is-one-third">
71+
<p>Column 3 (4/12)</p>
72+
</div>
73+
</div>
74+
</div>
75+
```
76+
77+
<AdsComponent />
78+
<br />
79+
80+
## 3. Bulma Components
81+
82+
Bulma provides clean, modern designs for common UI elements using semantic and state-based modifiers.
83+
84+
### A. Button Modifiers
85+
86+
Buttons use the base class `.button` and are styled using color and size modifiers.
87+
88+
| Class Modifier | Description | Example |
89+
| :--- | :--- | :--- |
90+
| `is-primary` | Primary brand color. | `<button class="button is-primary">` |
91+
| `is-danger` | Red/Error color. | `<button class="button is-danger is-light">` |
92+
| `is-large` | Increases button size. | `<button class="button is-info is-large">` |
93+
| `is-loading` | Adds a loader/spinner visual. | `<button class="button is-loading">` |
94+
95+
### B. Media Object
96+
97+
A classic example of Bulma's modularity is the `media-object`, perfect for comments, tweets, or user listings.
98+
99+
```html title="index.html"
100+
<article class="media">
101+
<figure class="media-left">
102+
<p class="image is-64x64">
103+
<img src="https://placehold.co/128x128/ccc/fff?text=P" alt="Profile">
104+
</p>
105+
</figure>
106+
<div class="media-content">
107+
<div class="content">
108+
<p>
109+
<strong>John Doe</strong> <small>@jdoe</small> <small>31m</small>
110+
<br>
111+
Bulma makes clean, simple layouts incredibly fast to build.
112+
</p>
113+
</div>
114+
</div>
115+
</article>
116+
```
117+
118+
<AdsComponent />
119+
<br />
120+
121+
## 4. Utility Helpers (Modifiers)
122+
123+
Bulma relies heavily on helper classes to control state, color, and positioning. Many of these are prefixed with `is-` or `has-`.
124+
125+
| Helper Category | Example Class | CSS Property / Use |
126+
| :--- | :--- | :--- |
127+
| **Color** | `has-text-success`, `has-background-info` | Sets text color or background color using the predefined color palette. |
128+
| **Text Alignment** | `has-text-centered`, `has-text-right-tablet` | Controls text alignment, including responsive variants. |
129+
| **Sizing** | `is-fullwidth`, `is-half` | Sets width properties (e.g., `width: 100%`). |
130+
| **State** | `is-active`, `is-hidden` | Used to toggle visibility or state, typically controlled by JavaScript. |
131+
132+
### Example using Helpers
133+
134+
```html title="index.html"
135+
<div class="notification is-danger is-light has-text-centered">
136+
<button class="delete"></button>
137+
This action failed. Please check your credentials.
138+
</div>
139+
```
140+
141+
:::info Customization
142+
The most scalable way to customize Bulma is by using its provided Sass variables. By overriding the `$primary`, `$link`, and `$gap` variables in a custom SCSS file before importing the framework, you can apply your brand identity globally without touching Bulma's core files.
143+
:::
144+
145+
## Try It Yourself
146+
147+
Now that you've seen some of Bulma's core features, try building a simple layout with a navigation bar, a hero section, and a grid of cards using the framework's components and helpers.
148+
149+
<CodePenEmbed
150+
title="CodeHarborHub Bulma Demo"
151+
penId="EaKOKQy"
152+
/>
153+
154+
## 5. Resources for Further Learning
155+
156+
To dive deeper into Bulma and explore its full feature set, here are some helpful resources to assist you in building and navigating content.
157+
158+
### Official Documentation
159+
160+
The official documentation is the single most important resource, offering detailed explanations and live examples for every component and helper.
161+
162+
* Main Documentation: https://bulma.io/documentation/
163+
* Getting Started Guide: https://bulma.io/documentation/overview/start/
164+
165+
### Community and Source Code
166+
167+
* Bulma GitHub Repository: View the source code, contribute, or report bugs on the official repository. https://github.com/jgthms/bulma
168+
* Bulma Expo: A collection of websites and projects built with Bulma, great for design inspiration. https://bulma.io/expo/

0 commit comments

Comments
 (0)