Skip to content

Commit bf176cc

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #111 from codeharborhub/dev-1
added Box Model content
2 parents f3e35ba + 614496a commit bf176cc

13 files changed

Lines changed: 1109 additions & 141 deletions

‎docs/css/box-model/border.mdx‎

Lines changed: 119 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,119 @@
1-
<ComingSoon />
1+
---
2+
title: "The border Property"
3+
description: "Learn how the CSS border property defines the style, width, and color of the line separating an element's padding and margin."
4+
keywords: [CSS border, border property, border-style, border-width, border-color, box model, CodeHarborHub]
5+
tags: [CSS border, border property, border-style, border-width, border-color, box model]
6+
sidebar_label: border
7+
---
8+
9+
The **`border`** property is the structural line that surrounds an element, situated between the `padding` and the `margin`. It is the visual frame of the element.
10+
11+
A border requires three components to be visible: a **width**, a **style**, and a **color**.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## The `border` Shorthand
17+
18+
The most common and efficient way to define a border is using the `border` shorthand property, which accepts the width, style, and color in any order.
19+
20+
```css title="styles.css"
21+
selector {
22+
border: <border-width> <border-style> <border-color>;
23+
}
24+
```
25+
26+
### Example
27+
28+
```css title="styles.css"
29+
.highlight-box {
30+
/* 2px wide, solid line, indigo color */
31+
border: 2px solid #5C6BC0;
32+
}
33+
```
34+
35+
## Longhand Properties
36+
37+
For more granular control, especially when dealing with different styles or colors on specific sides, you can use the longhand properties.
38+
39+
### 1. `border-width`
40+
41+
Sets the thickness of the border. Values can be length units (`px`, `em`, `rem`) or keywords (`thin`, `medium`, `thick`).
42+
43+
| Syntax | Description |
44+
| :--- | :--- |
45+
| `border-width: 5px;` | All four sides are $5\text{px}$. |
46+
| `border-width: 1px 3px;` | Top/Bottom $1\text{px}$, Left/Right $3\text{px}$. |
47+
| `border-top-width: 10px;` | Only the top border is $10\text{px}$. |
48+
49+
### 2. `border-style` (Mandatory)
50+
51+
This is the most critical property—if the style is omitted or set to `none`, the border will not be displayed, regardless of its width or color.
52+
53+
| Style | Description |
54+
| :--- | :--- |
55+
| **`solid`** | A single, continuous line (most common). |
56+
| **`dotted`** | A series of dots. |
57+
| **`dashed`** | A series of short lines. |
58+
| **`double`** | Two parallel solid lines. |
59+
| **`groove`** | Creates a 3D grooved effect. |
60+
| **`ridge`** | Creates a 3D raised effect (opposite of groove). |
61+
| **`none`** | No border (default). |
62+
63+
<AdsComponent />
64+
<br />
65+
66+
### 3. `border-color`
67+
68+
Sets the color of the border, using color names, hex codes, or RGB/HSL values.
69+
70+
```css title="styles.css"
71+
.special-border {
72+
border-style: double;
73+
border-width: 4px;
74+
border-color: #FFB300; /* Amber */
75+
}
76+
```
77+
78+
## Side-Specific Borders
79+
80+
You can define all three properties (width, style, and color) for a single side:
81+
82+
| Property | Description |
83+
| :--- | :--- |
84+
| `border-top` | Shorthand for top width, style, and color. |
85+
| `border-right` | Shorthand for right width, style, and color. |
86+
| `border-bottom` | Shorthand for bottom width, style, and color. |
87+
| `border-left` | Shorthand for left width, style, and color. |
88+
89+
```css tiutle="styles.css"
90+
/* Example: Border only on the left side */
91+
.sidebar-note {
92+
border-left: 6px solid #4CAF50; /* Thick green line */
93+
}
94+
```
95+
96+
## Shaping Corners with `border-radius`
97+
98+
While technically not part of the Box Model layers (width, padding, margin), the **`border-radius`** property is essential for styling the border and corner shapes. It allows you to round the corners of the element's border.
99+
100+
| Syntax | Description |
101+
| :--- | :--- |
102+
| `border-radius: 10px;` | Rounds all four corners equally. |
103+
| `border-radius: 10px 0;` | Top-Left/Bottom-Right $10\text{px}$, Top-Right/Bottom-Left $0\text{px}$. |
104+
105+
```css title="styles.css"
106+
.rounded-button {
107+
border: 1px solid #7986CB;
108+
border-radius: 8px; /* Smooth corners */
109+
}
110+
```
111+
112+
## Interactive `border` Demo
113+
114+
Use the live editor to experiment with different border styles and colors. Note how the border sits between the inner content/padding and the outer margin.
115+
116+
<CodePenEmbed
117+
title="Interactive border Demo"
118+
penId="raeYoyr"
119+
/>

‎docs/css/box-model/box-shadow.mdx‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,94 @@
1-
<ComingSoon />
1+
---
2+
title: "The box-shadow Property"
3+
description: "Learn how the CSS box-shadow property adds visual depth and dimension to elements, enhancing UI design without affecting the document layout."
4+
keywords: [CSS box-shadow, shadow effects, UI depth, design effects, box model, CodeHarborHub]
5+
tags: [CSS box-shadow, shadow effects, UI depth, design effects, box model]
6+
sidebar_label: "box-shadow"
7+
---
8+
9+
The **`box-shadow`** property allows you to cast one or more drop shadows from the frame of an element. This property is purely visual; it **does not affect the element's size, position, or the flow of surrounding content** in the document layout.
10+
11+
It is a powerful tool for enhancing the user interface, creating a sense of depth, lifting elements off the page, and indicating interactivity.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## Syntax and Parameters
17+
18+
The `box-shadow` property can take multiple values, separated by commas, to create complex, stacked shadows. A single shadow is defined by up to six components:
19+
20+
```css title="styles.css"
21+
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
22+
```
23+
24+
### 1. `<offset-x>` and `<offset-y>` (Required)
25+
26+
These define where the shadow falls horizontally and vertically.
27+
28+
* Positive `offset-x` moves the shadow to the right.
29+
* Positive `offset-y` moves the shadow down.
30+
31+
### 2. `<blur-radius>` (Optional, Recommended)
32+
33+
The higher the value, the larger and lighter the shadow edge becomes. A value of `0` means the shadow is a sharp, solid shape.
34+
35+
### 3. `<spread-radius>` (Optional)
36+
37+
A positive value increases the size of the shadow uniformly in all directions, and a negative value shrinks it.
38+
39+
### 4. `<color>` (Optional, Recommended)
40+
41+
The color of the shadow. It's common to use `rgba()` to include transparency, making the shadow softer and more realistic (e.g., `rgba(0, 0, 0, 0.3)`).
42+
43+
### 5. `inset` (Optional)
44+
45+
If included, the shadow is drawn **inside** the element's border, creating an embossed or depressed effect.
46+
47+
<AdsComponent />
48+
<br />
49+
50+
## Common Shadow Recipes
51+
52+
### 1. Basic Drop Shadow
53+
54+
A subtle, soft shadow that makes the element appear slightly raised.
55+
56+
```css title="styles.css"
57+
.card {
58+
/* x: 0, y: 4px, blur: 8px, spread: 0, color: black with 20% opacity */
59+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
60+
}
61+
```
62+
63+
### 2. Multi-layered Shadow
64+
65+
Stacking shadows to create a deeper, more realistic sense of elevation.
66+
67+
```css title="styles.css"
68+
.elevated {
69+
box-shadow:
70+
/* First, subtle layer for soft general shadow */
71+
0 1px 3px rgba(0, 0, 0, 0.12),
72+
/* Second, stronger layer for defined lift */
73+
0 1px 2px rgba(0, 0, 0, 0.24);
74+
}
75+
```
76+
77+
### 3. Inset Shadow
78+
79+
Creates a feeling that the element is pressed down or concave, often used for input fields or containers.
80+
81+
```css title="styles.css"
82+
.pressed-input {
83+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
84+
}
85+
```
86+
87+
### Interactive `box-shadow` Demo
88+
89+
Use the live editor to change the values for offset, blur, spread, and color, and toggle the `inset` keyword to see how the visual depth of the box is altered without changing its size.
90+
91+
<CodePenEmbed
92+
title="Interactive box-shadow Demo"
93+
penId="raepGeb"
94+
/>

‎docs/css/box-model/box-sizing.mdx‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,67 @@
1-
<ComingSoon />
1+
---
2+
title: "The box-sizing Property"
3+
description: "Understand the fundamental box-sizing property, which controls how an element's width and height are calculated in relation to its padding and border."
4+
keywords: [CSS box-sizing, content-box, border-box, box model calculation, responsive design, CodeHarborHub]
5+
tags: [CSS box-sizing, content-box, border-box, box model calculation, responsive design]
6+
sidebar_label: "box-sizing"
7+
---
8+
9+
The **`box-sizing`** property is the single most important tool for modern CSS layout. It fundamentally changes the way the browser calculates an element's total width and height based on the values you set.
10+
11+
Without `box-sizing`, layout can be frustratingly unpredictable because adding padding or a border changes the total size of the element. `box-sizing` provides a solution to this.
12+
13+
It accepts two main values: `content-box` (the default) and `border-box` (the recommended value).
14+
15+
<AdsComponent />
16+
<br />
17+
18+
## 1. `box-sizing: content-box;` (The Default)
19+
20+
This is the standard, original CSS Box Model behavior.
21+
22+
* **Calculation:** `width` and `height` properties apply **only** to the **Content Area**.
23+
* **Result:** The element's total size on the page is the sum of its Content size, plus any Padding, plus any Border.
24+
25+
$
26+
\text{Total Width} = \text{Content Width} + \text{Padding}_L + \text{Padding}_R + \text{Border}_L + \text{Border}_R
27+
$
28+
29+
### Drawbacks
30+
31+
If you set a container to `width: 50%;` and then add `padding: 10px;`, the element will actually be wider than $50\%$ of its parent, often causing layout breakage or horizontal scrolling.
32+
33+
## 2. `box-sizing: border-box;` (The Modern Standard)
34+
35+
This behavior is far more intuitive for layout work.
36+
37+
* **Calculation:** `width` and `height` properties apply to the **Content Area + Padding + Border**.
38+
* **Result:** Padding and Border are absorbed *into* the declared `width` and `height`. The Content Area shrinks to accommodate them. The element's final size remains exactly the size you declared.
39+
40+
$$
41+
\text{Total Width} = \text{Declared Width}
42+
$$
43+
44+
### Recommendation
45+
46+
For virtually all modern web development, it is recommended to set `box-sizing: border-box;` globally using the universal selector:
47+
48+
```css title="styles.css"
49+
/* This is often the first CSS rule in a modern stylesheet */
50+
*, *::before, *::after {
51+
box-sizing: border-box;
52+
}
53+
```
54+
55+
This ensures that $100\text{px}$ is always $100\text{px}$—including the padding and border—making responsive grid systems much easier to manage.
56+
57+
<AdsComponent />
58+
<br />
59+
60+
## Interactive `box-sizing` Demo
61+
62+
In the demo below, both boxes have the same CSS dimensions (`width: 300px`, `padding: 20px`, `border: 10px`). Observe how the final visual size differs based on the `box-sizing` value.
63+
64+
<CodePenEmbed
65+
title="Interactive box-sizing Demo"
66+
penId="EaKovRG"
67+
/>

‎docs/css/box-model/css-units/absolute-vs-relative.mdx‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,78 @@
1-
<ComingSoon />
1+
---
2+
title: "Absolute vs. Relative Units"
3+
description: "Understand the fundamental difference between absolute and relative CSS units and when to use each for optimal responsiveness and accessibility."
4+
keywords: [CSS units, absolute units, relative units, px, em, rem, responsiveness, accessibility, web design]
5+
tags: [CSS units, absolute units, relative units, px, em, rem, responsiveness, accessibility, web design]
6+
sidebar_label: "Absolute vs. Relative"
7+
---
8+
9+
When defining the size of any Box Model property (width, margin, padding, font-size, etc.), you need to use a unit of measurement. CSS units are fundamentally categorized into two types: **Absolute** and **Relative**.
10+
11+
Choosing the right unit is critical for creating responsive, scalable, and accessible web experiences.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Absolute Units (Fixed)
17+
18+
Absolute length units resolve to a fixed size, regardless of the size of the viewport, the element's parent, or the user's settings. Once declared, the physical size of the element on the screen is fixed (assuming no zooming).
19+
20+
The most common absolute unit is the pixel.
21+
22+
| Unit | Description | Best for... |
23+
| :--- | :--- | :--- |
24+
| **`px`** | **Pixels**. The number of dots on a screen. The most commonly used absolute unit. | Small borders, shadows, or when you need guaranteed pixel-perfect alignment. |
25+
| **`pt`** | **Points**. $1\text{pt}$ is $1/72$ of an inch. Mainly used in print styles. | Print stylesheets (not generally used for screen). |
26+
27+
### When to use `px`:
28+
29+
* When the unit must not scale (e.g., a $1\text{px}$ border).
30+
* When a specific size is required and responsiveness is managed by other elements (like `max-width`).
31+
32+
### Drawbacks of `px`:
33+
34+
* **Poor Accessibility:** When a user increases the base font size in their browser settings (for better readability), any text sized with `px` will not scale, leading to a poor user experience.
35+
36+
## 2. Relative Units (Scalable)
37+
38+
Relative length units define a size that is relative to another length property. This could be the size of the parent element, the root element, or the viewport dimensions.
39+
40+
Relative units are the foundation of **responsive and accessible design** because they automatically scale when the context changes.
41+
42+
### Common Relative Units
43+
44+
| Unit | Description | Relative To... | Best for... |
45+
| :--- | :--- | :--- | :--- |
46+
| **`em`** | **Element M.** Based on the font size of the **parent element**. | Creating component-specific scaling (e.g., button padding relative to its own font size). |
47+
| **`rem`** | **Root EM.** Based on the font size of the **root `<html>` element**. | Typography, margins, and padding. The preferred unit for large-scale font sizing. |
48+
| **`%`** | **Percentage.** Calculated as a percentage of the parent element's size. | Width and height of layout containers. |
49+
| **`vw`** | **Viewport Width.** $1\text{vw}$ is $1\%$ of the viewport width. | Full-screen hero sections, fluid typography, or elements that must scale with the window. |
50+
| **`vh`** | **Viewport Height.** $1\text{vh}$ is $1\%$ of the viewport height. | Elements that must fill the vertical screen space (e.g., `height: 100vh`). |
51+
52+
<AdsComponent />
53+
<br />
54+
55+
## Key Concept: `em` vs. `rem`
56+
57+
The difference between `em` and `rem` is crucial for typography and spacing consistency.
58+
59+
### `em` (The Cascading Unit)
60+
61+
If you use `em` for the font size of a child element, and that child is nested several levels deep, the size can become unpredictable because it compounds based on every parent's font size.
62+
63+
### `rem` (The Stable Unit)
64+
65+
The `rem` unit solves the cascading problem by *always* basing its value on the font size of the root `<html>` element. If the user changes their browser's base font size, all `rem`-sized elements scale uniformly, maintaining the intended spatial relationships.
66+
67+
:::tip Accessibility Recommendation
68+
For typography, margins, and padding, **`rem`** is generally the recommended unit because it ensures that all elements scale correctly with user-defined browser font settings, fulfilling WCAG accessibility guidelines.
69+
:::
70+
71+
### Interactive Unit Demo
72+
73+
Observe how the size of the "Content Box" changes when you adjust the unit type. Note how `rem` is fixed relative to the root, while `em` scales based on the parent container's font size.
74+
75+
<CodePenEmbed
76+
title="Interactive Unit Demo"
77+
penId="xbVpPKR"
78+
/>

0 commit comments

Comments
 (0)