Merge pull request #114 from codeharborhub/dev-1

Update CSS Layout docs

Author: ajay-dhangar

docs/css/layout/display-flow.mdx

@@ -1 +1,104 @@
-<ComingSoon />
+---
+title: "The Normal Document Flow"
+description: "A comprehensive summary of the Normal Document Flow (or Display Flow) in CSS, detailing how block and inline elements interact and set the foundation for all modern layouts."
+keywords: [CSS Normal Flow, Document Flow, Block Flow, Inline Flow, Layout, Box Model, Display property summary]
+tags: [CSS Normal Flow, Document Flow, Block Flow, Inline Flow, Layout, Box Model, Display property summary]
+sidebar_label: "Normal Flow Summary"
+---
+
+The **Normal Document Flow** (or just **Normal Flow**) is the default behavior of every element on a web page. It defines how the browser arranges HTML elements based on their type, content, and the order in which they appear in the source code.
+
+Every element you use—a `<div>`, a `<p>`, a `<span>`, or an `<a>`—is initially positioned according to these rules. All CSS layout properties (`position`, `float`, `flex`, `grid`) are essentially tools to manipulate or deviate from this default flow.
+
+<AdsComponent />
+<br />
+
+## 1. Block Flow vs. Inline Flow
+
+The Normal Flow is governed by the two primary display types:
+
+### A. Block-Level Flow (Vertical Stacking)
+
+Block elements define structure and content sections. They flow vertically, one after the other.
+
+* **Characteristics:**
+    1.  Always starts on a new line.
+    2.  Takes up the full width of the parent container by default.
+    3.  Respects all Box Model properties (`margin`, `padding`, `width`, `height`).
+
+* **Flow Example:** Imagine stacking building blocks one on top of the other.
+
+```html title="styles.css"
+<!-- The browser sees these and stacks them down the page -->
+<div>First Block</div>
+<div>Second Block</div>
+<p>Third Block (A paragraph)</p>
+```
+
+### B. Inline-Level Flow (Horizontal Wrapping)
+
+Inline elements flow horizontally alongside text and other inline elements. They are designed to stay within the line established by their parent block.
+
+  * **Characteristics:**
+
+    1.  Does **not** start on a new line; sits on the same line as surrounding content.
+    2.  Width and height are determined solely by the content (explicit `width` and `height` are ignored).
+    3.  Respects horizontal spacing (`padding-left`, `margin-right`) but ignores vertical margins (`margin-top`, `margin-bottom`).
+
+  * **Flow Example:** Imagine words and punctuation flowing across a line of text in a book.
+
+```html
+<p>
+  This text is <span style="font-weight: bold;">Inline</span> and 
+  <a href="#">This link is also Inline</a>. They flow together.
+</p>
+```
+
+<AdsComponent />
+<br />
+
+## 2. The Role of `display: inline-block`
+
+The `inline-block` value creates a hybrid element that follows the rules of both flows:
+
+  * **External Flow (Inline):** The element flows horizontally and sits next to other elements on the same line.
+  * **Internal Behavior (Block):** The element fully respects `width`, `height`, and all four margins/padding values, making it a predictable box.
+
+:::tip Use Case
+`inline-block` is typically used for simple horizontal alignment (like old-school navigation menus) where you need to control the size of the box while keeping them on the same line. However, for most modern layouts, **Flexbox** is the preferred tool for horizontal flow.
+:::
+
+## 3. Manipulating the Flow (The Transition to Layout)
+
+When you introduce CSS layout properties, you are actively telling the browser to take elements *out* of the Normal Flow or change the way the flow behaves.
+
+| Property/Value | How it Affects the Flow |
+| :--- | :--- |
+| **`position: absolute`** | **Removes** the element entirely from the flow. Surrounding content collapses. |
+| **`float: left / right`** | **Removes** the element from the flow, but allows surrounding content (text) to wrap around it. |
+| **`display: flex`** | **Changes** the flow rules for the children. They now follow **Flex Flow** (a one-dimensional directional flow). |
+| **`display: grid`** | **Changes** the flow rules for the children. They now follow **Grid Flow** (a two-dimensional cell-based flow). |
+
+<AdsComponent />
+<br />
+
+## 4. Why Does the Flow Matter?
+
+Understanding the Normal Flow helps you debug layout issues quickly.
+
+### Debugging Collapse
+
+If a background color or border on a parent element suddenly collapses, it's often because a child element was removed from the flow (using `position: absolute` or `float`), and the parent no longer recognizes its height.
+
+### Debugging Spacing
+
+If you try to set `margin-top` on a `<span>` and it doesn't move, it's because the element is *inline*, and inline elements ignore vertical margins in the Normal Flow. You would need to change it to `display: block` or `display: inline-block` to make those margins work.
+
+## Interactive Summary Demo
+
+This demo illustrates the behavior of the three main `display` types in one container.
+
+<CodePenEmbed 
+  title="Interactive flow Demo"
+  penId="bNpMgbY"
+/>

docs/css/layout/display/block.mdx

@@ -1 +1,68 @@
-<ComingSoon />
+---
+title: "Display block"
+description: "Learn the behavior of block-level elements in CSS, including how they occupy full width, stack vertically, and fully respect all Box Model properties."
+keywords: [CSS display block, block element behavior, full width, stacking, box model, layout, CodeHarborHub]
+tags: [CSS display block, block element behavior, full width, stacking, box model, layout]
+sidebar_label: "block"
+---
+
+The `display: block` value is one of the three fundamental values of the CSS `display` property, defining how an element interacts with the rest of the layout.
+
+Elements that default to `display: block` are known as **block-level elements**. They are designed to structure the main content of a page, such as paragraphs, headers, lists, and sections.
+
+<AdsComponent />
+<br />
+
+## Key Characteristics of Block Elements
+
+Block elements follow three strict rules that govern their behavior in the document flow:
+
+### 1. Takes Full Available Width
+
+By default, a block element will automatically stretch horizontally to occupy $100\%$ of the width of its parent container, regardless of how much content is inside it.
+
+### 2. Starts on a New Line
+
+A block element always begins on a new line, effectively pushing any content or elements that came before it onto the previous line. They naturally stack vertically.
+
+### 3. Respects Box Model Properties
+
+Block elements fully respect all components of the Box Model:
+* **`width` and `height`:** Can be explicitly set (e.g., `width: 200px;`).
+* **`margin` and `padding`:** All four sides (`top`, `right`, `bottom`, `left`) are fully applied and affect the flow.
+
+## Common Block-Level Elements
+
+The following HTML elements default to `display: block`:
+
+* `<div>` (The generic container)
+* `<p>` (Paragraph)
+* `<h1>` through `<h6>` (Headings)
+* `<ul>`, `<ol>`, `<li>` (Lists and list items)
+* `<header>`, `<section>`, `<footer>`, `<nav>`, `<article>` (Semantic HTML5 elements)
+* `<form>`
+
+<AdsComponent />
+<br />
+
+## Changing an Element's Display
+
+You can force any element (even one that is inline by default, like a `<span>`) to behave like a block element using CSS:
+
+```css title="styles.css"
+span.full-width-text {
+  /* This turns the <span> from inline into a block element */
+  display: block; 
+  /* Now it starts a new line and takes full width */
+  margin-bottom: 10px;
+}
+```
+
+## Interactive `display: block` Demo
+
+In the demo below, you can see how the two elements stack vertically and how they automatically span the entire width of their parent container. If you reduce the `width` of the purple box, notice that it still begins on a new line and occupies its own vertical space.
+
+<CodePenEmbed 
+  title="Interactive display block Demo"
+  penId="EaKEPeL"
+/>

docs/css/layout/display/inline-block.mdx

@@ -1 +1,62 @@
-<ComingSoon />
+---
+title: "Display inline-block"
+description: "Understand how display: inline-block combines the horizontal flow of inline elements with the Box Model control of block elements, making it ideal for navigation and simple grids."
+keywords: [CSS display inline-block, inline-block behavior, horizontal stacking, width and height control, navigation menu, layout]
+tags: [CSS display inline-block, inline-block behavior, horizontal stacking, width and height control, navigation menu, layout]
+sidebar_label: "inline-block"
+---
+
+The `display: inline-block` value is the compromise between `block` and `inline`. It is a crucial display value for creating structured layouts that need to flow horizontally, such as navigation bars, list items in a grid, or form elements.
+
+An element set to `inline-block` gains the best features of both its siblings.
+
+<AdsComponent />
+<br />
+
+## Key Characteristics of `inline-block`
+
+### 1. External Behavior (Like `inline`)
+* **Flows Horizontally:** The element sits on the same line as the elements before and after it. It flows left-to-right and wraps to the next line when space runs out.
+* **Respects Horizontal Spacing:** Horizontal `margin` and `padding` are fully applied, creating space between the elements.
+
+### 2. Internal Behavior (Like `block`)
+* **Respects `width` and `height`:** Unlike pure inline elements, `inline-block` elements fully respect explicitly set `width` and `height` properties.
+* **Respects All Margins/Padding:** All four sides of `margin` and `padding` (`top`, `right`, `bottom`, `left`) are fully applied and respected without causing visual overlap.
+
+
+## Best Use Cases for `inline-block`
+
+1.  **Navigation Menus:** Before Flexbox and Grid became widespread, `inline-block` was the standard way to lay out horizontal navigation links.
+2.  **Card Grids:** Creating simple, responsive layouts where cards stack vertically on small screens but flow horizontally on larger ones.
+3.  **Form Elements:** Aligning labels, inputs, and buttons on the same line while still controlling their individual size.
+
+## The `inline-block` Gap
+
+A common issue when using `inline-block` is the appearance of a small gap (typically $4\text{px}$ to $8\text{px}$) between elements that should be touching. This gap is caused by the **white space** (spaces, tabs, or new lines) between the element tags in the HTML source code.
+
+```html title="index.html"
+<!-- The space/newline here creates the gap -->
+<div class="item">A</div> <div class="item">B</div> 
+<!-- Even with no space, the line break creates the gap -->
+<div class="item">C</div>
+<div class="item">D</div> 
+```
+
+### Solutions to Remove the Gap
+
+While there are multiple fixes, two common approaches are:
+
+1.  **Remove Whitespace in HTML:** Edit your HTML to place all `inline-block` tags on the same line without any spaces.
+2.  **Set Parent `font-size: 0;`:** Set the font size of the parent container to $0$. Since the gap is treated as a character space, this removes it. You must then re-declare the font size on the children.
+
+<AdsComponent />
+<br />
+
+## Interactive `display: inline-block` Demo
+
+In the demo below, the elements flow horizontally but fully respect the set `width`, `height`, and all four margins/paddings, making them predictable building blocks.
+
+<CodePenEmbed 
+  title="Interactive display inline-block Demo"
+  penId="NPNYdgE"
+/>

docs/css/layout/display/inline.mdx

@@ -1 +1,58 @@
-<ComingSoon />
+---
+title: "Display inline"
+description: "Learn the behavior of inline-level elements in CSS, including how they flow horizontally, ignore explicit width/height settings, and only respect horizontal margins/padding."
+keywords: [CSS display inline, inline element behavior, horizontal flow, wrapping, box model restrictions, layout]
+tags: [CSS display inline, inline element behavior, horizontal flow, wrapping, box model restrictions, layout]
+sidebar_label: "inline"
+---
+
+The `display: inline` value defines an element that flows naturally with text content, sitting horizontally alongside its neighbors. Elements that default to `display: inline` are called **inline-level elements**. They are primarily used for marking up small segments of text within a line.
+
+<AdsComponent />
+<br />
+
+## Key Characteristics of Inline Elements
+
+Inline elements are designed to be non-disruptive and flexible, resulting in several important limitations compared to block elements:
+
+### 1. Flows Horizontally and Wraps
+
+Inline elements sit side-by-side on the same line. When the content reaches the end of the container, the element (and the text after it) will wrap to the next line, maintaining the flow of the text.
+
+### 2. Ignores `width` and `height`
+
+An inline element's width and height are determined *only* by its content. Any explicit CSS declarations for `width` or `height` (e.g., `width: 200px;`) are completely ignored.
+
+### 3. Limited Box Model Support
+
+Inline elements only respect horizontal dimensions for spacing:
+* **Horizontal Padding/Border:** `padding-left`, `padding-right`, `border-left`, and `border-right` are respected and add space horizontally.
+* **Vertical Padding/Border:** `padding-top`, `padding-bottom`, `border-top`, and `border-bottom` are respected visually but **do not affect the vertical position or spacing** of neighboring lines of text. They may visually overlap content above or below.
+* **Vertical Margin:** `margin-top` and `margin-bottom` are **completely ignored**. Only horizontal margins (`margin-left`, `margin-right`) are respected.
+
+## Common Inline-Level Elements
+
+The following HTML elements default to `display: inline`:
+
+* `<span>` (The generic inline container)
+* `<a>` (Anchor/Link)
+* `<strong>` / `<b>` (Bold text)
+* `<em>` / `<i>` (Italic text)
+* `<label>`
+* `<q>` (Quote)
+
+<AdsComponent />
+<br />
+
+### Interactive `display: inline` Demo
+
+In the demo below, observe the key characteristics:
+1.  The elements flow on the same line until they wrap.
+2.  The explicit `width: 150px` is completely ignored.
+3.  The vertical margins (`margin-top: 20px`) are ignored.
+4.  The vertical padding (`padding: 20px`) is applied but causes the borders to visually overlap the line of text above.
+
+<CodePenEmbed 
+  title="Interactive display inline Demo"
+  penId="MYyVJWx"
+/>

docs/css/layout/display/none.mdx

@@ -1 +1,83 @@
-<ComingSoon />
+---
+title: "Display none"
+description: "Learn about the display: none property for completely removing an element from the document flow and its key differences from visibility: hidden."
+keywords: [CSS display none, hide element, element visibility, document flow, accessibility]
+tags: [CSS display none, hide element, element visibility, document flow, accessibility]
+sidebar_label: "none"
+---
+
+The `display: none` value is used to completely hide an element from the document. It is the most powerful way to remove an element, as it makes the element invisible and removes it from the layout flow entirely.
+
+<AdsComponent />
+<br />
+
+## Key Characteristics of `display: none`
+
+### 1. Zero Space, Zero Presence
+
+The element is treated as if it does not exist in the document structure.
+* **Layout:** It consumes **no space** on the page. All surrounding elements collapse into the space where the hidden element would have been.
+* **Rendering:** It is not drawn or rendered by the browser.
+
+### 2. Not Interactive
+
+Any element set to `display: none` cannot be interacted with.
+* **Events:** It does not receive mouse clicks or keyboard focus events.
+* **Accessibility:** It is completely ignored by screen readers and other assistive technologies.
+
+### 3. Hides Children
+
+The `display: none` property affects the element itself and **all of its descendant elements**. If a parent is set to `display: none`, none of its children will be visible or present in the layout, regardless of their own `display` properties.
+
+## `display: none` vs. `visibility: hidden`
+
+It is important to understand the difference between hiding an element with `display: none` and hiding it with `visibility: hidden`.
+
+| Feature | `display: none` | `visibility: hidden` |
+| :--- | :--- | :--- |
+| **Layout Space** | **Removes space.** Surrounding elements shift to fill the gap. | **Reserves space.** Element is invisible, but its box still occupies its dimensions. |
+| **Interactions** | Not interactive. | Not interactive (cannot be clicked). |
+| **Accessibility** | Ignored by screen readers. | **Can sometimes** be read by screen readers (behavior varies). |
+| **Best Use** | Dynamically hiding content (e.g., a modal or dropdown menu) that is not currently needed. | Temporarily hiding content while maintaining layout structure (e.g., a column in a table). |
+
+<AdsComponent />
+<br />
+
+## Practical Use Cases
+
+### 1. Toggling UI Elements (JavaScript)
+The most common use is to toggle the visibility of complex components in response to user actions (e.g., clicking a hamburger menu icon).
+
+```css title="styles.css"
+/* Start the modal hidden */
+.modal {
+  display: none; 
+}
+
+/* Show the modal when the 'active' class is added by JavaScript */
+.modal.active {
+  display: block; 
+}
+```
+
+### 2. Responsive Hiding
+
+Using media queries to hide large blocks of content that are irrelevant or too cluttered on small screens.
+
+```css title="styles.css"
+/* Hide a specific sidebar column entirely on small screens */
+@media (max-width: 768px) {
+  .sidebar-ads {
+    display: none;
+  }
+}
+```
+
+### Interactive `display: none` Demo
+
+Click the "Toggle Visibility" button below. When the element is hidden using `display: none`, notice how the container shrinks and the text wraps directly from the paragraph above to the paragraph below, demonstrating that the space is fully reclaimed.
+
+<CodePenEmbed 
+  title="Interactive display none Demo"
+  penId="QwNmdJX"
+/>