Skip to content

Commit 6e839d5

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #127 from codeharborhub/dev-1
added utilities code
2 parents f8b74ca + a090d19 commit 6e839d5

File tree

4 files changed

+584
-4
lines changed

4 files changed

+584
-4
lines changed

‎docs/css/utilities/icons.mdx‎

Lines changed: 220 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,220 @@
1-
<ComingSoon />
1+
---
2+
title: "Icon Styling with Utility Classes"
3+
description: "Learn how to manage the size, color, and alignment of icons (SVG, Font Icons, and Emojis) using utility-first CSS principles."
4+
keywords: [CSS icons, SVG styling, Font Awesome utilities, icon sizing, icon color, alignment, utility classes]
5+
tags: [CSS icons, SVG styling, Font Awesome utilities, icon sizing, icon color, alignment, utility classes]
6+
sidebar_label: Icons
7+
---
8+
9+
Icons are essential for navigation, user feedback, and enhancing the visual language of an application. Regardless of the type of icon you use—whether it's an SVG, a font library icon, or even an emoji—utility classes provide a consistent way to control their appearance.
10+
11+
The primary styling concerns for icons are:
12+
13+
1. **Size:** Ensuring they are legible but not oversized.
14+
2. **Color:** Matching them to the current design context.
15+
3. **Alignment:** Positioning them correctly next to text.
16+
17+
<AdsComponent />
18+
<br />
19+
20+
## 1. Icon Types and Implementation
21+
22+
There are three common ways to include icons in your project, each with a slightly different styling approach.
23+
24+
### A. Icon Font Libraries (e.g., Font Awesome)
25+
26+
These libraries use specific classes on an element (usually `<i>` or `<span>`) to display an icon glyph.
27+
28+
* **Styling:** Controlled entirely by font properties (e.g., `font-size` for size, `color` for color).
29+
30+
```html title="index.html"
31+
<!-- Example: Font Awesome Icon -->
32+
<i class="fa-solid fa-cloud text-xl text-blue-500"></i>
33+
```
34+
35+
### B. Inline SVG
36+
37+
SVG (Scalable Vector Graphics) is the modern standard. It is inserted directly into the HTML markup.
38+
39+
* **Styling:** Controlled by size utilities and text utilities. The `currentColor` keyword is crucial here (see Section 2).
40+
41+
```html title="index.html"
42+
<!-- Example: Inline SVG -->
43+
<svg class="w-6 h-6 text-green-600">
44+
<path fill="currentColor" d="..."></path>
45+
</svg>
46+
```
47+
48+
### C. Emojis
49+
50+
Emojis are simple, accessible, and fast, treated as standard text characters.
51+
52+
* **Styling:** Controlled entirely by text properties.
53+
54+
```html title="index.html"
55+
<!-- Example: Emoji Icon -->
56+
<span class="text-3xl" role="img" aria-label="Rocket">🚀</span>
57+
```
58+
59+
<AdsComponent />
60+
<br />
61+
62+
## 2. Sizing Icons (`w-`, `h-`, `text-`)
63+
64+
The method for sizing depends on the icon type.
65+
66+
| Icon Type | Sizing Utility | Example |
67+
| :--- | :--- | :--- |
68+
| **Icon Fonts & Emojis** | `font-size` utilities (`text-sm`, `text-xl`) | `<i class="fa-solid fa-user text-2xl"></i>` |
69+
| **SVG** | `width` and `height` utilities (`w-`, `h-`) | `<svg class="w-5 h-5">...</svg>` |
70+
71+
:::tip Sizing SVGs
72+
Always use matching `w-{n}` and `h-{n}` utilities on SVGs (e.g., `w-6 h-6`) to ensure they are perfectly square and prevent distortion.
73+
:::
74+
75+
## 3. Coloring Icons (`text-` and `currentColor`)
76+
77+
Coloring icons, especially SVGs, is made simple by using the `text-{color}` utilities and the CSS keyword `currentColor`.
78+
79+
### A. `currentColor` for SVGs (Mandatory)
80+
81+
For an inline SVG to inherit its color from the CSS `color` property (which is controlled by the `text-{color}` utility), the SVG's `fill` or `stroke` attributes **must** be set to `currentColor`.
82+
83+
```html title="index.html"
84+
<!-- 1. The text-red-500 utility sets the CSS 'color' property. -->
85+
<!-- 2. The SVG path uses fill="currentColor" to inherit that CSS color. -->
86+
<svg class="w-8 h-8 text-red-500">
87+
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
88+
</svg>
89+
```
90+
91+
### B. Icon Fonts and Emojis
92+
93+
These simply respond to the `color` property set by the `text-{color}` utility.
94+
95+
```html title="index.html"
96+
<!-- Font icon color -->
97+
<i class="fa-solid fa-bell text-yellow-600 text-2xl"></i>
98+
```
99+
100+
<AdsComponent />
101+
<br />
102+
103+
## 4. Vertical Alignment
104+
105+
When an icon sits next to text (e.g., in a button or a menu item), ensuring the icon is perfectly centered vertically is crucial for a polished look.
106+
107+
The easiest way is to use Flexbox or the `align-middle` utility.
108+
109+
### A. Flexbox (Recommended)
110+
111+
Wrap the text and the icon in a container and use `flex` and `items-center`. This is the most reliable method.
112+
113+
```html title="index.html"
114+
<button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-indigo-600 text-white">
115+
<!-- Icon -->
116+
<svg class="w-5 h-5 fill-current">...</svg>
117+
<!-- Text -->
118+
<span>Submit Report</span>
119+
</button>
120+
```
121+
122+
### B. `align-middle` Utility
123+
124+
If you cannot use Flexbox, the `align-middle` utility on the icon can often solve minor vertical misalignment issues, though it is less precise than Flexbox.
125+
126+
```html title="index.html"
127+
<p>
128+
<svg class="w-4 h-4 text-green-500 align-middle">...</svg>
129+
Task Complete
130+
</p>
131+
```
132+
133+
<AdsComponent />
134+
<br />
135+
136+
## 5. Full Example: Styled Menu Items
137+
138+
This example demonstrates sizing, coloring, and aligning icons within menu items using the Flexbox approach.
139+
140+
<Tabs>
141+
<TabItem value="html" label="HTML/Tailwind Code">
142+
143+
```html
144+
<!DOCTYPE html>
145+
<html lang="en">
146+
<head>
147+
<meta charset="UTF-8">
148+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
149+
<title>Icon Styling Demo</title>
150+
<!-- Load Tailwind CSS -->
151+
<script src="https://cdn.tailwindcss.com"></script>
152+
<!-- Load Font Awesome (for the second menu item) -->
153+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLMDJc5fS7Wc/A2xGzS6W/D3YJ+G1I/r8Yf5h7qD5Z6P2R5I152J9145T5G109BqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
154+
<style>
155+
/* Custom font for aesthetics */
156+
body {
157+
font-family: "Inter", sans-serif;
158+
}
159+
/* Ensure the container stretches */
160+
.min-h-screen {
161+
min-height: 100vh;
162+
}
163+
</style>
164+
</head>
165+
<body class="bg-gray-50">
166+
167+
<div class="p-6 bg-gray-50 min-h-screen font-sans">
168+
169+
<h2 class="text-xl font-bold mb-4 text-gray-800">Application Menu</h2>
170+
171+
<div class="space-y-2 max-w-sm">
172+
173+
<!-- Menu Item 1: Using Inline SVG (Lucide-React's activity icon equivalent) -->
174+
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-white hover:bg-gray-100 transition duration-150 border border-gray-200 shadow-sm">
175+
176+
<!-- SVG Icon: w-5 h-5 sets size, text-blue-500 sets color. fill="currentColor" allows color inheritance. -->
177+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-blue-600 flex-shrink-0">
178+
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 6a.75.75 0 0 0-1.5 0v6.257l-3.328-3.328a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l4.5-4.5a.75.75 0 0 0-1.06-1.06l-3.328 3.328V6Z" clip-rule="evenodd" />
179+
</svg>
180+
181+
<span class="text-gray-800 font-medium">Analytics Dashboard</span>
182+
</a>
183+
184+
<!-- Menu Item 2: Using Icon Font (Font Awesome: fa-solid fa-circle-exclamation) -->
185+
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-white hover:bg-gray-100 transition duration-150 border border-gray-200 shadow-sm">
186+
187+
<!-- Font Icon: text-xl sets size, text-yellow-500 sets color -->
188+
<i class="fa-solid fa-circle-exclamation text-xl text-yellow-500 flex-shrink-0"></i>
189+
190+
<span class="text-gray-800">Pending Approvals</span>
191+
</a>
192+
193+
<!-- Menu Item 3: Using Emoji -->
194+
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-white hover:bg-gray-100 transition duration-150 border border-gray-200 shadow-sm">
195+
196+
<!-- Emoji: text-lg sets size, flex-shrink-0 prevents squash -->
197+
<span class="text-lg flex-shrink-0" role="img" aria-label="Settings">⚙️</span>
198+
199+
<span class="text-gray-800">System Settings</span>
200+
</a>
201+
202+
</div>
203+
</div>
204+
205+
</body>
206+
</html>
207+
```
208+
209+
</TabItem>
210+
<TabItem value="live" label="Codepen Live Demo">
211+
212+
<CodePenEmbed
213+
title="Interactive Icon Styling Demo"
214+
penId="RNaYbgq"
215+
/>
216+
217+
</TabItem>
218+
</Tabs>
219+
220+
In this example, each menu item uses a different icon type, all styled consistently with Tailwind CSS utility classes for size, color, and alignment. You can easily swap out icons or adjust their styles by modifying the utility classes.

‎docs/css/utilities/images.mdx‎

Lines changed: 127 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,127 @@
1-
<ComingSoon />
1+
---
2+
title: "Image Styling and Optimization"
3+
description: "Use utility classes to control image dimensions, responsiveness, aspect ratios, fit behavior, and decorative effects like rounded corners and shadows."
4+
keywords: [CSS images, Tailwind images, image responsiveness, aspect ratio, object-fit, image optimization, rounded corners, object-position]
5+
tags: [CSS images, Tailwind images, image responsiveness, aspect ratio, object-fit, image optimization, rounded corners, object-position]
6+
sidebar_label: Images
7+
---
8+
9+
Images are critical components of any webpage, but they pose challenges related to responsiveness, performance, and layout. Utility classes simplify the process of making images look great and behave predictably across all devices.
10+
11+
This guide focuses on controlling image size, shape, and behavior using utility-first CSS principles.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Controlling Image Size and Responsiveness
17+
18+
The most important aspect of image styling is ensuring they adapt to their container without stretching the layout.
19+
20+
### A. Fluid Width (`w-full`)
21+
22+
To make an image fully responsive, always ensure its width is fluid and its height is auto-calculated to maintain the aspect ratio.
23+
24+
```html title="index.html"
25+
<div class="max-w-md">
26+
<!-- Image takes up 100% of its parent's width, but never its original size -->
27+
<img src="..." alt="Responsive image" class="w-full h-auto rounded-lg shadow-xl">
28+
</div>
29+
```
30+
31+
### B. Fixed Dimensions vs. Constraints
32+
33+
While `w-full` is the standard, sometimes you need to enforce maximum or minimum sizes.
34+
35+
| Utility | Description | Example |
36+
| :--- | :--- | :--- |
37+
| `max-w-xs` | Limits the maximum width (e.g., $20rem$) | `max-w-sm` |
38+
| `h-48` | Fixed height (e.g., $12rem$) | `w-48 h-48` |
39+
| `object-cover` | Essential for fixed-size containers (see Section 3). | `object-cover` |
40+
41+
<AdsComponent />
42+
<br />
43+
44+
## 2. Aspect Ratios
45+
46+
Managing the space an image occupies *before* it loads is vital to prevent **Cumulative Layout Shift (CLS)**. The modern way to handle this is using `aspect-ratio` utilities.
47+
48+
These utilities set the height relative to the width, guaranteeing the container's shape.
49+
50+
| Utility | Ratio | Calculation |
51+
| :--- | :--- | :--- |
52+
| `aspect-square` | $1:1$ | `aspect-ratio: 1 / 1;` |
53+
| `aspect-video` | $16:9$ | `aspect-ratio: 16 / 9;` |
54+
| `aspect-4/3` | $4:3$ | `aspect-ratio: 4 / 3;` |
55+
56+
```html title="index.html"
57+
<!-- The container size is fixed to a 4:3 ratio, preventing layout jumps -->
58+
<div class="w-full max-w-lg aspect-4/3 bg-gray-200 rounded-lg overflow-hidden">
59+
<img src="..." alt="4:3 photo" class="w-full h-full object-cover">
60+
</div>
61+
```
62+
63+
## 3. Controlling Image Fit (`object-fit`)
64+
65+
When an image is placed in a container with a fixed aspect ratio or fixed dimensions, the `object-fit` property determines how the image content fills the space.
66+
67+
### A. `object-cover` (Crop and Fill)
68+
69+
The image fills the entire container, potentially cropping off parts of the image to maintain its aspect ratio. **This is the most common and generally desired behavior for thumbnails and banners.**
70+
71+
### B. `object-contain` (Shrink and Show All)
72+
73+
The image is scaled down to fit entirely inside the container without cropping. Empty space (letterboxing) may appear on the sides.
74+
75+
### C. `object-fill` (Stretch)
76+
77+
The image is stretched to completely fill the container, regardless of its original aspect ratio. This can lead to distorted images.
78+
79+
### Example
80+
81+
```html title="index.html"
82+
<div class="w-64 h-64 border-2 border-dashed border-gray-400 p-2">
83+
<h4 class="text-sm font-semibold mb-1">Object Cover:</h4>
84+
<!-- Fills the 64x64 box, cropping the top/bottom or sides -->
85+
<img src="https://placehold.co/600x400/007AFF/ffffff?text=Image+Source"
86+
alt="Object cover example"
87+
class="w-full h-full object-cover rounded-md">
88+
</div>
89+
90+
<div class="w-64 h-64 border-2 border-dashed border-gray-400 p-2 mt-4">
91+
<h4 class="text-sm font-semibold mb-1">Object Contain:</h4>
92+
<!-- Fits entirely inside the box, showing white space on the sides -->
93+
<img src="https://placehold.co/600x400/007AFF/ffffff?text=Image+Source"
94+
alt="Object contain example"
95+
class="w-full h-full object-contain rounded-md">
96+
</div>
97+
```
98+
99+
<AdsComponent />
100+
<br />
101+
102+
## 4. Decorative Styling
103+
104+
Utility classes make applying visual polish simple and consistent.
105+
106+
| Utility | Property | Use Case |
107+
| :--- | :--- | :--- |
108+
| `rounded-full` | `border-radius: 9999px;` | Perfect circles for avatars/logos. |
109+
| `shadow-xl` | `box-shadow` | Adding depth and lifting the image off the page. |
110+
| `opacity-50` | `opacity` | Creating faded or watermark effects. |
111+
| `grayscale` | `filter: grayscale(100%);` | Converting to black and white. |
112+
113+
```html title="index.html"
114+
<!-- Circular Avatar with Shadow -->
115+
<img src="https://placehold.co/150x150/007AFF/ffffff?text=Avatar"
116+
alt="User Avatar"
117+
class="w-24 h-24 rounded-full object-cover shadow-lg hover:shadow-xl transition">
118+
```
119+
120+
## 5. Full Example: Image Gallery
121+
122+
This example shows a responsive grid of images using aspect ratios, object-fit, and decorative effects.
123+
124+
<CodePenEmbed
125+
title="Interactive Image Gallery Demo"
126+
penId="pvyOzjv"
127+
/>

0 commit comments

Comments
 (0)