diff --git a/courses/css/module-3-box-model-layouts/_category_.json b/courses/css/module-3-box-model-layouts/_category_.json index e69de29bb..48c8a96d8 100644 --- a/courses/css/module-3-box-model-layouts/_category_.json +++ b/courses/css/module-3-box-model-layouts/_category_.json @@ -0,0 +1,14 @@ +{ + "label": "Module 3: Box Model & Layout Systems", + "position": 4, + "link": { + "type": "generated-index", + "title": "Module 3: Box Model & Layout Systems", + "description": "Master the fundamentals of the CSS Box Model, sizing behaviors, positioning context, Flexbox alignment, and 2D Grid layouts.", + "slug": "/category/module-3-box-model-layouts" + }, + "customProps": { + "moduleNumber": 3, + "description": "Core layout algorithms powering responsive web interfaces." + } +} \ No newline at end of file diff --git a/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md b/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md index e69de29bb..b009c74b0 100644 --- a/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md +++ b/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md @@ -0,0 +1,178 @@ +--- +id: flexbox-masterclass +title: "Flexbox Masterclass" +sidebar_label: "Lecture 10" +sidebar_position: 3 +description: Master the 1D Flexible Box Layout algorithm—main vs. cross axes, flex container flexibilities, alignment logic, and real-world responsive design patterns. +tags: + - CSS + - Flexbox + - Layout + - Web Development + - CodeHarborHub +--- + +The **Flexible Box Layout Module (Flexbox)** is a one-dimensional layout model designed to distribute space along a single axis (row or column) and align items predictably within a container—even when their sizes are dynamic or unknown. + +## 1. Dual-Axis Architecture + +Flexbox operates entirely around two perpendicular axes: the **Main Axis** and the **Cross Axis**. + +``` + flex-direction: row (Default) + + ┌───────────────────────────────────────────┐ + │ Main-Start ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─► Main-End + │ │ │ (Main Axis) + │ │ ┌──────────┐ ┌──────────┐ │ + │ │ │ Item 1 │ │ Item 2 │ │ + │ ▼ └──────────┘ └──────────┘ │ + │ Cross-End │ + └───────────────────────────────────────────┘ + (Cross Axis) + +``` + +### Direction & Axis Orientation + +The orientation of the main axis is controlled by the `flex-direction` property: + +| `flex-direction` | Main Axis Direction | Cross Axis Direction | +| :--- | :--- | :--- | +| `row` *(default)* | Left to Right (in LTR documents) | Top to Bottom | +| `row-reverse` | Right to Left | Top to Bottom | +| `column` | Top to Bottom | Left to Right | +| `column-reverse` | Bottom to Top | Left to Right | + +## 2. Flex Container Alignment Properties + +The flex container governs how items are distributed across both axes. + +### Main Axis Alignment (`justify-content`) +Controls how extra free space is distributed along the main axis: + +* `flex-start`: Items pack tightly toward the start edge. +* `flex-end`: Items pack tightly toward the end edge. +* `center`: Items align in the middle of the container. +* `space-between`: First item at start, last item at end, remaining space distributed evenly between items. +* `space-around`: Equal space on both sides of each item (outer edges get half-width space). +* `space-evenly`: Equal space between items and container edges. + +### Cross Axis Alignment (`align-items` & `align-content`) +* **`align-items`**: Aligns items along the cross axis within a single flex line. + * `stretch` *(default)*: Stretches items to fill cross-axis height/width. + * `center`: Center-aligns items along the cross axis. + * `flex-start` / `flex-end`: Align items to the start or end of the cross axis. + * `baseline`: Aligns items based on their text baseline. +* **`align-content`**: Aligns multi-line flex tracks along the cross axis when `flex-wrap: wrap` is enabled. + +## 3. Flex Item Properties (`flex-grow`, `flex-shrink`, `flex-basis`) + +Flex items control their own individual flexibility using the shorthand `flex: `. + +```css title="Shorthand Syntax" +.item { + flex: 1 0 200px; /* grow: 1, shrink: 0, basis: 200px */ +} + +``` + +### 1. `flex-basis` + +Defines the default size of an item **before** remaining free space is distributed. It accepts values like `auto`, `content`, pixels, or percentages. + +### 2. `flex-grow` + +Determines how much an item will grow relative to sibling items when positive free space exists along the main axis. + +$$ +\text{Flex Factor Share} = \frac{\text{Item Flex Grow Value}}{\sum \text{All Flex Grow Values}} +$$ + +### 3. `flex-shrink` + +Determines how much an item shrinks relative to sibling items when negative space (overflow) exists along the main axis. + +## Interactive Playground: Flexbox Alignment Engine + +Experiment with main axis distribution and item sizing mechanics in the live preview component below: + + +
Item 1 (flex: 1)
+
Item 2 (flex: 2)
+
Item 3 (flex: 1)
+ +`} +defaultCss={` +/* Base Flex Items */ +.flex-item { +padding: 1rem; +border-radius: 6px; +color: #ffffff; +font-family: system-ui, sans-serif; +font-weight: 600; +text-align: center; +} + +/* Flexibility Distribution */ +.item-1 { +flex: 1 1 120px; +background-color: #2563eb; +} + +.item-2 { +flex: 2 1 120px; /* Takes twice the extra space of Item 1 */ +background-color: #059669; +} + +.item-3 { +flex: 1 1 120px; +background-color: #d97706; +}`} +height="340px" +/> + +## 4. Popular Flexbox Design Patterns + +### 1. The Perfect Centering Trick + +Centering an element vertically and horizontally requires only two properties on the container: + +```css +.hero-center { + display: flex; + justify-content: center; + align-items: center; +} + +``` + +### 2. Sticky Footer Layout + +Ensure footers remain pushed to the bottom of the viewport even on short content pages: + +```css +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +main { + flex: 1; /* Consumes all available vertical space */ +} + +``` + +## Summary Reference Table + +| Property | Applied To | Default Value | Description | +| --- | --- | --- | --- | +| **`flex-direction`** | Container | `row` | Establishes the main axis orientation | +| **`justify-content`** | Container | `flex-start` | Aligns items along the main axis | +| **`align-items`** | Container | `stretch` | Aligns items along the cross axis | +| **`flex-wrap`** | Container | `nowrap` | Controls line wrapping on overflow | +| **`flex`** | Item | `0 1 auto` | Shorthand for `flex-grow`, `flex-shrink`, `flex-basis` | +| **`align-self`** | Item | `auto` | Overrides container's `align-items` for a specific item | \ No newline at end of file diff --git a/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md b/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md index e69de29bb..8c6021e13 100644 --- a/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md +++ b/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md @@ -0,0 +1,173 @@ +--- +id: css-grid-architecture +title: "CSS Grid Architecture" +sidebar_label: "Lecture 11" +sidebar_position: 4 +description: "Master the 2D CSS Grid layout engine—grid containers, track sizing with fr units, explicit vs implicit grids, auto-fill/fit, and grid template areas." +tags: + - CSS + - Grid + - Layout + - Web Development + - CodeHarborHub +--- + +Unlike Flexbox, which is primarily a one-dimensional layout system (rows or columns), **CSS Grid Layout** is a powerful two-dimensional layout engine. It enables developers to align elements along both rows and columns simultaneously with precise control over track sizing, placement, and spatial distribution. + +## 1. Grid Terminology & Dual-Axis Model + +To build layouts effectively with CSS Grid, you must understand its core structural components: + +``` + Grid Container + ┌─────────────────────────────────────────┐ + │ Col Line 1 Col Line 2 │ + │─── Line 1 ┌───────────┬───────────┐ │ + │ │ Grid Cell │ Grid Cell │ │ Row Track + │─── Line 2 ├───────────┼───────────┤ │ + │ │ Grid Cell │ Grid Cell │ │ + │─── Line 3 └───────────┴───────────┘ │ + └─────────────────────────────────────────┘ + Column Track + +``` + +* **Grid Container:** The parent element defined with `display: grid` or `display: inline-grid`. +* **Grid Item:** Direct child elements inside a grid container. +* **Grid Line:** The horizontal and vertical dividing lines that separate tracks (numbered starting at `1`). +* **Grid Track:** The space between two adjacent grid lines (a row or column). +* **Grid Cell:** The single intersection unit of a row track and a column track. +* **Grid Area:** Any rectangular space bounded by four grid lines containing one or more grid cells. + +## 2. Track Sizing & Fractional Units (`fr`) + +Grid tracks are defined on the container using `grid-template-columns` and `grid-template-rows`. + +CSS Grid introduces the **Fractional Unit (`fr`)**, which represents a fraction of the available free space in the grid container after fixed tracks and gaps are computed. + +```css +.container { + display: grid; + /* 3 Columns: 200px fixed, remaining space split 1:2 */ + grid-template-columns: 200px 1fr 2fr; + /* 2 Rows: Fixed 80px top row, flexible bottom row */ + grid-template-rows: 80px 1fr; + gap: 1rem; +} + +``` + +### The `repeat()` and `minmax()` Functions + +* **`repeat(count, track_size)`**: Replicates track patterns without manually typing values. +* **`minmax(min, max)`**: Sets a flexible size range for grid tracks so they respond fluidly to viewport changes. + +```css +/* Creates 4 equal columns of at least 150px, expanding up to 1fr */ +.grid-fluid { + display: grid; + grid-template-columns: repeat(4, minmax(150px, 1fr)); +} + +``` + +## 3. Responsive Auto-Placement: `auto-fill` vs `auto-fit` + +Combining `repeat()`, `minmax()`, and automatic track repetition allows you to build responsive grids **without writing media queries**: + +```css +.responsive-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; +} + +``` + +| Keyword | Behavior When Extra Space Exists | +| --- | --- | +| **`auto-fill`** | Fills the row with as many tracks as possible. If extra space remains, it keeps **empty tracks** in the row. | +| **`auto-fit`** | Fits existing tracks into the row. If extra space remains, it **collapses empty tracks to 0px** and stretches remaining items to fill the row. | + +## 4. Grid Template Areas + +Grid Template Areas allow you to map out page layouts using intuitive ASCII-art string representations directly in your CSS: + +```css +.layout-container { + display: grid; + grid-template-columns: 240px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header" + "sidebar main" + "footer footer"; + min-height: 100vh; +} + +/* Assigning Children to Defined Areas */ +.site-header { grid-area: header; } +.site-sidebar { grid-area: sidebar; } +.site-main { grid-area: main; } +.site-footer { grid-area: footer; } + +``` + +## Interactive Playground: Grid Track Architecture + +Experiment with two-dimensional grid layouts, item spanning, and area assignments in the live preview component below: + + +
Header
+
Sidebar
+
Main Content
+
Footer
+ +`} +defaultCss={` +/* Base Card Styles */ +.grid-card { +padding: 1rem; +border-radius: 6px; +color: #ffffff; +font-weight: 600; +display: flex; +align-items: center; +justify-content: center; +} + +/* Named Area Assignments */ +.area-header { +grid-area: header; +background-color: #2563eb; +} + +.area-sidebar { +grid-area: sidebar; +background-color: #059669; +} + +.area-main { +grid-area: main; +background-color: #d97706; +} + +.area-footer { +grid-area: footer; +background-color: #475569; +}`} +height="360px" +/> + +## Summary Reference Table + +| Property / Syntax | Applied To | Description | +| --- | --- | --- | +| **`display: grid`** | Container | Activates the 2D grid layout context | +| **`grid-template-columns`** | Container | Defines explicit column track sizes and quantities | +| **`grid-template-rows`** | Container | Defines explicit row track sizes and quantities | +| **`gap` / `grid-gap**` | Container | Sets horizontal and vertical gutters between tracks | +| **`grid-column: 1 / -1`** | Item | Spans an item from line 1 to the last explicit line | +| **`grid-area`** | Item | Assigns an item to a named area defined in `grid-template-areas` | \ No newline at end of file diff --git a/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md b/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md index e69de29bb..f2b6f5d0e 100644 --- a/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md +++ b/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md @@ -0,0 +1,193 @@ +--- +id: css-box-model +title: "The CSS Box Model" +sidebar_label: "Lecture 8" +sidebar_position: 1 +description: "Master the foundation of all CSS layouts—content, padding, border, margin, box-sizing mechanisms, and margin collapsing behavior." +tags: + - CSS + - Box Model + - Layout + - Web Development + - CodeHarborHub +--- + +In CSS, every single element rendered on a web page is treated as a rectangular box. The **CSS Box Model** is the foundational layout engine rule set that dictates how an element's dimensions, inner spacing, borders, and outer spacing are calculated and rendered. + +## 1. Anatomy of the Box Model + +A standard CSS box consists of four concentric rectangular regions wrapped around each other: + + +``` + +┌─────────────────────────────────────────────────────────┐ +│ MARGIN │ +│ ┌─────────────────────────────────────────────────┐ │ +│ │ BORDER │ │ +│ │ ┌─────────────────────────────────────────┐ │ │ +│ │ │ PADDING │ │ │ +│ │ │ ┌─────────────────────────────────┐ │ │ │ +│ │ │ │ CONTENT │ │ │ │ +│ │ │ │ (Width × Height of the element)│ │ │ │ +│ │ │ └─────────────────────────────────┘ │ │ │ +│ │ └─────────────────────────────────────────┘ │ │ +│ └─────────────────────────────────────────────────┘ │ +└─────────────────────────────────────────────────────────┘ + +``` + +### The Four Layer Components + +| Layer | Property | Description | Background Visible? | +| :--- | :--- | :--- | :---: | +| **Content** | `width`, `height` | The core area containing text, images, or child DOM nodes | Yes | +| **Padding** | `padding` | The transparent inner space separating content from its border | Yes | +| **Border** | `border` | The line or frame surrounding padding and content | Yes (Border style/color) | +| **Margin** | `margin` | The transparent outer space separating the element from neighbors | No (Fully transparent) | + +## 2. Sizing Calculations: `content-box` vs `border-box` + +The sizing behavior of elements is determined by the `box-sizing` property. + +### 1. `content-box` (W3C Default) +Under the default `box-sizing: content-box`, the `width` and `height` properties apply **only to the Content area**. Padding and borders are added on top of the declared dimensions. + +$$ +\text{Rendered Element Width} = \text{width} + \text{padding-left} + \text{padding-right} + \text{border-left} + \text{border-right} +$$ + +```css +/* Calculated total width = 200 + 20 + 20 + 5 + 5 = 250px */ +.element { + box-sizing: content-box; + width: 200px; + padding: 20px; + border: 5px solid #2563eb; +} + +``` + +### 2. `border-box` (Modern Standard) + +Under `box-sizing: border-box`, the declared `width` and `height` include content, padding, and borders. The browser automatically shrinks the content area to accommodate inner spacing. + +$$\text{Rendered Element Width} = \text{width (Fixed)}$$ + +$$\text{Calculated Content Width} = \text{width} - (\text{padding-left} + \text{padding-right} + \text{border-left} + \text{border-right})$$ + +```css +/* Calculated total width = strictly 200px */ +.element { + box-sizing: border-box; + width: 200px; + padding: 20px; + border: 5px solid #059669; +} + +``` + +:::tip Global Box-Sizing Reset Pattern +Modern CSS design systems apply `border-box` globally across all DOM nodes to ensure intuitive mathematical sizing: + +```css +*, ::before, ::after { + box-sizing: border-box; +} + +``` + +::: + +## 3. Margin Collapsing Mechanics + +When two vertical block-level margins touch, they do not combine by addition. Instead, they **collapse into a single margin**. + +``` + ┌───────────────┐ + │ Element A │ + │ margin-bottom: 30px + └───────────────┘ + │ + ├─ Collapsed Distance = 30px (MAX, not 50px) + │ + ┌───────────────┐ + │ margin-top: 20px + │ Element B │ + └───────────────┘ + +``` + +### Collapsing Rules + +1. **Both Positive:** The resulting margin is equal to the **largest single margin value**. +2. **Positive & Negative:** The negative margin is subtracted from the largest positive margin. +3. **Both Negative:** The resulting margin is equal to the **most negative value**. + +:::info Prevention of Collapsing +Vertical margin collapsing does **not** occur on: + +* Horizontal margins (`margin-left` and `margin-right`). +* Elements within Flexbox or Grid layout containers. +* Elements with `display: inline-block`, `position: absolute`, or `overflow` set to values other than `visible`. +::: + +## Interactive Playground: Box Model Inspector + +Compare the physical width rendered by `content-box` versus `border-box` side-by-side in the live preview editor below: + + +

Content Box

+

Width only applies to content. Border and padding add to total size.

+ + +
+

Border Box

+

Width includes padding and border. Total size stays exactly 220px.

+
+`} +defaultCss={` +.box { +width: 220px; +padding: 20px; +border: 5px solid #38bdf8; +color: #ffffff; +font-family: system-ui, sans-serif; +border-radius: 6px; +} + +.box h4 { +margin: 0 0 0.5rem 0; +} + +.box p { +margin: 0; +font-size: 0.85rem; +} + +/* W3C Default Behavior */ +.content-box-demo { +box-sizing: content-box; +background-color: #1e3a8a; +} + +/* Modern Layout Behavior */ +.border-box-demo { +box-sizing: border-box; +background-color: #065f46; +border-color: #34d399; +}`} +height="360px" +/> + +## Summary Reference Table + +| Layer / Concept | Property Syntax | Affects Total Width in `border-box`? | Primary Function | +| --- | --- | --- | --- | +| **Content** | `width`, `height` | Yes (Shrinks internally) | Holds element text and child DOM nodes | +| **Padding** | `padding: top right bottom left` | No (Absorbed inside width) | Creates internal space around content | +| **Border** | `border: width style color` | No (Absorbed inside width) | Formulates a physical frame around padding | +| **Margin** | `margin: top right bottom left` | Never (Always outer space) | Controls separation distance between sibling boxes | +| **Margin Collapse** | Vertical adjacent margins | N/A | Merges touching top/bottom margins to the MAX value | \ No newline at end of file diff --git a/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md b/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md index e69de29bb..b902fcef8 100644 --- a/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md +++ b/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md @@ -0,0 +1,189 @@ +--- +id: display-and-positioning +title: "Display Modes & Positioning Mechanics" +sidebar_label: "Lecture 9" +sidebar_position: 2 +description: "Deep dive into CSS display types (block, inline, inline-block, none) and positioning schemes (static, relative, absolute, fixed, sticky) with z-index stacking contexts." +tags: + - CSS + - Display + - Positioning + - Z-Index + - Web Development + - CodeHarborHub +--- + +The layout engine determines how elements are formatted, rendered, and positioned in relation to the document flow. Understanding the `display` property and CSS positioning schemes is essential for creating structured web layouts. + +## 1. Core Display Modes + +The `display` property determines how an element behaves in the normal document flow and how its child nodes are laid out. + +``` + [ CSS Display Modes ] + │ + ┌────────────────────────┼────────────────────────┐ + ▼ ▼ ▼ +[ Block ] [ Inline ] [ Inline-Block ] +Full-width box; Flows inline; Flows inline; +Respects box dimensions Ignores width/height Respects box dimensions + +``` + +### Outer Display Value Comparison + +| Display Mode | Formats New Line? | Respects `width` & `height`? | Vertical `margin` / `padding` Effect | Example Tags | +| :--- | :---: | :---: | :--- | :--- | +| `block` | Yes | Yes | Fully respected | `
`, `

`, `

`-`

`, `
` | +| `inline` | No | No | Ignored (does not push surrounding lines) | ``, ``, ``, `` | +| `inline-block` | No | Yes | Fully respected | `
+`} +defaultCss={` +.parent-card h3 { +margin-top: 0; +font-size: 1.1rem; +color: #38bdf8; +} + +/* Absolute child pinned to top-right corner of parent */ +.badge-absolute { +position: absolute; +top: 12px; +right: 12px; +background-color: #ef4444; +color: #ffffff; +padding: 0.35rem 0.75rem; +border-radius: 4px; +font-size: 0.75rem; +font-weight: 700; +z-index: 10; +} + +/* Relative box offset from its normal flow slot */ +.box-relative { +position: relative; +top: 15px; +left: 10px; +background-color: #2563eb; +padding: 0.75rem; +border-radius: 6px; +font-size: 0.85rem; +}`} +height="340px" +/> + +## Summary Reference Table + +| Position Value | Removed from Normal Flow? | Positioned Relative To | Requires Ancestor Boundary? | +| --- | --- | --- | --- | +| **`static`** | No | Normal document flow | No | +| **`relative`** | No | Its own default location | No | +| **`absolute`** | **Yes** | Nearest non-static ancestor | Yes (`position != static`) | +| **`fixed`** | **Yes** | Browser Viewport | No | +| **`sticky`** | No (until threshold) | Viewport boundary inside container | No | diff --git a/courses/css/module-4-modern-css/_category_.json b/courses/css/module-4-modern-css/_category_.json index e69de29bb..b88c09a90 100644 --- a/courses/css/module-4-modern-css/_category_.json +++ b/courses/css/module-4-modern-css/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Module 4: Modern CSS", + "position": 5, + "link": { + "type": "generated-index", + "description": "Explore cutting-edge CSS features—including CSS Custom Properties (Variables), advanced animations and keyframes, responsive design with Container Queries, and modern architectural patterns for scalable web applications." + } +} \ No newline at end of file diff --git a/courses/css/module-4-modern-css/challenges.md b/courses/css/module-4-modern-css/challenges.md new file mode 100644 index 000000000..be51831c8 --- /dev/null +++ b/courses/css/module-4-modern-css/challenges.md @@ -0,0 +1,353 @@ +--- +id: module-4-challenges +title: "Practical Challenges: Modern CSS" +sidebar_label: "Challenges" +sidebar_position: 5 +description: "Test your mastery of Modern CSS with hands-on challenges covering CSS Custom Properties, Responsive Design, CSS Animations, and Container Queries." +tags: + - CSS + - Challenges + - Custom Properties + - Responsive Design + - Animations + - Container Queries + - CodeHarborHub +--- + +Put your knowledge of Modern CSS into practice. These practical challenges test your mastery of **CSS Custom Properties (Variables)**, **Responsive Design & Media Queries**, **Transforms, Transitions & Animations**, and **CSS Container Queries**. + +## Challenge 1: Dynamic Theme Token Engine + +### Objective +Build a dynamic card component driven entirely by global and component-scoped **CSS Custom Properties**. The design tokens must handle theme variables and hover elevation through property re-assignments without duplicating base structural rules. + +### Requirements +1. Define global color and spatial variables on the `:root` selector (`--bg-card`, `--text-main`, `--accent-color`, `--card-padding`). +2. Create a `.card-dark` scope override class that replaces color tokens for dark mode execution. +3. Add a fallback value inside the `var()` function for the border property in case `--card-border` is missing. + +### Solution + + +
+

Light Theme Scope

+

Uses global :root design tokens.

+
+ + +
+

Dark Theme Scope

+

Overrides scoped CSS variables locally.

+
`} + defaultCss={`/* 1. Global Token Declarations */ +:root { + --bg-card: #f8fafc; + --text-main: #0f172a; + --accent-color: #2563eb; + --card-padding: 1.25rem; +} + +/* 2. Scoped Dark Theme Tokens */ +.card-dark { + --bg-card: #0f172a; + --text-main: #f8fafc; + --accent-color: #38bdf8; +} + +/* Base Component Consuming Variables */ +.card-box { + background-color: var(--bg-card); + color: var(--text-main); + padding: var(--card-padding); + border-radius: 8px; + /* 3. Fallback handling */ + border: 2px solid var(--card-border, var(--accent-color)); + margin-bottom: 1rem; + font-family: system-ui, sans-serif; +} + +.card-box h3 { + margin-top: 0; + color: var(--accent-color); +}`} + height="320px" +/> + +--- + +## Challenge 2: Mobile-First Responsive Product Grid + +### Objective +Create a responsive product showcase grid using **Mobile-First architecture**, **Media Queries with Range Syntax**, and **Fluid Typography (`clamp()`)**. + +### Requirements +1. Set up mobile-first single-column stacked layout as default. +2. Apply Media Query Level 4 range syntax (`width >= 600px`) to switch to 2 columns on tablets, and (`width >= 900px`) for 3 columns on desktops. +3. Use `clamp()` for card headings to scale fluidly without abrupt text steps. + +### Solution + + +
+

Wireless Headphones

+

Premium noise cancellation audio gear.

+
+
+

Mechanical Keyboard

+

Tactile hot-swappable gaming switch keyboard.

+
+
+

UltraWide Monitor

+

4K IPS color accurate display setup.

+
+`} + defaultCss={`/* Base Mobile Styles */ +.product-grid { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + padding: 1rem; + background-color: #0f172a; + border-radius: 8px; + font-family: system-ui, sans-serif; +} + +.product-card { + background-color: #1e293b; + padding: 1.25rem; + border-radius: 6px; + border: 1px solid #334155; + color: #ffffff; +} + +/* Fluid Typography */ +.product-title { + margin-top: 0; + color: #38bdf8; + font-size: clamp(1.1rem, 3vw, 1.6rem); +} + +.product-card p { + margin: 0; + color: #94a3b8; + font-size: 0.9rem; +} + +/* Media Query Level 4 Range Syntax */ +@media (width >= 600px) { + .product-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (width >= 900px) { + .product-grid { + grid-template-columns: repeat(3, 1fr); + } +}`} + height="340px" +/> + +--- + +## Challenge 3: Animated Pulse Loader & Hover Cards + +### Objective +Build interactive cards featuring GPU-accelerated **CSS Transforms**, smooth **Transitions**, and a multi-step **`@keyframes` loop animation**. + +### Requirements +1. Implement hardware-accelerated transforms (`translateY` and `scale`) on hover with cubic-bezier easing. +2. Build a continuous multi-stage `@keyframes` radar pulse badge inside the card. +3. Ensure motion properties target `transform` and `opacity` to prevent browser layout reflows. + +### Solution + + +
+
+ + + Live Server +
+

Interactive Node

+

Hover over this element to test smooth hardware-accelerated motion.

+
+`} + defaultCss={`.motion-demo-container { + padding: 2rem; + background-color: #0f172a; + border-radius: 8px; + display: flex; + justify-content: center; + font-family: system-ui, sans-serif; +} + +.action-card { + background-color: #1e293b; + padding: 1.5rem; + border-radius: 8px; + border: 1px solid #334155; + color: #ffffff; + width: 260px; + cursor: pointer; + /* Hardware-accelerated transition */ + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; +} + +.action-card:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5); +} + +.action-card h3 { + margin: 0.75rem 0 0.5rem 0; + color: #38bdf8; +} + +.action-card p { + margin: 0; + color: #94a3b8; + font-size: 0.85rem; +} + +/* Live Status Badge with Keyframes */ +.status-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + position: relative; + font-size: 0.8rem; + font-weight: 600; + color: #10b981; +} + +.status-dot { + width: 8px; + height: 8px; + background-color: #10b981; + border-radius: 50%; +} + +.pulse-ring { + position: absolute; + left: 0; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #10b981; + animation: radarPulse 2s ease-out infinite; +} + +@keyframes radarPulse { + 0% { + transform: scale(1); + opacity: 0.8; + } + 100% { + transform: scale(3.5); + opacity: 0; + } +}`} + height="340px" +/> + +## Challenge 4: Component-Driven Container Queries + +### Objective +Create a modular widget component that rearranges its internal structure based on the **width of its container**, completely independent of the browser viewport size. + +### Requirements +1. Register a wrapper parent as an inline-size containment context using `container-type: inline-size`. +2. Apply an `@container` query that shifts internal item flow from a stacked column to a side-by-side row when wrapper width surpasses `380px`. +3. Utilize Container Query Inline (`cqi`) length units to size widget titles fluidly. + +### Solution + + +
+
+
CH
+
+

Modular Container Profile

+

I automatically transform into a row layout when my direct parent container is wider than 380px.

+
+
+
+`} + defaultCss={`/* Root Wrapper */ +.container-demo-wrapper { + padding: 1rem; + background-color: #0f172a; + border-radius: 8px; + font-family: system-ui, sans-serif; +} + +/* 1. Establish Container Context */ +.widget-host { + container-type: inline-size; + container-name: widget-container; + width: 100%; + padding: 0.75rem; + background-color: #1e293b; + border: 1px dashed #475569; + border-radius: 6px; +} + +/* Base Component Layout (Narrow Container) */ +.profile-widget { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + background-color: #0f172a; + padding: 1.25rem; + border-radius: 6px; + color: #ffffff; +} + +.profile-avatar { + width: 48px; + height: 48px; + background-color: #059669; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; +} + +/* 3. Fluid sizing with cqi units */ +.profile-info h4 { + margin: 0 0 0.25rem 0; + color: #34d399; + font-size: clamp(1rem, 4.5cqi, 1.3rem); +} + +.profile-info p { + margin: 0; + font-size: 0.85rem; + color: #94a3b8; +} + +/* 2. Container Query Execution */ +@container widget-container (min-width: 380px) { + .profile-widget { + flex-direction: row; + align-items: center; + } +}`} + height="360px" +/> + +## Summary of Module 4 Key Concepts + +| Topic | Primary Mechanism | Key Advantage | +| :--- | :--- | :--- | +| **Custom Properties** | `--var-name` / `var()` | Runtime dynamic styling, inheritance, and clean theme switching | +| **Responsive Design** | Mobile-First / `@media (width >= 768px)` | Fluid layouts and clean adaptation across screens | +| **Transitions & Animations** | `transition`, `@keyframes`, `transform` | Smooth hardware-accelerated user interaction and continuous loops | +| **Container Queries** | `container-type: inline-size` / `@container` | True component modularity based on parent container dimensions | \ No newline at end of file diff --git a/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md b/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md index e69de29bb..5de593af6 100644 --- a/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md +++ b/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md @@ -0,0 +1,167 @@ +--- +id: css-custom-properties +title: "CSS Custom Properties (Variables)" +sidebar_label: "Lecture 12" +sidebar_position: 1 +description: "Master CSS Custom Properties (Variables)—declaration scoping, cascading inheritance, fallback values, JavaScript manipulation, and theme switching patterns." +tags: + - CSS + - Custom Properties + - CSS Variables + - Modern CSS + - Web Development + - CodeHarborHub +--- + +**CSS Custom Properties** (often referred to as **CSS Variables**) are entities defined by CSS authors that contain specific values to be reused throughout a document. Unlike traditional preprocessor variables (Sass/Less), CSS variables live in the DOM, adhere to the cascade, inherit values across elements, and can be read or mutated dynamically at runtime using JavaScript. + +## 1. Syntax, Scoping, and Fallbacks + +CSS Custom Properties are declared using a double-hyphen prefix (`--`) and accessed using the `var()` function. + +### Global vs. Local Scoping + +* **Global Scope (`:root`):** Properties declared on the `:root` pseudo-class are available everywhere in the DOM tree. +* **Local Scope:** Properties declared inside a specific component selector are scoped strictly to that element and its descendants. + +```css +/* Global Scope */ +:root { + --primary-color: #2563eb; + --base-padding: 1rem; +} + +/* Local Scope Override */ +.card-featured { + --primary-color: #d97706; /* Overrides global value for this box & children */ + padding: var(--base-padding); + border: 2px solid var(--primary-color); +} + +``` + +### Fallback Values in `var()` + +The `var()` function accepts a second argument as a fallback value in case the target custom property is undefined: + +```css +.button { + /* Uses --button-bg if defined; falls back to #059669 if undefined */ + background-color: var(--button-bg, #059669); + + /* Nested fallback chain */ + color: var(--button-text, var(--primary-color, #ffffff)); +} + +``` + +## 2. Dynamic Runtime Manipulation with JavaScript + +Because custom properties are live DOM objects, you can easily read, write, and remove them dynamically at runtime via JavaScript. + +```javascript +// Get an element reference +const root = document.documentElement; + +// Read custom property value +const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color'); + +// Dynamically mutate property value +root.style.setProperty('--primary-color', '#10b981'); + +// Remove custom property override +root.style.removeProperty('--primary-color'); + +``` + +## 3. Practical Architecture: Theme Switching System + +CSS variables enable clean, light/dark theme switching without repeating stylesheet rules. By altering dataset attributes or class names on `` or ``, custom property values switch instantly across the UI. + +```css +/* Base Theme Tokens */ +:root { + --bg-color: #ffffff; + --text-color: #0f172a; + --card-bg: #f8fafc; + --accent-color: #2563eb; +} + +/* Dark Theme Overrides */ +[data-theme="dark"] { + --bg-color: #0f172a; + --text-color: #f8fafc; + --card-bg: #1e293b; + --accent-color: #38bdf8; +} + +/* Components consume variables seamlessly */ +body { + background-color: var(--bg-color); + color: var(--text-color); +} + +.card { + background-color: var(--card-bg); + border: 1px solid var(--accent-color); +} + +``` + +## Interactive Playground: Dynamic Theme Engine + +Test local variable scoping and live custom property toggling in the interactive editor below: + + +

Themed Card Component

+

This layout uses inherited custom CSS variables.

+
+ Nested Box Override +
+`} +defaultCss={`/* Global Theme Variables Context */ +:root { + --card-bg: #1e293b; + --text-accent: #38bdf8; + --padding-unit: 1.5rem; +} + +.theme-card { + background-color: var(--card-bg); + color: #ffffff; + padding: var(--padding-unit); + border-radius: 8px; + font-family: system-ui, sans-serif; +} + +.theme-card h3 { + margin-top: 0; + color: var(--text-accent); +} + +/* Local Component Scope Override */ +.nested-box { + /* Local variable override */ + --box-bg: #2563eb; + --text-accent: #ffffff; + + background-color: var(--box-bg); + color: var(--text-accent); + padding: calc(var(--padding-unit) * 0.75); + border-radius: 6px; + font-weight: 600; + text-align: center; +}`} + height="340px" +/> + +## Summary Reference Table + +| Concept / Feature | Syntax Example | Key Advantage | +| --- | --- | --- | +| **Declaration** | `--accent: #2563eb;` | Establishes a reusable CSS variable | +| **Usage** | `color: var(--accent);` | References variable value with inheritance support | +| **Fallback** | `var(--accent, #000000)` | Provides safe default if variable is undefined | +| **Global Scope** | `:root { --gap: 1rem; }` | Makes property available across the entire document | +| **JavaScript API** | `el.style.setProperty('--gap', '2rem')` | Allows real-time dynamic design token manipulation | \ No newline at end of file diff --git a/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md b/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md index e69de29bb..2b202a561 100644 --- a/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md +++ b/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md @@ -0,0 +1,152 @@ +--- +id: responsive-design-media-queries +title: "Responsive Design & Media Queries" +sidebar_label: "Lecture 13" +sidebar_position: 2 +description: "Master fluid responsive layouts using fluid typography, viewport units, flexible images, and modern CSS Media Queries with Range Syntax." +tags: + - CSS + - Responsive Design + - Media Queries + - Mobile First + - CodeHarborHub +--- + +**Responsive Web Design (RWD)** is an approach that ensures web applications render seamlessly across a wide variety of devices and viewport dimensions—from handheld smartphones to high-resolution desktop displays—using fluid layouts, flexible images, and CSS Media Queries. + +## 1. The Viewport Meta Tag + +Before writing responsive styles, you must instruct the browser how to control the page's dimensions and scaling. Without a viewport meta tag, mobile browsers render pages at desktop widths (~980px) and scale them down, causing tiny text and horizontal scrolling. + +Add this tag inside your HTML ``: + +```html + +``` + +## 2. Mobile-First vs. Desktop-First Strategy + +There are two primary architectural methodologies for writing media queries: + +``` +Mobile-First Strategy (Recommended) +┌────────────┐min-width: 768px ┌────────────┐min-width: 1024px ┌────────────┐ +│ Base CSS │────────────────► │ Tablet CSS │────────────────► │ Desktop │ +│ (Mobile) │ │ Overrides │ │ Overrides │ +└────────────┘ └────────────┘ └────────────┘ + +``` + +### 1. Mobile-First (`min-width`) + +Base styles are written for the smallest screens first without media queries. Media queries progressively enhance the layout as screen width increases. + +```css +/* Base styles (Mobile) */ +.card-grid { + display: flex; + flex-direction: column; + gap: 1rem; +} + +/* Tablet & larger */ +@media (min-width: 768px) { + .card-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} + +/* Desktop & larger */ +@media (min-width: 1024px) { + .card-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +``` + +### 2. Desktop-First (`max-width`) + +Base styles target large displays, while media queries strip down layout features as the viewport shrinks. + +## 3. Media Query Syntax & Modern Range Operators + +### Traditional Syntax vs. Modern Range Syntax (Media Queries Level 4) + +Modern CSS supports cleaner comparison operators (`>=`, `<=`, `>`, `<`) for media queries: + +```css +/* ❌ Traditional Syntax */ +@media (min-width: 768px) and (max-width: 1024px) { + .container { padding: 2rem; } +} + +/* ✅ Modern Range Syntax */ +@media (768px <= width <= 1024px) { + .container { padding: 2rem; } +} + +``` + +## 4. Fluid Typography with `clamp()` + +Instead of stepping font sizes abruptly across breakpoint boundaries using media queries, use `clamp()` to achieve smooth fluid sizing: + +$$ +\text{clamp}(\text{MIN}, \text{VAL}, \text{MAX}) +$$ + +```css +h1 { + /* Minimum: 1.75rem, Preferred: 4vw, Maximum: 3.5rem */ + font-size: clamp(1.75rem, 4vw, 3.5rem); +} + +``` + +## Interactive Playground: Responsive Card Grid + +Resize your browser viewport or test breakpoint adjustments in the live editor below: + + +

Fluid Header Element

+

Resize your browser preview window to watch the title text scale smoothly using the clamp function.

+ +`} +defaultCss={` +/* Responsive Card Box */ +.responsive-card { +background-color: #1e293b; +border: 1px solid #334155; +padding: 1.25rem; +border-radius: 6px; +color: #ffffff; +} + +/* Fluid Typography */ +.responsive-card h3 { +margin-top: 0; +color: #38bdf8; +font-size: clamp(1.1rem, 2.5vw, 1.5rem); +} + +.responsive-card p { +margin: 0; +font-size: 0.875rem; +color: #94a3b8; +}`} +height="340px" +/> + +## Summary Reference Table + +| Feature / Technique | Syntax Example | Use Case | +| --- | --- | --- | +| **Viewport Meta** | `` | Prevents mobile scaling bugs | +| **Min-Width Query** | `@media (min-width: 768px) { ... }` | Mobile-first breakpoint overrides | +| **Range Query** | `@media (width >= 1024px) { ... }` | Modern CSS Level 4 Media Query | +| **Fluid Value** | `font-size: clamp(1rem, 2.5vw, 2rem);` | Smooth non-step fluid scaling | +| **Fluid Image** | `img { max-width: 100%; height: auto; }` | Prevents image container overflow | \ No newline at end of file diff --git a/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md b/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md index e69de29bb..19390740a 100644 --- a/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md +++ b/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md @@ -0,0 +1,178 @@ +--- +id: transitions-transforms-animations +title: "Transitions, Transforms & Keyframe Animations" +sidebar_label: "Lecture 14" +sidebar_position: 3 +description: "Master modern CSS motion design—hardware-accelerated 2D/3D transforms, fluid transitions, timing functions, and multi-stage @keyframes animations." +tags: + - CSS + - Animations + - Transitions + - Transforms + - Motion Design + - CodeHarborHub +--- + +Adding motion to web user interfaces elevates the user experience by providing visual feedback, guiding user attention, and creating polished interactions. CSS provides three core mechanisms for UI motion: **Transforms**, **Transitions**, and **Keyframe Animations**. + +## 1. 2D & 3D CSS Transforms + +The `transform` property allows you to visually manipulate an element's spatial geometry without disturbing the surrounding normal document flow (preventing unnecessary layout reflows). + +``` + [ CSS Transform Functions ] + │ + ┌────────────────┬───────────┴───────────┬────────────────┐ + ▼ ▼ ▼ ▼ +[ translate() ] [ scale() ] [ rotate() ] [ skew() ] +Moves element Resizes element Rotates element Tilts element along +along X/Y/Z axes relative to origin by angle deg X/Y axes + +``` + +### Common Transform Properties + +```css +.card { + /* Combine multiple transform operations */ + transform: translateY(-8px) scale(1.03) rotate(1deg); + + /* Change the origin point of transformation (Default: 50% 50%) */ + transform-origin: top left; +} + +``` + +:::tip Performance Optimization +Always prefer animating `transform` and `opacity`. Browsers offload these properties directly to the GPU (Graphics Processing Unit), avoiding expensive layout recalculations (`reflow`) and repaints. +::: + +## 2. CSS Transitions + +CSS Transitions enable smooth value changes over a specified duration when an element switches between different visual states (such as `:hover`, `:focus`, or JavaScript class toggles). + +### Shorthand Syntax + +$$ +\text{transition: [property] [duration] [timing-function] [delay];} +$$ + +```css +.button { + background-color: #2563eb; + transform: scale(1); + + /* Transition specific properties for optimal performance */ + transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.button:hover { + background-color: #1d4ed8; + transform: scale(1.05); +} + +``` + +### Common Timing Functions (`transition-timing-function`) + +* `ease` *(default)*: Starts slow, speeds up, then slows down. +* `linear`: Constant speed from start to end. +* `ease-in-out`: Symmetric slow start and end. +* `cubic-bezier(p1, p2, p3, p4)`: Custom acceleration curve for ultra-smooth UI motion. + +## 3. Multi-Stage Keyframe Animations + +While transitions require a state change trigger (like `:hover`), `@keyframes` animations run automatically, can loop infinitely, and support complex multi-step sequences. + +### Defining Keyframes & Applying Animations + +```css +/* 1. Define the Keyframe Sequence */ +@keyframes pulseGlow { + 0% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); + } + 50% { + transform: scale(1.05); + box-shadow: 0 0 20px 10px rgba(37, 99, 235, 0); + } + 100% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); + } +} + +/* 2. Apply to Element */ +.badge-live { + /* animation: name duration timing-function delay iteration-count direction fill-mode */ + animation: pulseGlow 2s ease-in-out infinite; +} + +``` + +## Interactive Playground: Hardware-Accelerated Motion + +Test combined transform state changes, transition curves, and continuous keyframe loops in the live editor below: + + + Hover Me + + +
+ Floating Pulse +
+`} +defaultCss={` +/* Base Box Style */ +.interactive-box { +width: 140px; +height: 100px; +border-radius: 8px; +color: #ffffff; +font-weight: 600; +font-size: 0.85rem; +display: flex; +align-items: center; +justify-content: center; +text-align: center; +cursor: pointer; +} + +/* 1. Transition Box */ +.transition-box { +background-color: #2563eb; +transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease; +} + +.transition-box:hover { +transform: translateY(-10px) scale(1.08); +background-color: #059669; +} + +/* 2. Keyframe Animation Box */ +.animation-box { +background-color: #d97706; +animation: floatPulse 2.5s ease-in-out infinite; +} + +@keyframes floatPulse { +0%, 100% { +transform: translateY(0); +} +50% { +transform: translateY(-8px) scale(1.04); +} +}`} +height="340px" +/> + +## Summary Reference Table + +| Motion Tool | Primary Trigger | Complexity Level | GPU Accelerated? | +| --- | --- | --- | --- | +| **`transform`** | Applied directly or via state | Spatial changes (move, rotate, scale) | Yes | +| **`transition`** | State change (`:hover`, JS class) | A-to-B smooth state interpolation | Yes (for opacity/transform) | +| **`@keyframes`** | Page load or class assignment | Multi-step dynamic sequence loops | Yes (for opacity/transform) | \ No newline at end of file diff --git a/courses/css/module-4-modern-css/lecture-15-container-queries.md b/courses/css/module-4-modern-css/lecture-15-container-queries.md new file mode 100644 index 000000000..d608dd43f --- /dev/null +++ b/courses/css/module-4-modern-css/lecture-15-container-queries.md @@ -0,0 +1,195 @@ +--- +id: container-queries +title: "CSS Container Queries & Modern Layouts" +sidebar_label: "Lecture 15" +sidebar_position: 4 +description: "Master component-driven responsive design with CSS Container Queries (@container)—container types, query units, inline sizing, and adaptive UI components." +tags: + - CSS + - Container Queries + - Responsive Design + - Modern CSS + - CodeHarborHub +--- + +While traditional media queries make styling decisions based on the width of the entire browser viewport, **CSS Container Queries** (`@container`) allow elements to query the dimensions and styles of their immediate parent container. This enables true modular, component-driven responsive design. + +## 1. The Limitation of Viewport Media Queries + +With standard viewport `@media` queries, a UI component (like a card) responds strictly to screen width, regardless of where it is placed on the page: + + +``` + +┌─────────────────────────────────────────────────────────────┐ +│ VIEWPORT │ +│ │ +│ ┌───────────────────────────┐ ┌────────────────────────┐ │ +│ │ Main Content Column (70%) │ │ Sidebar Column (30%) │ │ +│ │ │ │ │ │ +│ │ ┌───────────────────────┐ │ │ ┌────────────────────┐ │ │ +│ │ │ Card Component │ │ │ │ Card Component │ │ │ +│ │ │ (Wants Wide Layout) │ │ │ │ (Wants Stacked) │ │ │ +│ │ └───────────────────────┘ │ │ └────────────────────┘ │ │ +│ └───────────────────────────┘ └────────────────────────┘ │ +└─────────────────────────────────────────────────────────────┘ + +``` + +Both cards above see the **same viewport width**, forcing developers to create fragile context-dependent modifier classes (e.g., `.card--sidebar`). **Container queries resolve this completely.** + +## 2. Defining a Containment Context (`container-type`) + +To query a parent element's size, you must first register it as a container using `container-type` and optionally assign a `container-name`. + +```css +/* Step 1: Register the Container */ +.card-wrapper { + /* Establishes inline-size (width) containment */ + container-type: inline-size; + container-name: card-host; +} + +``` + +### Container Type Options + +| Value | Description | +| --- | --- | +| **`inline-size`** *(Most Common)* | Queries the inline dimension (width) of the container. Avoids infinite height layout loops. | +| **`size`** | Queries both inline (width) and block (height) dimensions. Requires explicit container height. | +| **`normal`** | Removes containment tracking from the element. | + +## 3. Querying the Container (`@container`) + +Once a container context is established, child elements can target it using `@container` queries: + +```css +/* Base Mobile/Narrow Component Styles */ +.card { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +/* Step 2: Component responds when wrapper width reaches 400px */ +@container (min-width: 400px) { + .card { + flex-direction: row; + align-items: center; + } + + .card-image { + width: 150px; + height: 100%; + } +} + +``` + +## 4. Container Query Length Units + +CSS Container Queries introduce dynamic length units relative to the container's dimensions: + +| Unit | Description | Relative Measurement | +| --- | --- | --- | +| **`cqw`** | Container Query Width | 1% of container's width | +| **`cqh`** | Container Query Height | 1% of container's height | +| **`cqi`** | Container Query Inline | 1% of container's inline size | +| **`cqb`** | Container Query Block | 1% of container's block size | +| **`cqmin`** | Container Query Minimum | Smaller value of `cqi` or `cqb` | +| **`cqmax`** | Container Query Maximum | Larger value of `cqi` or `cqb` | + +```css +.card-title { + /* Font size scales smoothly based on container width, not viewport */ + font-size: clamp(1rem, 5cqw, 1.75rem); +} + +``` + +## Interactive Playground: Modular Responsive Card + +Resize or view the card wrapper to see the component dynamically adapt its layout based on container width: + + +
+
JD
+
+

John Doe

+

Frontend Engineer & UI Specialist

+
+
+ +`} +defaultCss={` +/* 1. Register Containment Context */ +.card-container { +container-type: inline-size; +container-name: card-wrapper; +width: 100%; +resize: horizontal; +overflow: auto; +padding: 0.5rem; +background-color: #1e293b; +border: 1px dashed #475569; +border-radius: 6px; +} + +/* Base Component (Narrow Layout) */ +.user-card { +display: flex; +flex-direction: column; +gap: 1rem; +background-color: #0f172a; +padding: 1rem; +border-radius: 6px; +border: 1px solid #334155; +color: #ffffff; +} + +.avatar { +width: 50px; +height: 50px; +background-color: #2563eb; +border-radius: 50%; +display: flex; +align-items: center; +justify-content: center; +font-weight: 700; +color: #ffffff; +} + +.user-card h3 { +margin: 0 0 0.25rem 0; +color: #38bdf8; +font-size: clamp(1rem, 4cqi, 1.3rem); +} + +.user-card p { +margin: 0; +font-size: 0.85rem; +color: #94a3b8; +} + +/* 2. Container Query (Triggers based on container width) */ +@container card-wrapper (min-width: 350px) { +.user-card { +flex-direction: row; +align-items: center; +} +}`} +height="360px" +/> + +## Summary Reference Table + +| Feature / Syntax | Example | Purpose | +| --- | --- | --- | +| **`container-type`** | `container-type: inline-size;` | Registers element as a queryable container | +| **`container-name`** | `container-name: sidebar;` | Names container for targeting specific parents | +| **`container` shorthand** | `container: sidebar / inline-size;` | Combines container name and type | +| **`@container` Query** | `@container (min-width: 400px) { ... }` | Applies conditional styles based on container size | +| **Container Units** | `font-size: 4cqw;` | Sizes elements relative to container dimensions | \ No newline at end of file diff --git a/courses/css/module-5-advanced-css/_category_.json b/courses/css/module-5-advanced-css/_category_.json new file mode 100644 index 000000000..e351ba206 --- /dev/null +++ b/courses/css/module-5-advanced-css/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Module 5: Advanced CSS Architecture", + "position": 6, + "link": { + "type": "generated-index", + "description": "Master industrial CSS methodologies, modern CSS nesting, Sass architecture, BEM conventions, and utility-first paradigms for scalable codebases." + } +} \ No newline at end of file diff --git a/courses/css/module-5-advanced-css/challenges.md b/courses/css/module-5-advanced-css/challenges.md new file mode 100644 index 000000000..ca3018647 --- /dev/null +++ b/courses/css/module-5-advanced-css/challenges.md @@ -0,0 +1,257 @@ +--- +id: challenges +title: "Practical Challenges: Advanced CSS Architecture" +sidebar_label: "Challenges" +sidebar_position: 4 +description: Test your mastery of Advanced CSS Architecture with hands-on challenges covering BEM, Native CSS Nesting, and Utility-First layout design. +tags: + - CSS + - Challenges + - BEM + - CSS Nesting + - Architecture + - CodeHarborHub +--- + +Demonstrate your mastery of scalable CSS architecture and naming conventions. These practical exercises test your ability to implement **BEM (Block, Element, Modifier)** methodology, structure maintainable styles using **Native CSS Nesting**, and assemble flexible components via **Utility-First** principles. + +## Challenge 1: Refactor Legacy CSS to BEM Architecture + +### Objective +Take a legacy component burdened by deep tag nesting and fragile specificity, and refactor it into clean, maintainable **BEM** class structures with single-class specificity `(0,0,1,0)`. + +### Requirements +1. Convert all tag selectors to BEM block and element class names (`.article-card`, `.article-card__header`, `.article-card__title`, `.article-card__meta`). +2. Add a `.article-card--featured` block modifier to update theme colors and borders without increasing CSS specificity. +3. Ensure elements can never exist outside their base block context conceptually. + +### Solution + + +
+
+

Refactoring Legacy CSS

+ 5 min read +
+

Eliminate deep nesting wars by moving to flat BEM single-class selectors.

+
+ + +
+
+

Featured Architecture Guide

+ 10 min read +
+

Master structural separation and component isolation across large teams.

+
`} + defaultCss={`/* Base BEM Block */ +.article-card { + background-color: #1e293b; + border: 1px solid #334155; + border-radius: 8px; + padding: 1.25rem; + margin-bottom: 1rem; + color: #ffffff; + font-family: system-ui, sans-serif; +} + +/* BEM Elements */ +.article-card__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; +} + +.article-card__title { + margin: 0; + font-size: 1.1rem; + color: #38bdf8; +} + +.article-card__meta { + font-size: 0.75rem; + color: #94a3b8; + background-color: #0f172a; + padding: 0.2rem 0.5rem; + border-radius: 4px; +} + +.article-card__excerpt { + margin: 0; + font-size: 0.875rem; + color: #cbd5e1; + line-height: 1.5; +} + +/* Block Modifier Override */ +.article-card--featured { + border-color: #059669; + background-color: #064e3b; +} + +.article-card--featured .article-card__title { + color: #34d399; +} + +.article-card--featured .article-card__meta { + background-color: #022c22; + color: #a7f3d0; +}`} + height="360px" +/> + +## Challenge 2: Native CSS Nesting for Navigation UI + +### Objective +Construct an interactive header navigation component using modern **Native CSS Nesting** and parent selector (`&`) state bindings. + +### Requirements +1. Nest descendant elements directly within the primary `.site-nav` selector. +2. Bind state modifiers and pseudo-classes (`:hover`, `:focus`, `.site-nav__link--active`) directly using the `&` parent selector. +3. Nest an `@media` query inside the base container to adjust layout direction on larger screens. + +### Solution + + + +`} + defaultCss={`/* Container using Native CSS Nesting */ +.site-nav { + background-color: #0f172a; + padding: 1rem; + border-radius: 8px; + border: 1px solid #334155; + font-family: system-ui, sans-serif; + + /* Nested Element List */ + & .site-nav__list { + display: flex; + flex-direction: column; + gap: 0.5rem; + list-style: none; + margin: 0; + padding: 0; + } + + /* Nested Link Styles */ + & .site-nav__link { + display: block; + padding: 0.5rem 0.75rem; + color: #94a3b8; + text-decoration: none; + font-size: 0.9rem; + font-weight: 600; + border-radius: 4px; + transition: all 0.2s ease; + + /* Parent Selector State Nesting */ + &:hover { + color: #ffffff; + background-color: #1e293b; + } + + &.site-nav__link--active { + color: #38bdf8; + background-color: #0369a1; + } + } + + /* Nested Responsive Layout */ + @media (min-width: 480px) { + & .site-nav__list { + flex-direction: row; + justify-content: space-around; + } + } +}`} + height="320px" +/> + +## Challenge 3: Composable Utility-First Dashboard Card + +### Objective +Assemble a responsive user analytics card exclusively by layering single-purpose **utility classes** without writing custom, feature-specific semantic rules. + +### Requirements +1. Create atomic helper classes covering layout (`u-flex`), spacing (`u-gap`), colors (`u-bg-slate`), borders (`u-rounded`), and typography. +2. Build a complete UI metric component featuring a status badge, numerical value, and secondary trend text purely through class composition. + +### Solution + + +
+
+ TOTAL REVENUE + +12.5% +
+
$48,290.00
+

Compared to ($42,910.00 last month)

+
`} + defaultCss={`/* Layout Utilities */ +.u-flex { display: flex; } +.u-flex-col { flex-direction: column; } +.u-justify-between { justify-content: space-between; } +.u-items-center { align-items: center; } +.u-gap-2 { gap: 0.5rem; } +.u-p-4 { padding: 1.25rem; } + +/* Surface Utilities */ +.u-bg-card { background-color: #0f172a; } +.u-rounded { border-radius: 8px; } +.u-border { border: 1px solid #334155; } + +/* Typography & Tag Utilities */ +.u-label { + font-size: 0.75rem; + font-weight: 700; + color: #64748b; + letter-spacing: 0.05em; + font-family: system-ui, sans-serif; +} + +.u-metric { + font-size: 1.75rem; + font-weight: 800; + color: #f8fafc; + font-family: system-ui, sans-serif; +} + +.u-subtext { + margin: 0; + font-size: 0.8rem; + color: #94a3b8; + font-family: system-ui, sans-serif; +} + +/* Badge Utilities */ +.u-badge { + font-size: 0.75rem; + font-weight: 700; + padding: 0.2rem 0.5rem; + border-radius: 9999px; +} + +.u-badge-success { + background-color: #064e3b; + color: #34d399; + border: 1px solid #059669; +}`} + height="300px" +/> + +## Summary of Module 5 Key Concepts + +| Methodology | Core Principle | Primary Advantage | +| :--- | :--- | :--- | +| **BEM Conventions** | Encapsulate Blocks, Elements, and Modifiers | Eliminates specificity wars and creates self-documenting code | +| **Native CSS Nesting** | Nest descendant rules and `&` pseudo-states | Keeps contextual component CSS grouped logically in one place | +| **Utility-First** | Compose UI using atomic, single-purpose classes | Keeps CSS bundle size constant while enabling rapid prototyping | \ No newline at end of file diff --git a/courses/css/module-5-advanced-css/lecture-16-bem-methodology.md b/courses/css/module-5-advanced-css/lecture-16-bem-methodology.md new file mode 100644 index 000000000..39678c31f --- /dev/null +++ b/courses/css/module-5-advanced-css/lecture-16-bem-methodology.md @@ -0,0 +1,117 @@ +--- +id: bem-methodology +title: "BEM Architecture & Naming Conventions" +sidebar_label: "Lecture 16" +sidebar_position: 1 +description: "Master the Block-Element-Modifier (BEM) methodology—eliminating specificity conflicts, maintaining modular CSS components, and writing self-documenting code." +tags: + - CSS + - BEM + - CSS Architecture + - CodeHarborHub +--- + +As CSS codebases grow, maintaining predictability and preventing specificity conflicts become major engineering challenges. **BEM (Block, Element, Modifier)** is a battle-tested naming convention created to keep component CSS modular, flat, and scalable. + +## 1. BEM Core Concepts + +BEM decomposes user interfaces into three distinct entities: + + +``` + +┌──────────────────────────────────────────────┐ +│ BLOCK │ +│ .card │ +│ ┌────────────────────────────────────────┐ │ +│ │ ELEMENT │ │ +│ │ .card__title │ │ +│ └────────────────────────────────────────┘ │ +│ ┌────────────────────────────────────────┐ │ +│ │ MODIFIER │ │ +│ │ .card--featured │ │ +│ └────────────────────────────────────────┘ │ +└──────────────────────────────────────────────┘ + +``` + +* **Block (`.block`)**: A standalone, reusable component entity (e.g., `card`, `nav`, `button`). +* **Element (`.block__element`)**: A dependent sub-part of a block that has no standalone meaning outside of it, delineated by double underscores `__` (e.g., `card__title`, `nav__item`). +* **Modifier (`.block--modifier` or `.block__element--modifier`)**: A flag that alters the visual appearance, state, or behavior of a block or element, delineated by double hyphens `--` (e.g., `card--featured`, `button--large`). + +## 2. Specificity and the Flat Structure Advantage + +Without BEM, developers often rely on deep structural nesting, leading to fragile specificity wars: + +```css +/* ❌ Anti-Pattern: High Specificity & Fragile HTML Coupling */ +div.sidebar ul.menu > li.item a { + color: #2563eb; +} + +/* ✅ BEM Solution: Flat Single-Class Specificity (0,0,1,0) */ +.menu__link { + color: #2563eb; +} + +.menu__link--active { + color: #059669; +} + +``` + +## 3. BEM Best Practices & Common Pitfalls + +1. **Avoid Multi-Level Element Nesting:** Avoid syntax like `.card__header__title`. Keep element names shallow relative to the block (e.g., `.card__title`). +2. **Combine Block and Modifier Classes:** Never use a modifier class in isolation. Always apply the base block/element class alongside its modifier (`class="btn btn--primary"`). +3. **Use Utility Classes Sparingly:** Keep block styling encapsulated within the BEM scope to maintain predictability across teams. + +## Interactive Playground: BEM Notification Card + +Observe how BEM classes structure blocks, elements, and modifier states cleanly without specificity escalation: + + +

Standard Update

+

Your backup has completed successfully.

+ + +
+

Security Alert

+

New login detected from an unrecognized device.

+
+`} +defaultCss={` +/* 2. Block Elements */ +.notification-card__title { +margin: 0 0 0.5rem 0; +color: #38bdf8; +font-size: 1.1rem; +} + +.notification-card__text { +margin: 0; +font-size: 0.85rem; +color: #94a3b8; +} + +/* 3. Block Modifier */ +.notification-card--urgent { +background-color: #2a1215; +border-left-color: #ef4444; +} + +.notification-card--urgent .notification-card__title { +color: #fca5a5; +}`} +height="340px" +/> + +## Summary Reference Table + +| Entity | Syntax Pattern | Example Class | Purpose | +| --- | --- | --- | --- | +| **Block** | `.block` | `.btn` | Standalone UI block container | +| **Element** | `.block__element` | `.btn__icon` | Dependent sub-part of block | +| **Modifier** | `.block--modifier` | `.btn--success` | Variant style or state flag | \ No newline at end of file diff --git a/courses/css/module-5-advanced-css/lecture-17-css-nesting-sass.md b/courses/css/module-5-advanced-css/lecture-17-css-nesting-sass.md new file mode 100644 index 000000000..c83984baa --- /dev/null +++ b/courses/css/module-5-advanced-css/lecture-17-css-nesting-sass.md @@ -0,0 +1,169 @@ +--- +id: css-nesting-sass +title: "Modern CSS Nesting & Preprocessors" +sidebar_label: "Lecture 17" +sidebar_position: 2 +description: "Master Native CSS Nesting and Sass/SCSS preprocessor architecture—mixins, control directives, modules, and modern nesting syntax." +tags: + - CSS + - CSS Nesting + - Sass + - SCSS + - CodeHarborHub +--- + +CSS rules were traditionally flat, requiring repetitive selector declarations. Today, **Native CSS Nesting** lets developers group dependent rules directly in standard CSS—a capability originally pioneered by preprocessors like **Sass/SCSS**. + +## 1. Native CSS Nesting Syntax + +Native CSS Nesting allows child selectors, pseudo-classes, and media queries to be nested directly within a parent rule block. + +```css +/* Modern Native CSS Nesting */ +.article-card { + background-color: #1e293b; + padding: 1.5rem; + border-radius: 8px; + border: 1px solid #334155; + + /* Target nested element */ + & .article-card__title { + color: #38bdf8; + margin-top: 0; + } + + /* Target state on parent */ + &:hover { + border-color: #2563eb; + + & .article-card__title { + color: #60a5fa; + } + } + + /* Target nested media query */ + @media (width >= 600px) { + padding: 2rem; + } +} + +``` + +:::tip The Parent Selector (`&`) +The `&` nesting symbol explicitly references the outer parent selector. In Native CSS, nested rules without `&` implicitly prepend `& ` (with a space) for descendant matching. +::: + +## 2. SCSS Architecture: Mixins & Modules + +While Native CSS supports nesting and custom properties, CSS preprocessors like Sass/SCSS offer advanced programmatic capabilities compiled to standard CSS. + +### Reusable Mixins (`@mixin` & `@include`) + +```scss +// Define a reusable flexbox layout mixin +@mixin flex-center($direction: row,$gap: 1rem) { + display: flex; + flex-direction: $direction; + align-items: center; + justify-content: center; + gap: $gap; +} + +// Consume the mixin inside a component +.hero-box { + @include flex-center(column, 1.5rem); + min-height: 200px; +} + +``` + +### Modern Sass Module System (`@use` & `@forward`) + +```scss +// _variables.scss +$primary-color: #2563eb; +$font-stack: system-ui, sans-serif; + +// styles.scss +@use 'variables' as vars; + +.button { + background-color: vars.$primary-color; + font-family: vars.$font-stack; +} + +``` + +## Interactive Playground: Nested Component Architecture + +Test live Native CSS Nesting state cascades in the editor below: + + +

Native Nesting Card

+

Hover over this card component to see the heading color and button background change simultaneously.

+ +`} +defaultCss={`/* Font Context Setup */ +:root { + font-family: system-ui, sans-serif; +} + +/* Parent Block Selector */ +.nested-card { + background-color: #1e293b; + border: 1px solid #334155; + padding: 1.5rem; + border-radius: 8px; + color: #ffffff; + transition: border-color 0.3s ease; + + /* Nested Elements */ + & .nested-card__heading { + margin-top: 0; + color: #38bdf8; + transition: color 0.3s ease; + } + + & .nested-card__body { + color: #94a3b8; + font-size: 0.85rem; + line-height: 1.5; + margin-bottom: 1rem; + } + + & .nested-card__button { + background-color: #2563eb; + color: #ffffff; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + font-weight: 600; + transition: background-color 0.3s ease; + } + + /* Nested Parent Hover State Cascade */ + &:hover { + border-color: #38bdf8; + + & .nested-card__heading { + color: #34d399; + } + + & .nested-card__button { + background-color: #059669; + } + } +}`} + height="340px" +/> + +## Summary Reference Table + +| Feature | Native CSS Syntax | SCSS / Sass Syntax | +| --- | --- | --- | +| **Nesting Selector** | `& .child { ... }` | `& .child { ... }` | +| **Parent Reference** | `&:hover { ... }` | `&:hover { ... }` | +| **Reusability** | CSS Custom Properties | `@mixin` / `@include` directives | +| **Modular System** | `@import` / `@layer` | `@use` / `@forward` module system | \ No newline at end of file diff --git a/courses/css/module-5-advanced-css/lecture-18-css-architecture-utility-first.md b/courses/css/module-5-advanced-css/lecture-18-css-architecture-utility-first.md new file mode 100644 index 000000000..054026843 --- /dev/null +++ b/courses/css/module-5-advanced-css/lecture-18-css-architecture-utility-first.md @@ -0,0 +1,165 @@ +--- +id: css-architecture-utility-first +title: "CSS Architecture Paradigms & Utility-First CSS" +sidebar_label: "Lecture 18" +sidebar_position: 3 +description: "Explore major CSS architectures—OOCSS, SMACSS, ITCSS, and modern Utility-First CSS paradigms (Tailwind CSS architecture)." +tags: + - CSS + - CSS Architecture + - Utility-First + - OOCSS + - CodeHarborHub +--- + +As applications scale in size and team headcount, organizing CSS files systematically becomes critical. Without a structured architecture, CSS files grow monotonically, specificity bugs compound, and code refactoring becomes dangerous. + +In this lecture, we compare traditional paradigms—**OOCSS**, **SMACSS**, and **ITCSS**—with the modern **Utility-First** pattern. + +## 1. Traditional CSS Architecture Paradigms + +``` + [ ITCSS Layered Specificity ] + + ┌───────────────────────────┐ High Specificity + │ TRUMPS / UTILITIES │ ▲ + ├───────────────────────────┤ │ + │ COMPONENTS │ │ + ├───────────────────────────┤ │ + │ OBJECTS │ │ + ├───────────────────────────┤ │ + │ ELEMENTS │ │ + ├───────────────────────────┤ │ + │ GENERIC │ │ + ├───────────────────────────┤ │ + │ SETTINGS / TOOLS │ │ + └───────────────────────────┘ Low Specificity + +``` + +### Object-Oriented CSS (OOCSS) +Pioneered by Nicole Sullivan, OOCSS focuses on component reusability through two core principles: +1. **Separate Structure from Skin:** Structural properties (width, height, padding) should be separated from visual skin properties (colors, borders, gradients). +2. **Separate Container from Content:** Avoid coupling component styles to specific DOM locations (e.g., use `.button` instead of `#sidebar .button`). + +### Scalable and Modular Architecture for CSS (SMACSS) +Created by Jonathan Snook, SMACSS categorizes CSS rules into five distinct layers: +* **Base:** Default HTML resets and tag styles (`h1`, `a`, `body`). +* **Layout:** Structural grid elements splitting the page into major sections (`#header`, `.layout-sidebar`). +* **Module:** Reusable visual UI components (`.card`, `.modal`). +* **State:** Augmentation styles describing state changes (`.is-active`, `.is-disabled`). +* **Theme:** Visual skins defining color palettes and typography themes. + +### Inverted Triangle CSS (ITCSS) +Created by Harry Roberts, ITCSS organizes files in layers strictly ordered by specificity (from reach/low-specificity to explicit/high-specificity) to prevent cascade conflicts. + +--- + +## 2. Utility-First CSS Paradigm + +Instead of writing custom semantic class names (`.user-profile-card-header`), **Utility-First CSS** composes user interfaces using small, single-purpose immutable utility classes. + +### Semantic CSS vs. Utility-First Comparison + +```html + +
+

Jane Doe

+

Full-stack software engineer.

+
+ +``` + +```html + +
+

Jane Doe

+

Full-stack software engineer.

+
+ +``` + +### Core Advantages of Utility-First CSS + +* **Zero CSS Growth:** New features rarely require writing new CSS rules; utility classes are reused endlessly. +* **Safe Local Refactoring:** Editing HTML classes never breaks unrelated UI elements across the codebase. +* **No Specificity Creep:** All single-property utility classes share equal single-class specificity. + +--- + +## Interactive Playground: Composing UI with Utility Classes + +Observe how modular single-purpose utility classes assemble into a complete, interactive card component without custom CSS rule blocks: + + + FEATURED +

Utility-First Layer

+

This component is built by composing single-responsibility utility classes inside a flexible layout.

+ +`} + defaultCss={`/* Layout Wrapper Context */ +.utility-card { + display: flex; + flex-direction: column; + gap: 0.75rem; + background-color: #1e293b; + padding: 1.5rem; + border-radius: 8px; + border: 1px solid #334155; + font-family: system-ui, sans-serif; +} + +.u-badge { + display: inline-block; + align-self: flex-start; + background-color: #2563eb; + color: #ffffff; + font-size: 0.7rem; + font-weight: 700; + padding: 0.25rem 0.5rem; + border-radius: 4px; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.u-title { + margin: 0; + color: #38bdf8; + font-size: 1.15rem; +} + +.u-text { + margin: 0; + color: #94a3b8; + font-size: 0.875rem; + line-height: 1.5; +} + +.u-btn { + align-self: flex-start; + background-color: #059669; + color: #ffffff; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + font-weight: 600; + font-size: 0.85rem; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.u-btn:hover { + background-color: #047857; +}`} + height="360px" +/> + +## Summary Reference Table + +| Architecture | Core Philosophy | Best Used For | +| --- | --- | --- | +| **OOCSS** | Separate structural layout from visual skin | Reusable visual component themes | +| **SMACSS** | Categorize styles into Base, Layout, Module, State, Theme | Medium to large traditional codebases | +| **ITCSS** | Layered file architecture by increasing specificity | Enterprise multi-team projects | +| **Utility-First** | Single-purpose immutable helper classes | Rapid UI design & zero-growth CSS systems | \ No newline at end of file diff --git a/courses/css/module-6-practical-projects/_category_.json b/courses/css/module-6-practical-projects/_category_.json new file mode 100644 index 000000000..6637c10ff --- /dev/null +++ b/courses/css/module-6-practical-projects/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Module 6: Practical Projects", + "position": 7, + "link": { + "type": "generated-index", + "description": "Apply your complete modern CSS toolset by building real-world production projects: responsive landing pages, reactive analytics dashboards, and modular design systems." + } +} \ No newline at end of file diff --git a/courses/css/module-6-practical-projects/module-6-capstone-assessment.md b/courses/css/module-6-practical-projects/module-6-capstone-assessment.md new file mode 100644 index 000000000..fa601d592 --- /dev/null +++ b/courses/css/module-6-practical-projects/module-6-capstone-assessment.md @@ -0,0 +1,311 @@ +--- +id: module-6-capstone-assessment +title: "Module 6: Capstone Assessment & Final Review" +sidebar_label: "Module 6 Capstone" +sidebar_position: 4 +description: "Test your mastery of modern CSS with a comprehensive capstone assessment covering layout engines, modern state selectors, responsive design strategies, and design system architecture." +tags: + - CSS + - Capstone + - Assessment + - Practical Projects + - CodeHarborHub +--- + +Congratulations on completing the practical projects in **Module 6**! This final capstone assessment evaluates your mastery of advanced CSS layout systems, responsive design principles, modern selector features, and scalable design system architecture. + +## Technical Knowledge Review + +### Part 1: Core Architectural Concepts + +#### 1. Layout Engine Selection Matrix +Choosing the right CSS layout engine is critical for writing clean, maintainable stylesheets. + +| Requirement | Best Choice | Rationale | +| :--- | :--- | :--- | +| **1D Directional Flow** | Flexbox | Ideal for single-row or single-column alignments (e.g., navigation bars, action buttons). | +| **2D Page Shell / App Grid** | CSS Grid (`grid-template-areas`) | Unifies rows and columns under explicit semantic region names. | +| **Fluid Grid Item Scaling** | CSS Grid (`auto-fit` + `minmax()`) | Creates responsive multi-column layouts without manual media query breakpoints. | +| **Overlapping Layers** | CSS Grid / Absolute Position | Grid allows multiple children to occupy the same grid area without taking elements out of normal flow. | + +#### 2. Modern CSS Selectors & Features +* **Parent & State Selection (`:has()`):** Allows parent element styling based on child states (e.g., updating theme variables when a checkbox is checked). +* **Keyboard Focus Management (`:focus-visible`):** Restricts focus indicators strictly to keyboard navigation (Tab), keeping mouse interactions clean. +* **Aspect Ratio Preservation (`aspect-ratio`):** Replaces historic padding hacks with native aspect ratio enforcement. + +## Interactive Capstone Project Challenge + +In this final challenge, you will implement a **Production Card & Modal Layout** incorporating all Module 6 techniques: CSS Grid placement, custom property tokens, zero-JS state toggling using `:has()`, and responsive media query adaptations. + + +
+ + + + +
+
+

Module 6 Certification Challenge

+ +
+ + +
+
+
Grid Layout
+

2D App Shells

+

Master complex layouts using grid-template-areas and fluid columns.

+
+ Completed +
+
+ +
+
Design Systems
+

Token Architecture

+

Manage global variables, light/dark themes, and component scopes.

+
+ Completed +
+
+ +
+
Modern CSS
+

State Selectors

+

Implement zero-JS interaction patterns using CSS :has() selectors.

+
+ In Progress +
+
+
+
+ + +
+
+
+

Assessment Checklist

+ +
+
+
    +
  • ✓ Modern Flexbox and CSS Grid structure
    • +
  • ✓ Fluid typography and auto-fit minmax strategy
    • +
  • ✓ Pure CSS modal trigger via :has() selector
    • +
+
+
+ +
+
+
+
`} + defaultCss={`/* 1. CSS Custom Properties / Design Tokens */ +:root { + --cap-bg: #0f172a; + --cap-surface: #1e293b; + --cap-border: #334155; + --cap-text: #f8fafc; + --cap-muted: #94a3b8; + --cap-primary: #3b82f6; + --cap-primary-hover: #2563eb; + --cap-success: #10b981; + --cap-warning: #f59e0b; + --cap-radius: 8px; +} + +/* 2. Base Container Shell */ +.capstone-app { + position: relative; + background-color: var(--cap-bg); + color: var(--cap-text); + padding: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; + border-radius: var(--cap-radius); + min-height: 420px; +} + +.capstone-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--cap-border); + padding-bottom: 1rem; + margin-bottom: 1.5rem; +} + +.capstone-header h2 { + margin: 0; + font-size: 1.2rem; +} + +/* 3. Fluid Auto-Fit Card Grid */ +.capstone-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.25rem; +} + +.card { + background-color: var(--cap-surface); + border: 1px solid var(--cap-border); + border-radius: var(--cap-radius); + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.card__badge { + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--cap-primary); + font-weight: 700; +} + +.card__title { + margin: 0; + font-size: 1.05rem; +} + +.card__body { + margin: 0; + font-size: 0.85rem; + color: var(--cap-muted); + line-height: 1.4; + flex-grow: 1; +} + +.card__footer { + padding-top: 0.5rem; + border-top: 1px solid var(--cap-border); +} + +.status { + font-size: 0.75rem; + font-weight: 600; + padding: 0.2rem 0.5rem; + border-radius: 4px; +} + +.status--complete { + background-color: rgba(16, 185, 129, 0.15); + color: var(--cap-success); +} + +.status--active { + background-color: rgba(245, 158, 11, 0.15); + color: var(--cap-warning); +} + +/* 4. Action Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 0.9rem; + font-size: 0.85rem; + font-weight: 600; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn--primary { + background-color: var(--cap-primary); + color: #ffffff; +} + +.btn--primary:hover { + background-color: var(--cap-primary-hover); +} + +.btn--secondary { + background-color: transparent; + color: var(--cap-text); + border: 1px solid var(--cap-border); +} + +/* 5. Zero-JS Modal Overlay via :has Selector */ +.modal-backdrop { + position: absolute; + inset: 0; + background-color: rgba(15, 23, 42, 0.8); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + border-radius: var(--cap-radius); +} + +.modal-dialog { + background-color: var(--cap-surface); + border: 1px solid var(--cap-border); + border-radius: var(--cap-radius); + width: 90%; + max-width: 400px; + padding: 1.25rem; + transform: translateY(-10px); + transition: transform 0.3s ease; +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; +} + +.modal-header h4 { + margin: 0; +} + +.modal-close { + cursor: pointer; + font-size: 1.2rem; + color: var(--cap-muted); +} + +.modal-body ul { + padding-left: 1.2rem; + margin: 0 0 1rem 0; + font-size: 0.85rem; + color: var(--cap-muted); +} + +.modal-body li { + margin-bottom: 0.4rem; +} + +.modal-footer { + display: flex; + justify-content: flex-end; +} + +/* Trigger Modal State using :has() */ +.capstone-app:has(.modal-toggle-state:checked) .modal-backdrop { + opacity: 1; + pointer-events: auto; +} + +.capstone-app:has(.modal-toggle-state:checked) .modal-dialog { + transform: translateY(0); +}`} + height="480px" +/> + +## Final Self-Assessment Checklist + +Verify your readiness before moving on to advanced frameworks or real-world deployment: + +* Can build 2D Application layouts using `grid-template-areas`. +* Understand the operational difference between `auto-fit` and `auto-fill` inside `minmax()` column rules. +* Know how to structure design systems with modular CSS variables and BEM naming architecture. +* Familiar with modern state-driven selectors like `:has()` and accessible focus rings via `:focus-visible`. \ No newline at end of file diff --git a/courses/css/module-6-practical-projects/project-1-responsive-landing-page.md b/courses/css/module-6-practical-projects/project-1-responsive-landing-page.md new file mode 100644 index 000000000..c938bd9b7 --- /dev/null +++ b/courses/css/module-6-practical-projects/project-1-responsive-landing-page.md @@ -0,0 +1,287 @@ +--- +id: project-1-responsive-landing-page +title: "Responsive Product Landing Page" +sidebar_label: "Project 1" +sidebar_position: 1 +description: "Build a production-ready, mobile-first responsive landing page integrating modern CSS Grid, Flexbox, fluid typography, and dynamic CSS custom properties." +tags: + - CSS + - Responsive Design + - Flexbox + - CSS Grid + - Projects + - CodeHarborHub +--- + +In this hands-on project, you will consolidate your layout, typography, and responsive design skills by building a complete **Responsive Product Landing Page**. + +You will structure the page using semantic HTML5 elements and style it with mobile-first CSS breakpoints, fluid typography scaling using `clamp()`, and reusable CSS custom properties. + +## Technical Specifications & Requirements + +Before diving into the implementation, review the core engineering requirements for this project: + +1. **Mobile-First Responsive Layout:** + * Single-column layout by default for mobile viewports. + * Flexbox navigation header that transitions to a full bar layout on desktop screens. + * Multi-column CSS Grid layout for feature cards triggered via modern Range Syntax media queries (`@media (width >= 768px)`). + +2. **Fluid Typography & Tokens:** + * Centralized CSS Custom Properties defined on `:root` for colors, spacing, and font stacks. + * Dynamic heading sizes scaled seamlessly using `clamp(1.75rem, 5vw, 3rem)` to eliminate abrupt text resizing across breakpoints. + +3. **Interactive Components:** + * Reusable BEM-styled button variants (`.btn--primary`, `.btn--outline`, `.btn--lg`). + * Feature cards equipped with subtle transform animations (`translateY`) and smooth focus/hover transitions. + +## Interactive Project Implementation + +Test and inspect the live production solution below. You can toggle between HTML and CSS tabs to see how the layout rules and custom property tokens work together. + + + + +
+ + +
+ + +
+

Build Faster Layouts

+

A modern development framework leveraging fluid design, container components, and atomic custom utility structures.

+
+ + +
+
+ + +
+
+
⚡
+

Fluid Type

+

Typography scaling rules using native clamp rules instead of excessive breakdown items.

+
+
+
🎨
+

Theme Layers

+

Dynamic design scoping engine driven strictly through customized global variables.

+
+
+
📦
+

BEM Layout

+

Maintainable structural scopes optimized for predictable application styles.

+
+
+`} + defaultCss={`/* 1. Root Variables Setup */ +:root { + --bg-main: #0f172a; + --bg-card: #1e293b; + --text-primary: #ffffff; + --text-muted: #94a3b8; + --border: #334155; + --accent: #2563eb; + --accent-hover: #1d4ed8; + --radius: 8px; +} + +/* 2. Page Reset & Base Styles */ +.landing-page { +background-color: var(--bg-main); +color: var(--text-primary); +padding: 1.5rem; +font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +border-radius: var(--radius); +box-sizing: border-box; +} + +/* 3. Header Component */ +.header { +display: flex; +justify-content: space-between; +align-items: center; +padding-bottom: 1.5rem; +border-bottom: 1px solid var(--border); +} + +.header__logo { +font-weight: 800; +font-size: 1.25rem; +color: #38bdf8; +letter-spacing: -0.02em; +} + +.header__nav { +display: flex; +align-items: center; +gap: 1rem; +} + +.header__nav a { +color: var(--text-muted); +text-decoration: none; +font-size: 0.9rem; +transition: color 0.2s ease; +} + +.header__nav a:hover { +color: var(--text-primary); +} + +/* 4. Hero Section & Fluid Typography */ +.hero { +text-align: center; +padding: 3.5rem 1rem; +max-width: 800px; +margin: 0 auto; +} + +.hero__title { +font-size: clamp(1.75rem, 5vw, 3rem); +font-weight: 800; +line-height: 1.2; +margin-bottom: 1rem; +background: linear-gradient(135deg, #38bdf8, #818cf8); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +} + +.hero__subtitle { +font-size: clamp(0.95rem, 2vw, 1.2rem); +color: var(--text-muted); +margin-bottom: 2rem; +line-height: 1.6; +} + +.hero__actions { +display: flex; +justify-content: center; +gap: 1rem; +flex-wrap: wrap; +} + +/* 5. Button System */ +.btn { +padding: 0.6rem 1.2rem; +border-radius: 6px; +font-weight: 600; +border: none; +cursor: pointer; +transition: all 0.2s ease; +} + +.btn--primary { +background-color: var(--accent); +color: #ffffff; +} + +.btn--primary:hover { +background-color: var(--accent-hover); +} + +.btn--outline { +background-color: transparent; +color: var(--text-primary); +border: 1px solid var(--border); +} + +.btn--outline:hover { +background-color: var(--bg-card); +} + +.btn--lg { +padding: 0.8rem 1.6rem; +font-size: 1rem; +} + +/* 6. Feature Grid (Mobile-First Single Column) */ +.features { +display: grid; +grid-template-columns: 1fr; +gap: 1.5rem; +margin-top: 2rem; +} + +.feature-card { +background-color: var(--bg-card); +padding: 1.5rem; +border-radius: var(--radius); +border: 1px solid var(--border); +transition: transform 0.3s ease, border-color 0.3s ease; +} + +.feature-card:hover { +transform: translateY(-4px); +border-color: #38bdf8; +} + +.feature-card__icon { +font-size: 2rem; +margin-bottom: 0.75rem; +} + +.feature-card h3 { +margin: 0 0 0.5rem 0; +color: #38bdf8; +} + +.feature-card p { +margin: 0; +color: var(--text-muted); +font-size: 0.9rem; +line-height: 1.5; +} + +/* 7. Media Queries (Desktop Viewport Expansion) */ +@media (width >= 768px) { +.features { +grid-template-columns: repeat(3, 1fr); +} +}`} + height="480px" +/> + +## Code Breakdown & Architectural Insights + +### 1. Fluid Typography Scaling + +Instead of writing multiple `@media` rules to change `font-size` for small, medium, and large screens, we use the `clamp()` function: + +```css +.hero__title { + font-size: clamp(1.75rem, 5vw, 3rem); +} + +``` + +* **Minimum Limit (`1.75rem`):** Ensures the title never becomes unreadably small on mobile devices. +* **Preferred Value (`5vw`):** Scales smoothly relative to 5% of the viewport width. +* **Maximum Limit (`3rem`):** Prevents text from becoming oversized on ultra-wide desktop monitors. + +### 2. Modern Range Media Queries + +Notice the updated media query syntax used in the CSS implementation: + +```css +/* Modern Range Media Query */ +@media (width >= 768px) { + .features { + grid-template-columns: repeat(3, 1fr); + } +} + +``` + +This replacing the traditional syntax (`@media (min-width: 768px)`) provides cleaner reading and aligns directly with mathematical logical comparisons. + +## Key Takeaways + +* Mobile-first architecture ensures faster initial rendering and simpler layout overrides. +* CSS Custom Properties (`var(--name)`) provide a single source of truth for color and spacing themes. +* Combining Flexbox for 1D alignments (header and buttons) with CSS Grid for 2D layouts (features grid) creates robust, maintenance-friendly web pages. \ No newline at end of file diff --git a/courses/css/module-6-practical-projects/project-2-interactive-dashboard.md b/courses/css/module-6-practical-projects/project-2-interactive-dashboard.md new file mode 100644 index 000000000..9a1ae33e9 --- /dev/null +++ b/courses/css/module-6-practical-projects/project-2-interactive-dashboard.md @@ -0,0 +1,385 @@ +--- +id: project-2-interactive-dashboard +title: "Responsive Interactive Analytics Dashboard" +sidebar_label: "Project 2" +sidebar_position: 2 +description: "Build a complex, multi-pane analytics dashboard using CSS Grid layouts, auto-fit/minmax strategies, sidebar toggles, data visualization cards, and CSS custom property theme tokens." +tags: + - CSS + - Responsive Design + - CSS Grid + - Flexbox + - Dashboard + - Projects + - CodeHarborHub +--- + +In this project, you will move beyond single-page marketing layouts and build a multi-pane **Responsive Interactive Analytics Dashboard**. + +You will master advanced 2D layouts using CSS Grid `grid-template-areas`, dynamic auto-fitting cards, state-driven sidebar collapse patterns, and CSS variables for dark/light UI tokens. + +## Technical Specifications & Requirements + +Review the core technical constraints and architectural requirements for the analytics dashboard layout: + +1. **Grid-Based Main Shell:** + * Multi-zone structural layout managed via `grid-template-areas` for header, sidebar, main content, and footer region. + * Responsive collapse behavior that shifts from a desktop multi-pane layout to a single-column layout on smaller screens. + +2. **Auto-Responsive Data Cards:** + * Dynamic metric cards auto-fit using `grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))` without requiring individual media query breakpoints. + +3. **Data Visualization Components:** + * CSS-only progress bars, stat change indicator badges (positive/negative indicators), and structured data table styling. + * Styled scrollable data panel with custom scrollbar styling (`::-webkit-scrollbar`). + +## Interactive Project Implementation + +Inspect and test the complete production code for the analytics dashboard below: + + + +
+
+ 📊 AdminSuite +
+
+ Pro Account +
AD
+
+
+ + + + + +
+ +
+
+ Total Revenue + $7,440.00 +
+
+
+ Active Licenses + 1,204 +
+
+
+ + +
+

Recent Transactions

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDCustomerStatusAmount
#TR-1082TechCorp IncCompleted$2,400.00
#TR-1083DevStudio LLCPending$1,150.00
#TR-1084Apex SystemsCompleted$3,890.00
+
+
+
+`} + defaultCss={`/* 1. Root Variable Configuration */ +:root { + --db-bg: #0f172a; + --db-surface: #1e293b; + --db-surface-hover: #334155; + --db-border: #334155; + --db-text: #ffffff; + --db-muted: #94a3b8; + --db-primary: #2563eb; + --db-success: #10b981; + --db-warning: #f59e0b; + --db-danger: #ef4444; +} + +/* 2. Grid Shell Layout Setup */ +.dashboard { + display: grid; + grid-template-areas: + "header" + "sidebar" + "main"; + grid-template-columns: 1fr; + min-height: 480px; + background-color: var(--db-bg); + color: var(--db-text); + font-family: system-ui, -apple-system, sans-serif; + border-radius: 8px; + overflow: hidden; +} + +/* Desktop Grid Shell Layout */ +@media (width >= 768px) { + .dashboard { + grid-template-areas: + "header header" + "sidebar main"; + grid-template-columns: 220px 1fr; + grid-template-rows: auto 1fr; + } +} + +/* 3. Header Styling */ +.db-header { + grid-area: header; + background-color: var(--db-surface); + border-bottom: 1px solid var(--db-border); + padding: 0.75rem 1.25rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.db-header__brand { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.1rem; +} + +.db-header__user { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.user-badge { + font-size: 0.75rem; + background-color: var(--db-border); + padding: 0.2rem 0.5rem; + border-radius: 4px; + color: var(--db-muted); +} + +.user-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background-color: var(--db-primary); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + font-weight: 700; +} + +/* 4. Sidebar Styling */ +.db-sidebar { + grid-area: sidebar; + background-color: var(--db-surface); + border-right: 1px solid var(--db-border); + padding: 1rem 0.5rem; +} + +.db-menu { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.db-menu__item { + color: var(--db-muted); + text-decoration: none; + padding: 0.6rem 0.8rem; + border-radius: 6px; + font-size: 0.9rem; + transition: all 0.2s ease; +} + +.db-menu__item:hover, +.db-menu__item--active { + background-color: var(--db-surface-hover); + color: var(--db-text); +} + +.db-menu__item--active { + border-left: 3px solid var(--db-primary); +} + +/* 5. Main Workspace & Auto-Fitting Grid */ +.db-main { + grid-area: main; + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.metrics-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1rem; +} + +.stat-card { + background-color: var(--db-surface); + border: 1px solid var(--db-border); + border-radius: 8px; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.stat-card__label { + font-size: 0.8rem; + color: var(--db-muted); +} + +.stat-card__value { + font-size: 1.5rem; + font-weight: 700; +} + +/* 6. Badges & Visual Widgets */ +.badge { + font-size: 0.75rem; + padding: 0.2rem 0.5rem; + border-radius: 4px; + width: fit-content; +} + +.badge--success { + background-color: rgba(16, 185, 129, 0.15); + color: var(--db-success); +} + +.badge--danger { + background-color: rgba(239, 68, 68, 0.15); + color: var(--db-danger); +} + +.badge--pending { + background-color: rgba(245, 158, 11, 0.15); + color: var(--db-warning); +} + +.progress-bar { + height: 6px; + background-color: var(--db-border); + border-radius: 3px; + overflow: hidden; +} + +.progress-bar__fill { + height: 100%; + background-color: var(--db-primary); +} + +/* 7. Data Table Section */ +.content-panel { + background-color: var(--db-surface); + border: 1px solid var(--db-border); + border-radius: 8px; + padding: 1rem; +} + +.panel-title { + margin: 0 0 1rem 0; + font-size: 1rem; +} + +.table-container { + overflow-x: auto; +} + +.data-table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 0.85rem; +} + +.data-table th, +.data-table td { + padding: 0.6rem 0.8rem; + border-bottom: 1px solid var(--db-border); +} + +.data-table th { + color: var(--db-muted); + font-weight: 600; +} +`} + height="500px" +/> + +## Technical Architectural Insights + +### 1. Multi-Area Layout Mechanics + +The core grid shell leverages `grid-template-areas` to clearly separate placement layout semantics from structure: + +```css +.dashboard { + display: grid; + grid-template-areas: + "header header" + "sidebar main"; + grid-template-columns: 220px 1fr; + grid-template-rows: auto 1fr; +} + +``` + +* **Header Span:** Occupies `header header`, effortlessly spanning the top bar across both the sidebar and content column. +* **Flexible Column Sizing:** The fixed sidebar size (`220px`) combined with `1fr` ensures content fills the remainder without horizontal scroll. + +### 2. Auto-Fit Cards via `minmax()` + +The metric cards automatically rearrange based on available container width: + +```css +.metrics-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); +} + +``` + +* **`auto-fit`:** Automatically calculates how many cards fit into the row container. +* **`minmax(180px, 1fr)`:** Guarantees each card will shrink down to `180px` before wrapping, but expands up to consume available fraction space equally. + +--- + +## Key Takeaways + +* CSS Grid Areas (`grid-template-areas`) reduce media query complexity when reorganizing full Application Shell topologies. +* Dynamic auto-fit grids (`repeat(auto-fit, minmax(...))`) eliminate manual breakpoint calculations for component lists. +* Encapsulating status styles via color variables and alpha overlays creates flexible, maintenance-friendly design themes. \ No newline at end of file diff --git a/courses/css/module-6-practical-projects/project-3-design-system-components.md b/courses/css/module-6-practical-projects/project-3-design-system-components.md new file mode 100644 index 000000000..2b8c13992 --- /dev/null +++ b/courses/css/module-6-practical-projects/project-3-design-system-components.md @@ -0,0 +1,380 @@ +--- +id: project-3-design-system-components +title: "Project 3: Modular Design System Component Library" +sidebar_label: "Project 3" +sidebar_position: 3 +description: Build a production-ready, modular CSS component library featuring design tokens, dark mode variants, interactive UI patterns, and accessibility primitives. +tags: + - CSS + - Design Systems + - Design Tokens + - BEM Architecture + - Projects + - CodeHarborHub +--- + +In this hands-on project, you will build a scalable, production-grade **Design System Component Library**. + +You will structure reusable CSS design primitives—including action controls, data display components, form controls, and feedback indicators—using Design Tokens, dynamic theme switching via `:has()`, and standard BEM syntax. + +## Technical Specifications & Requirements + +Review the core architectural and structural specifications for building this component library: + +1. **Token-Driven Architecture:** + * Global design tokens defined via `:root` CSS custom properties for spacing scale, color palettes, typography, and elevation shadows. + * Scoped component tokens for fine-grained component override flexibility. + +2. **Component Primitives Suite:** + * **Buttons:** Multi-variant support (`primary`, `secondary`, `ghost`, `danger`) and state triggers (`:hover`, `:active`, `:focus-visible`). + * **Cards:** Flexible structure featuring header, content body, and action footer zones. + * **Forms:** Custom styled inputs, labels, and validation focus state treatments. + * **Badges & Tags:** Semantic color indicators (`success`, `warning`, `info`, `danger`). + +3. **Modern CSS Features & Accessibility:** + * Modern state-driven theme switching using `:has()` selectors. + * Clear `:focus-visible` outline rings for keyboard navigation compliance. + +## Interactive Project Implementation + +Inspect and test the modular component library system below: + + + +
+

Design System Primitives

+ +
+ + +
+
Buttons (.ch-btn)
+
+ + + + + +
+
+ + +
+
Status Badges (.ch-badge)
+
+ Information + Success + Warning State + Critical Error +
+
+ + +
+
Form Layouts
+
+ + + Your system notifications map to this address. +
+
+ + +
+
Composite Components
+
+
+

System Status Card

+ Active +
+
+

All pipeline runners are performing normally. No latency flags have been raised in the past 24 hours.

+
+
+ + +
+
+
+`} + defaultCss={`/* 1. Global System Tokens & Fallbacks */ +:root { + --ch-color-bg: #ffffff; + --ch-color-surface: #f8fafc; + --ch-color-border: #e2e8f0; + --ch-color-text-main: #0f172a; + --ch-color-text-muted: #64748b; + + --ch-color-primary: #2563eb; + --ch-color-primary-hover: #1d4ed8; + --ch-color-secondary: #475569; + --ch-color-secondary-hover: #334155; + --ch-color-danger: #dc2626; + --ch-color-danger-hover: #b91c1c; + + --ch-color-info-bg: #dbeafe; + --ch-color-info-text: #1e40af; + --ch-color-success-bg: #dcfce7; + --ch-color-success-text: #166534; + --ch-color-warning-bg: #fef3c7; + --ch-color-warning-text: #92400e; + --ch-color-danger-bg: #fee2e2; + --ch-color-danger-text: #991b1b; + + --ch-radius-sm: 4px; + --ch-radius-md: 8px; + --ch-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --ch-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --ch-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.4); +} + +/* Dynamic Dark Mode Override using Modern :has() Selector */ +:has(#theme-switch:checked) { + --ch-color-bg: #0f172a; + --ch-color-surface: #1e293b; + --ch-color-border: #334155; + --ch-color-text-main: #f8fafc; + --ch-color-text-muted: #94a3b8; + + --ch-color-info-bg: rgba(30, 64, 175, 0.3); + --ch-color-info-text: #93c5fd; + --ch-color-success-bg: rgba(22, 101, 52, 0.3); + --ch-color-success-text: #86efac; + --ch-color-warning-bg: rgba(146, 64, 14, 0.3); + --ch-color-warning-text: #fde047; + --ch-color-danger-bg: rgba(153, 27, 27, 0.3); + --ch-color-danger-text: #fca5a5; +} + +/* 2. Base Container Layout */ +.ds-library { + background-color: var(--ch-color-bg); + color: var(--ch-color-text-main); + padding: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; + border-radius: var(--ch-radius-md); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.ds-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--ch-color-border); + padding-bottom: 1rem; + margin-bottom: 1.5rem; +} + +.ds-header h2 { margin: 0; font-size: 1.25rem; } + +.ds-theme-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; + cursor: pointer; +} + +.ds-section { + margin-bottom: 1.5rem; +} + +.ds-section__title { + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--ch-color-text-muted); + margin-bottom: 0.75rem; +} + +.ds-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; +} + +/* 3. Button Primitive (.ch-btn) */ +.ch-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 600; + border-radius: var(--ch-radius-sm); + border: 1px solid transparent; + cursor: pointer; + transition: all 0.2s ease; +} + +.ch-btn:focus-visible { + outline: none; + box-shadow: var(--ch-focus-ring); +} + +.ch-btn--primary { + background-color: var(--ch-color-primary); + color: #ffffff; +} +.ch-btn--primary:hover:not(:disabled) { + background-color: var(--ch-color-primary-hover); +} + +.ch-btn--secondary { + background-color: var(--ch-color-secondary); + color: #ffffff; +} +.ch-btn--secondary:hover:not(:disabled) { + background-color: var(--ch-color-secondary-hover); +} + +.ch-btn--ghost { + background-color: transparent; + color: var(--ch-color-text-main); + border-color: var(--ch-color-border); +} +.ch-btn--ghost:hover:not(:disabled) { + background-color: var(--ch-color-surface); +} + +.ch-btn--danger { + background-color: var(--ch-color-danger); + color: #ffffff; +} +.ch-btn--danger:hover:not(:disabled) { + background-color: var(--ch-color-danger-hover); +} + +.ch-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* 4. Badges Primitive (.ch-badge) */ +.ch-badge { + display: inline-block; + padding: 0.2rem 0.55rem; + font-size: 0.75rem; + font-weight: 600; + border-radius: 9999px; +} + +.ch-badge--info { background-color: var(--ch-color-info-bg); color: var(--ch-color-info-text); } +.ch-badge--success { background-color: var(--ch-color-success-bg); color: var(--ch-color-success-text); } +.ch-badge--warning { background-color: var(--ch-color-warning-bg); color: var(--ch-color-warning-text); } +.ch-badge--danger { background-color: var(--ch-color-danger-bg); color: var(--ch-color-danger-text); } + +/* 5. Form Controls (.ch-input, .ch-label) */ +.ds-form-group { + display: flex; + flex-direction: column; + gap: 0.35rem; + max-width: 360px; +} + +.ch-label { + font-size: 0.85rem; + font-weight: 600; +} + +.ch-input { + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + background-color: var(--ch-color-surface); + color: var(--ch-color-text-main); + border: 1px solid var(--ch-color-border); + border-radius: var(--ch-radius-sm); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.ch-input:focus { + outline: none; + border-color: var(--ch-color-primary); + box-shadow: var(--ch-focus-ring); +} + +.ch-helper-text { + font-size: 0.75rem; + color: var(--ch-color-text-muted); +} + +/* 6. Card Component (.ch-card) */ +.ch-card { + background-color: var(--ch-color-surface); + border: 1px solid var(--ch-color-border); + border-radius: var(--ch-radius-md); + padding: 1.25rem; + box-shadow: var(--ch-shadow-sm); +} + +.ch-card__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; +} + +.ch-card__title { + margin: 0; + font-size: 1rem; +} + +.ch-card__body p { + margin: 0 0 1rem 0; + font-size: 0.875rem; + color: var(--ch-color-text-muted); + line-height: 1.5; +} + +.ch-card__footer { + display: flex; + justify-content: flex-end; + gap: 0.5rem; +}`} + height="520px" +/> + +## Technical Architectural Insights + +### 1. Zero-JS Dark Mode via `:has()` + +Instead of adding JavaScript to toggle class names, we leverage the native CSS parent selector `:has()`: + +```css +:has(#theme-switch:checked) { + --ch-color-bg: #0f172a; + --ch-color-surface: #1e293b; + --ch-color-border: #334155; + --ch-color-text-main: #f8fafc; +} + +``` + +When the user checks `#theme-switch`, `:has()` detects the change and dynamically updates the root CSS tokens. + +### 2. Accessible Focus Management + +Accessibility is built directly into every interactive component primitive using `:focus-visible`: + +```css +.ch-btn:focus-visible { + outline: none; + box-shadow: var(--ch-focus-ring); +} + +``` + +* **`:focus-visible`:** Prevents unsightly blue focus outlines for mouse clicks while ensuring high-contrast focus rings display for keyboard users pressing Tab. + +--- + +## Key Takeaways + +* Design tokens store baseline design values in custom properties, enabling effortless global updates. +* BEM naming conventions (`.block__element--modifier`) keep class names clear and prevent cascading selector conflicts. +* Combining accessibility triggers like `:focus-visible` with state selectors like `:has()` produces accessible, interactive UI components using pure CSS. \ No newline at end of file