Add Frontend/UI/UX/Design section with shadcn/ui
- Create dedicated frontend-ui-ux-design directory - Add component libraries reference (shadcn/ui, Radix, MUI, etc.) - Add design systems reference (Material, Carbon, Polaris) - Add CSS frameworks reference (Tailwind, Bootstrap, CSS-in-JS) - Add frontend stacks reference (React, Vue, Next.js, Svelte) - Add UI experts reference (MiniMax, GLM design agents) - Update README with prominent Frontend section - Include shadcn/ui quick start guide - Add recommended 2026 tech stack
This commit is contained in:
uroma
284
frontend-ui-ux-design/css-frameworks/README.md
Normal file
284
frontend-ui-ux-design/css-frameworks/README.md
Normal file
@@ -0,0 +1,284 @@
|
||||
# CSS Frameworks Reference
|
||||
|
||||
Comprehensive guide to CSS frameworks, utilities, and styling approaches.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Utility-First Frameworks
|
||||
|
||||
### Tailwind CSS (Primary Recommendation)
|
||||
|
||||
**URL:** https://tailwindcss.com
|
||||
**Version:** 4.x (2025)
|
||||
**License:** MIT
|
||||
|
||||
#### Why Tailwind CSS
|
||||
- **Utility-First** - Build designs directly in markup
|
||||
- **No Runtime** - Purged CSS is tiny (~10KB)
|
||||
- **Highly Customizable** - Extend everything
|
||||
- **Dark Mode** - Built-in dark mode support
|
||||
- **Responsive** - Mobile-first breakpoints
|
||||
- **JIT Compiler** - On-demand style generation
|
||||
|
||||
#### Installation
|
||||
```bash
|
||||
npm install -D tailwindcss postcss autoprefixer
|
||||
npx tailwindcss init -p
|
||||
```
|
||||
|
||||
#### Configuration
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: '#3b82f6',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
#### Core Concepts
|
||||
|
||||
| Concept | Syntax | Example |
|
||||
|---------|--------|---------|
|
||||
| **Spacing** | `{property}-{size}` | `p-4`, `mt-8`, `mx-auto` |
|
||||
| **Colors** | `{property}-{color}-{shade}` | `bg-blue-500`, `text-gray-100` |
|
||||
| **Typography** | `text-{size}`, `font-{weight}` | `text-xl`, `font-bold` |
|
||||
| **Flexbox** | `flex`, `items-{align}`, `justify-{align}` | `flex items-center justify-between` |
|
||||
| **Grid** | `grid`, `grid-cols-{n}` | `grid grid-cols-3 gap-4` |
|
||||
| **Responsive** | `{breakpoint}:{class}` | `md:flex`, `lg:grid-cols-4` |
|
||||
| **States** | `{state}:{class}` | `hover:bg-blue-600`, `focus:ring-2` |
|
||||
| **Dark Mode** | `dark:{class}` | `dark:bg-gray-900` |
|
||||
|
||||
---
|
||||
|
||||
### Other Utility Frameworks
|
||||
|
||||
| Framework | URL | Description |
|
||||
|-----------|-----|-------------|
|
||||
| **UnoCSS** | https://unocss.dev | Instant on-demand CSS |
|
||||
| **Windi CSS** | https://windicss.org | Tailwind alternative (EOL) |
|
||||
| **Tachyons** | https://tachyons.io | Functional CSS |
|
||||
| **Atomic CSS** | https://acss.io | Atomized CSS |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Component-Based Frameworks
|
||||
|
||||
### Bootstrap
|
||||
|
||||
**URL:** https://getbootstrap.com
|
||||
**Version:** 5.x
|
||||
|
||||
```bash
|
||||
npm install bootstrap
|
||||
```
|
||||
|
||||
```html
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<div class="card">
|
||||
<div class="card-body">Content</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Foundation
|
||||
|
||||
**URL:** https://get.foundation
|
||||
**Version:** 6.x
|
||||
|
||||
```bash
|
||||
npm install foundation-sites
|
||||
```
|
||||
|
||||
### Bulma
|
||||
|
||||
**URL:** https://bulma.io
|
||||
|
||||
```bash
|
||||
npm install bulma
|
||||
```
|
||||
|
||||
```html
|
||||
<button class="button is-primary">Primary</button>
|
||||
<div class="box">Content</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 CSS-in-JS Libraries
|
||||
|
||||
### Styled Components
|
||||
|
||||
**URL:** https://styled-components.com
|
||||
|
||||
```bash
|
||||
npm install styled-components
|
||||
```
|
||||
|
||||
```javascript
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Button = styled.button`
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
### Emotion
|
||||
|
||||
**URL:** https://emotion.sh
|
||||
|
||||
```bash
|
||||
npm install @emotion/react @emotion/styled
|
||||
```
|
||||
|
||||
```javascript
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
const style = css`
|
||||
color: hotpink;
|
||||
`;
|
||||
|
||||
const Button = styled.button`
|
||||
background: #3b82f6;
|
||||
padding: 0.5rem 1rem;
|
||||
`;
|
||||
```
|
||||
|
||||
### Vanilla Extract
|
||||
|
||||
**URL:** https://vanilla-extract.style
|
||||
|
||||
```bash
|
||||
npm install @vanilla-extract/css
|
||||
```
|
||||
|
||||
```typescript
|
||||
// styles.css.ts
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const button = style({
|
||||
background: '#3b82f6',
|
||||
padding: '0.5rem 1rem',
|
||||
});
|
||||
```
|
||||
|
||||
### Stitches
|
||||
|
||||
**URL:** https://stitches.dev
|
||||
|
||||
```bash
|
||||
npm install @stitches/react
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌊 CSS Reset/Normalize
|
||||
|
||||
### Modern CSS Reset
|
||||
|
||||
```css
|
||||
/* Josh Comeau's reset */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
```
|
||||
|
||||
### Normalize.css
|
||||
|
||||
```bash
|
||||
npm install normalize.css
|
||||
```
|
||||
|
||||
### Preflight (Tailwind)
|
||||
|
||||
Built into Tailwind CSS - automatically normalizes styles.
|
||||
|
||||
---
|
||||
|
||||
## 📊 Comparison Table
|
||||
|
||||
| Framework | Approach | Bundle Size | Learning Curve | Customization |
|
||||
|-----------|----------|-------------|----------------|---------------|
|
||||
| **Tailwind** | Utility-first | ~10KB | Medium | Excellent |
|
||||
| **Bootstrap** | Component-based | ~150KB | Easy | Good |
|
||||
| **Styled** | CSS-in-JS | ~12KB | Medium | Excellent |
|
||||
| **Emotion** | CSS-in-JS | ~8KB | Medium | Excellent |
|
||||
| **CSS Modules** | Scoped CSS | 0 | Easy | Good |
|
||||
| **Vanilla Extract** | Zero-runtime | 0 | Medium | Excellent |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Selection Guide
|
||||
|
||||
### Choose Tailwind CSS when:
|
||||
- Want rapid prototyping
|
||||
- Prefer utility-first approach
|
||||
- Need small production bundle
|
||||
- Building with React/Vue/Next.js
|
||||
- Want dark mode out of box
|
||||
|
||||
### Choose CSS-in-JS when:
|
||||
- Building component library
|
||||
- Need dynamic styling
|
||||
- Want scoped styles
|
||||
- Using React ecosystem
|
||||
- Need theme switching
|
||||
|
||||
### Choose Bootstrap when:
|
||||
- Need quick start
|
||||
- Want pre-built components
|
||||
- Building traditional websites
|
||||
- Team is familiar with it
|
||||
|
||||
### Choose CSS Modules when:
|
||||
- Want scoped styles without JS
|
||||
- Building with Next.js (built-in)
|
||||
- Prefer standard CSS syntax
|
||||
- Don't need runtime theming
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Skills
|
||||
|
||||
- **ui-ux-pro-max** - Design guidelines
|
||||
- **component-libraries** - UI components
|
||||
- **zai-tooling-reference** - Tailwind + Next.js patterns
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2026-02-13*
|
||||
Reference in New Issue
Block a user