Skip to content

Commit f79563c

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #125 from codeharborhub/dev-1
done responsiveness docs of css
2 parents 4e60cdd + 9be673e commit f79563c

File tree

6 files changed

+695
-6
lines changed

6 files changed

+695
-6
lines changed

‎docs/css/responsiveness/container-queries.mdx‎

Lines changed: 135 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,135 @@
1-
<ComingSoon />
1+
---
2+
title: "CSS Container Queries"
3+
description: "Learn how to use CSS Container Queries to style components based on the size of their parent container, enabling true component-level responsiveness."
4+
keywords: [CSS Container Queries, '@container', container-type, container-name, component responsiveness, local scoping]
5+
tags: [css, responsiveness, container-queries, '@container', component-design, local-scoping, modern-css, container-type, container-name]
6+
sidebar_label: "Container Queries"
7+
---
8+
9+
Container Queries are a modern, powerful feature in CSS that allows you to apply styles to an element based on the dimensions (size or style) of its nearest ancestor with containment set, rather than the global viewport size.
10+
11+
This is a paradigm shift in responsive design, moving from a page-centric approach to a **component-centric** approach.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. The Problem Solved
17+
18+
### Media Queries vs. Container Queries
19+
20+
Historically, we relied on **Media Queries** (`@media`).
21+
22+
* **Media Queries:** Apply styles based on the size of the **viewport** (the browser window). If a small card component is placed in a narrow sidebar on a large screen, a media query for a large screen would make the card look bad because it only checks the global size.
23+
24+
**Container Queries** (`@container`) solve this:
25+
26+
* **Container Queries:** Apply styles based on the size of the **parent element** (the container). The card component can now adjust its layout (e.g., stack its elements) when its container is narrow, regardless of whether the user is on a mobile phone or a large desktop monitor.
27+
28+
## 2. Setting Up the Container
29+
30+
Before you can query a container, you must establish it using the `container` or `container-type` property on the parent element.
31+
32+
### 2.1. `container-type` (Required)
33+
34+
This property defines what kind of dimension is being queried.
35+
36+
| Value | Description | Use Case |
37+
| :--- | :--- | :--- |
38+
| **`size`** | Queries both the **width and height**. | Rarely used, as it can cause infinite layout loops. |
39+
| **`inline-size`** | Queries the size in the direction of text flow (usually **width**). | Most common and safest choice for block elements. |
40+
| **`normal`** | The default, no containment established. | |
41+
42+
### 2.2. `container-name` (Optional but Recommended)
43+
44+
For clarity and to prevent ambiguity when containers are nested, you can give your container a name.
45+
46+
<AdsComponent />
47+
<br />
48+
49+
### Setup Shorthand
50+
51+
The `container` shorthand combines both properties:
52+
53+
```css title="styles.css"
54+
/* Applied to the PARENT element */
55+
.sidebar-module {
56+
/* Establishes containment and gives it a name for targeting */
57+
container: card-container / inline-size;
58+
/* Equivalent to:
59+
container-name: card-container;
60+
container-type: inline-size; */
61+
}
62+
```
63+
64+
## 3. The `@container` Rule
65+
66+
Once the parent is defined, you can use the `@container` rule on its children to apply responsive styles.
67+
68+
### 3.1. Syntax
69+
70+
The syntax is similar to a media query, but it uses the container's size instead of the viewport's size.
71+
72+
```css title="styles.css"
73+
@container [container-name] ([query-feature]) {
74+
/* Styles for the child element */
75+
}
76+
```
77+
78+
In the example above:
79+
* **Container Name** (optional) specifies which container to query. If omitted, it queries the nearest ancestor with containment.
80+
* **Query Feature** is the condition based on the container's dimensions (e.g., `min-width: 400px`).
81+
82+
### 3.2. Query Features
83+
84+
The features are size-based and mirror those used in media queries:
85+
86+
* `min-width` / `max-width` (based on container width)
87+
* `min-height` / `max-height` (based on container height)
88+
* `min-inline-size` / `max-inline-size` (most common)
89+
90+
### Example: Component Responsiveness
91+
92+
```css title="styles.css"
93+
/* Styles applied to a child element inside .sidebar-module */
94+
.card-content {
95+
display: flex; /* Default horizontal layout */
96+
gap: 1rem;
97+
}
98+
99+
/* Query the parent named 'card-container' */
100+
@container card-container (max-width: 400px) {
101+
.card-content {
102+
/* When the parent container is narrow, stack the children */
103+
flex-direction: column;
104+
gap: 0.5rem;
105+
}
106+
107+
.card-content img {
108+
/* Shrink the image when the container is small */
109+
width: 100%;
110+
height: auto;
111+
}
112+
}
113+
```
114+
115+
<AdsComponent />
116+
<br />
117+
118+
## 4. Logical Operators
119+
120+
Like media queries, you can combine queries using `and`, `not`, and the comma for `or`.
121+
122+
```css title="styles.css"
123+
@container (min-width: 300px) and (max-width: 500px) {
124+
/* Styles apply only if the container width is between 300px and 500px */
125+
}
126+
```
127+
128+
## Interactive Container Query Demo
129+
130+
Observe how the internal structure of the `Card` component changes when you resize the outer container, regardless of the overall viewport size.
131+
132+
<CodePenEmbed
133+
title="Interactive Container Query Demo"
134+
penId="emZKepL"
135+
/>

‎docs/css/responsiveness/fluid-layouts.mdx‎

Lines changed: 130 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,130 @@
1-
<ComingSoon />
1+
---
2+
title: "Fluid Layouts (Relative Units and Flex/Grid)"
3+
description: "Master the use of relative units, Flexbox, and CSS Grid to create layouts that are inherently flexible and adapt their dimensions based on the viewport and container size."
4+
keywords: [fluid layout, relative units, vw, vh, percentage, flexbox, CSS Grid, intrinsic design, responsive web design]
5+
tags: [fluid layout, relative units, vw, vh, percentage, flexbox, CSS Grid, intrinsic design, responsive web design]
6+
sidebar_label: Fluid Layouts
7+
---
8+
9+
A **fluid layout** (also known as a liquid layout) is one where the widths of the elements are set using relative units (like percentages or viewport units) rather than fixed pixel values. This makes the layout inherently flexible, expanding and contracting smoothly as the browser window resizes, ensuring space is always maximized.
10+
11+
Fluid layouts are a key component of modern responsive design, working hand-in-hand with Media Queries and Container Queries.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Core Principle: Avoiding Fixed Units
17+
18+
The goal of a fluid layout is to ensure that no part of the design can cause horizontal scrollbars unless absolutely necessary.
19+
20+
| Unit Type | Behavior | Fluid Use |
21+
| :--- | :--- | :--- |
22+
| **Fixed** (`px`, `pt`) | Stays the same regardless of screen size. | Used only for properties that should *not* change (e.g., border thickness, max-width limits). |
23+
| **Relative** (`%`, `vw`, `em`) | Changes based on the parent, root, or viewport size. | Used for widths, heights, margins, and padding. |
24+
25+
### Using Percentages (`%`)
26+
27+
Percentages are relative to the parent element. This is the oldest and most fundamental fluid unit.
28+
29+
```css title="styles.css"
30+
.parent {
31+
width: 900px; /* The maximum size */
32+
}
33+
34+
.child {
35+
/* This child will always take up 50% of the parent's current width */
36+
width: 50%;
37+
padding: 2%; /* Padding is also relative to the parent's width */
38+
}
39+
```
40+
41+
### Using Viewport Units (`vw`, `vh`)
42+
43+
Viewport units are relative to the size of the browser window itself.
44+
45+
* **`vw` (Viewport Width):** $1\%$ of the viewport width.
46+
* **`vh` (Viewport Height):** $1\%$ of the viewport height.
47+
48+
```css title="styles.css"
49+
.hero-section {
50+
/* Sets the height of the hero section to 60% of the viewport height */
51+
height: 60vh;
52+
}
53+
```
54+
55+
<AdsComponent />
56+
<br />
57+
58+
## 2. Flexbox for Fluid Distribution
59+
60+
Flexbox is ideal for creating one-dimensional (row or column) fluid layouts where content needs to distribute space evenly or according to defined ratios.
61+
62+
### Example: Fluid Navigation Bar
63+
64+
Using `flex-grow` ensures that unused space is distributed evenly among the items.
65+
66+
```css title="styles.css"
67+
.navbar {
68+
display: flex;
69+
justify-content: space-between;
70+
}
71+
72+
.nav-item {
73+
/* Allows the item to grow and shrink as needed */
74+
flex-grow: 1;
75+
text-align: center;
76+
padding: 1rem 0;
77+
78+
/* Setting a base width allows the item to grow proportionally */
79+
flex-basis: 0;
80+
}
81+
```
82+
83+
## 3. CSS Grid for Two-Dimensional Fluidity
84+
85+
CSS Grid is the ultimate tool for two-dimensional fluid layouts, especially when dealing with major page sections (header, sidebar, main content).
86+
87+
### The `fr` Unit
88+
89+
The `fr` (fractional unit) is the most powerful tool for fluid Grid design. It represents a fraction of the available space in the grid container.
90+
91+
### Example: Fluid Sidebar Layout
92+
93+
```css title="styles.css"
94+
.page-layout {
95+
display: grid;
96+
padding: 20px;
97+
/* Define two columns: one takes 1 fraction, the main content takes 3 fractions */
98+
grid-template-columns: 1fr 3fr;
99+
gap: 20px;
100+
}
101+
```
102+
103+
In this example, the sidebar will always be one-quarter ($1/4$) of the total available width, and the main content will be three-quarters ($3/4$), ensuring the layout is always perfectly proportional, regardless of the screen size.
104+
105+
<AdsComponent />
106+
<br />
107+
108+
### `minmax()` Function
109+
110+
The `minmax()` function prevents columns from becoming too narrow or too wide. This combines fluid width with fixed limits, creating a highly resilient design.
111+
112+
```css title="styles.css"
113+
.responsive-grid {
114+
display: grid;
115+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
116+
}
117+
```
118+
119+
* **Explanation:** This creates columns that are *at least* 300px wide (`minmax(300px, 1fr)`). If the remaining space allows for more than one column, they are created. The `1fr` ensures they all share the available space equally, but they will never shrink below 300px.
120+
121+
## Interactive Fluid Layout Demo
122+
123+
This demo shows a two-column layout using the `fr` unit. Resize the pane to see the columns maintain their 1:2 ratio.
124+
125+
<CodePenEmbed
126+
title="Interactive Fluid Layout Demo"
127+
penId="wBGXpPN"
128+
/>
129+
130+
In this example, the sidebar and main content areas adjust their widths fluidly based on the viewport size, maintaining their proportional relationship while ensuring usability across devices.

0 commit comments

Comments
 (0)