added new css docs

blog/2025-01-21/ui-ux-web-design-principle.md

@@ -0,0 +1,154 @@
+---
+title: "UI/UX Design Principles"
+sidebar_label: "UI/UX Design"
+authors: [ajay-dhangar]
+tags: [ui-ux, web design, user experience, user interface]
+date: 2025-01-21
+---
+
+Web design is all about creating intuitive, delightful, and meaningful user experiences. In this guide, we'll dive into the key principles, easy-to-understand concepts, and practical steps to help you build user-friendly and visually stunning designs.
+
+<!-- truncate -->
+
+## Why UI/UX Matters?
+UI (User Interface) is how something looks, and UX (User Experience) is how it works. When combined, they create designs that:
+- Solve problems.
+- Are easy to use.
+- Keep users engaged.
+
+![UI vs UX](./assets/ui-vs-ux-explained.png)
+
+
+## Core Principles of UI/UX Design
+
+### 1. Focus on the User
+Always design with your audience in mind. Ask yourself:
+- Who are the users?
+- What are their goals?
+- How can you make their experience seamless?
+
+:::tip
+Create user personas and map their journeys for better understanding.
+:::
+
+```mermaid
+graph TD
+    A[User Persona] -->|Demographics| B[Age, Gender, Location]
+    A -->|Behavior| C[Habits, Preferences]
+    A -->|Goals| D[What they want to achieve]
+    A -->|Pain Points| E[Challenges they face]
+```
+
+### 2. Consistency is Key
+Use similar elements throughout your design to avoid confusion. For example:
+- Stick to a specific button style.
+- Use the same font for headings and body text.
+
+
+### 3. Visual Hierarchy
+Guide your users by organizing elements logically:
+- Use larger fonts for headings.
+- Highlight call-to-action buttons with bright colors.
+
+```mermaid
+graph TB
+    A[Header: Largest Font] --> B[Subheading: Medium Font]
+    B --> C[Body Text: Smallest Font]
+    A --> D[CTA Button: Highlighted]
+```
+
+### 4. Keep it Simple
+Avoid clutter and distractions. Every element should have a purpose.
+- Use whitespace to give your design breathing room.
+- Limit choices to reduce decision fatigue.
+
+
+## Layouts Made Easy
+
+### What is a Layout?
+A layout organizes content visually. Common sections include:
+- **Header**: Logo, navigation.
+- **Main Area**: Primary content.
+- **Footer**: Links, contact info.
+
+
+
+### Using Grid Systems
+Grids help align elements perfectly. Most designers use a 12-column grid for flexibility.
+
+<!-- ![Grid Example](https://via.placeholder.com/800x400.png?text=Grid+Layout+Example) -->
+
+
+### From Wireframe to Prototype
+Design starts with simple sketches (wireframes) and evolves into interactive prototypes:
+1. **Wireframe**: Basic layout.
+2. **Prototype**: Add colors, images, and interactivity.
+
+<!-- ![Wireframe to Prototype](https://via.placeholder.com/800x400.png?text=Wireframe+to+Prototype) -->
+
+```mermaid
+graph TD
+    A[Wireframe] --> B[Prototype]
+    B --> C[Design]
+    C --> D[Development]
+```
+
+
+## Colors in Web Design
+
+### **How Colors Affect Users**
+- **Blue**: Trust and calmness.
+- **Red**: Energy and urgency.
+- **Green**: Nature and health.
+
+<!-- ![Color Psychology](https://via.placeholder.com/800x400.png?text=Color+Psychology) -->
+
+### Creating a Color Palette
+Use tools like [Coolors](https://coolors.co) to generate harmonized palettes.
+
+
+## Typography Basics
+
+### Font Pairing Made Simple
+Combine a decorative font with a readable one:
+- **Example**: Playfair Display (fancy) + Roboto (clean).
+
+<!-- ![Font Pairing Example](https://via.placeholder.com/800x400.png?text=Font+Pairing) -->
+
+```mermaid
+graph TD
+    A[Playfair Display] -->|Heading| B[Roboto]
+    A -->|Subheading| C[Roboto]
+    A -->|Body Text| D[Roboto]
+```
+
+### Readable Text Sizes
+- **Titles**: 24-32px.
+- **Body Text**: 16px.
+- **Buttons**: 14-18px.
+
+
+## Practical Design Tips
+
+### 1. Use Fitts's Law
+Make buttons large and easy to click, especially on mobile.
+
+### 2. Apply Gestalt Principles
+- **Proximity**: Group related items together.
+- **Similarity**: Use consistent styles for similar actions.
+
+<!-- ![Gestalt Principles](https://via.placeholder.com/800x400.png?text=Gestalt+Principles) -->
+
+```mermaid
+graph TD
+    A[Proximity] -->|Grouping| B[Related Items]
+    C[Similarity] -->|Consistent Styles| D[Similar Actions]
+```
+
+### 3. Optimize for Accessibility
+- Ensure text has enough contrast against its background.
+- Add alt text to images for screen readers.
+
+
+## Conclusion
+UI/UX design is about creating meaningful interactions and beautiful designs that cater to users. With these principles and practices, you're well on your way to crafting exceptional web experiences. Remember, the secret is empathy and constant iteration.

docs/css/selectors/combinator-selectors/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Combinator Selectors",
+    "position": 3,
+    "link": {
+      "type": "generated-index",
+      "description": "In this section, you will learn about the combinator selectors in CSS. Combinator selectors are used to combine multiple selectors to create complex rules. There are four types of combinator selectors in CSS: descendant, child, adjacent sibling, and general sibling."
+    }
+  }

docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md

@@ -0,0 +1,101 @@
+---
+id: adjacent-sibling-selector
+title: Adjacent Sibling Selector
+sidebar_label: Adjacent Sibling Selector
+position: 3
+tags: [selector, combinator, adjacent-sibling]
+description: Adjacent sibling selector is used to select an element that is immediately preceded by another element.
+keywords:
+  [
+    adjacent sibling selector,
+    css adjacent sibling selector,
+    css selector,
+    css combinator,
+    css adjacent sibling combinator,
+  ]
+---
+
+In CSS, the adjacent sibling selector is used to select an element that is immediately preceded by another element. The adjacent sibling selector is represented by the `+` character between two selectors.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the adjacent sibling selector is as follows:
+
+```css title="index.css"
+selector1 + selector2 {
+  /* CSS properties */
+}
+```
+
+- `selector1`: The first sibling element.
+- `selector2`: The second sibling element.
+- `CSS properties`: The CSS properties to be applied to the second sibling element.
+- `+`: The `+` character represents the adjacent sibling selector.
+
+## Example
+
+In the following example, the adjacent sibling selector is used to select all `<p>` elements that are immediately preceded by an `<h2>` element:
+
+```css title="index.css"
+h2 + p {
+  font-weight: bold;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `font-weight: bold` property to the text inside the `<p>` element because it is immediately preceded by an `<h2>` element.
+
+```html title="index.html"
+<h2>Heading</h2>
+<p>This text will be bold.</p>
+```
+
+The adjacent sibling selector can be used to target specific elements that are adjacent to each other in the HTML structure.
+
+:::tip Key Points to Remember
+
+- The adjacent sibling selector is represented by the `+` character between two selectors.
+- The adjacent sibling selector selects an element that is immediately preceded by another element.
+- The adjacent sibling selector is more specific than the general sibling selector (`~`) and less specific than the child combinator (`>`).
+- The adjacent sibling selector is also known as the next-sibling combinator.
+- The adjacent sibling selector is useful when you want to target elements that are adjacent to each other in the HTML structure.
+
+:::
+
+<AdsComponent />
+
+## Example: Using Adjacent Sibling Selector
+
+Let's consider an example where we want to style the text inside a paragraph (`<p>`) element that is immediately preceded by a heading (`<h2>`) element. We can achieve this using the adjacent sibling selector as shown below:
+
+<Tabs>
+ <TabItem value="HTML" lable="index.html">
+    ```html showLineNumbers
+<h2>Heading</h2>
+<p>This text will be bold.</p>
+    ```
+ </TabItem>
+ <TabItem value="CSS" lable="index.css">
+    ```css showLineNumbers
+h2 + p {
+    font-weight: bold;
+    }
+        ```
+     </TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#f9f9f9", color: "#000" }}>
+<div>
+<h2>Heading</h2>
+<p style={{ fontWeight: "bold" }}>This text will be bold.</p>
+</div>
+</BrowserWindow>
+
+In the above example, the CSS rule will apply the `font-weight: bold` property to the text inside the `<p>` element because it is immediately preceded by an `<h2>` element.
+
+## Conclusion
+
+The adjacent sibling selector is a useful CSS selector that allows you to target elements that are immediately preceded by another element. By using the adjacent sibling selector, you can apply specific styles to elements that are adjacent to each other in the HTML structure. This selector is handy when you want to style elements based on their relationship with other elements in the document.