peasy-css 0.1.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- peasy_css-0.1.0/PKG-INFO +495 -0
- peasy_css-0.1.0/README.md +452 -0
- peasy_css-0.1.0/pyproject.toml +96 -0
- peasy_css-0.1.0/src/peasy_css/__init__.py +118 -0
- peasy_css-0.1.0/src/peasy_css/__main__.py +5 -0
- peasy_css-0.1.0/src/peasy_css/api.py +52 -0
- peasy_css-0.1.0/src/peasy_css/cli.py +142 -0
- peasy_css-0.1.0/src/peasy_css/engine.py +526 -0
- peasy_css-0.1.0/src/peasy_css/mcp_server.py +147 -0
- peasy_css-0.1.0/src/peasy_css/py.typed +0 -0
- peasy_css-0.1.0/tests/test_engine.py +331 -0
- peasy_css-0.1.0/uv.lock +1137 -0
peasy_css-0.1.0/PKG-INFO
ADDED
|
@@ -0,0 +1,495 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: peasy-css
|
|
3
|
+
Version: 0.1.0
|
|
4
|
+
Summary: Python CSS toolkit — generate gradients, shadows, borders, flexbox, grid, animations, transforms, and 7 more CSS utilities. Zero dependencies.
|
|
5
|
+
Project-URL: Homepage, https://peasycss.com
|
|
6
|
+
Project-URL: CSS Gradient Generator, https://peasycss.com/tools/gradient-generator/
|
|
7
|
+
Project-URL: Box Shadow Generator, https://peasycss.com/tools/box-shadow-generator/
|
|
8
|
+
Project-URL: Flexbox Generator, https://peasycss.com/tools/flexbox-generator/
|
|
9
|
+
Project-URL: Documentation, https://peasycss.com/developers/
|
|
10
|
+
Project-URL: Repository, https://github.com/peasytools/peasy-css
|
|
11
|
+
Project-URL: Issues, https://github.com/peasytools/peasy-css/issues
|
|
12
|
+
Project-URL: Changelog, https://github.com/peasytools/peasy-css/releases
|
|
13
|
+
Author: Peasy Tools
|
|
14
|
+
License-Expression: MIT
|
|
15
|
+
Keywords: animation,border-radius,box-shadow,css,css-filter,css-generator,css-toolkit,css-tools,flexbox,gradient,grid,media-query,responsive,transform,typography
|
|
16
|
+
Classifier: Development Status :: 4 - Beta
|
|
17
|
+
Classifier: Environment :: Console
|
|
18
|
+
Classifier: Intended Audience :: Developers
|
|
19
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
20
|
+
Classifier: Programming Language :: Python :: 3
|
|
21
|
+
Classifier: Programming Language :: Python :: 3.10
|
|
22
|
+
Classifier: Programming Language :: Python :: 3.11
|
|
23
|
+
Classifier: Programming Language :: Python :: 3.12
|
|
24
|
+
Classifier: Programming Language :: Python :: 3.13
|
|
25
|
+
Classifier: Programming Language :: Python :: 3.14
|
|
26
|
+
Classifier: Topic :: Internet :: WWW/HTTP
|
|
27
|
+
Classifier: Topic :: Software Development :: Libraries :: Python Modules
|
|
28
|
+
Classifier: Typing :: Typed
|
|
29
|
+
Requires-Python: >=3.10
|
|
30
|
+
Provides-Extra: all
|
|
31
|
+
Requires-Dist: httpx>=0.27; extra == 'all'
|
|
32
|
+
Requires-Dist: mcp>=1.0; extra == 'all'
|
|
33
|
+
Requires-Dist: rich>=13.0; extra == 'all'
|
|
34
|
+
Requires-Dist: typer>=0.15; extra == 'all'
|
|
35
|
+
Provides-Extra: api
|
|
36
|
+
Requires-Dist: httpx>=0.27; extra == 'api'
|
|
37
|
+
Provides-Extra: cli
|
|
38
|
+
Requires-Dist: rich>=13.0; extra == 'cli'
|
|
39
|
+
Requires-Dist: typer>=0.15; extra == 'cli'
|
|
40
|
+
Provides-Extra: mcp
|
|
41
|
+
Requires-Dist: mcp>=1.0; extra == 'mcp'
|
|
42
|
+
Description-Content-Type: text/markdown
|
|
43
|
+
|
|
44
|
+
# peasy-css
|
|
45
|
+
|
|
46
|
+
[](https://pypi.org/project/peasy-css/)
|
|
47
|
+
[](https://pypi.org/project/peasy-css/)
|
|
48
|
+
[](https://opensource.org/licenses/MIT)
|
|
49
|
+
[](https://pypi.org/project/peasy-css/)
|
|
50
|
+
|
|
51
|
+
Pure Python CSS generator — gradients, shadows, flexbox, grid, animations, transforms, filters, glassmorphism, and more. Zero dependencies, type-safe, with CLI, MCP server, and REST API client.
|
|
52
|
+
|
|
53
|
+
Built from [PeasyCSS](https://peasycss.com), the interactive CSS tools platform with 200+ generators and references.
|
|
54
|
+
|
|
55
|
+
> **Try the interactive tools at [peasycss.com](https://peasycss.com)** — [Gradient Generator](https://peasycss.com/tools/gradient/), [Box Shadow](https://peasycss.com/tools/box-shadow/), [Flexbox](https://peasycss.com/tools/flexbox/), [Grid](https://peasycss.com/tools/grid/), [Glassmorphism](https://peasycss.com/tools/glassmorphism/)
|
|
56
|
+
|
|
57
|
+
## Table of Contents
|
|
58
|
+
|
|
59
|
+
- [Install](#install)
|
|
60
|
+
- [Quick Start](#quick-start)
|
|
61
|
+
- [What You Can Do](#what-you-can-do)
|
|
62
|
+
- [Gradients](#gradients)
|
|
63
|
+
- [Box Shadows](#box-shadows)
|
|
64
|
+
- [Flexbox Layouts](#flexbox-layouts)
|
|
65
|
+
- [CSS Grid](#css-grid)
|
|
66
|
+
- [Animations & Keyframes](#animations--keyframes)
|
|
67
|
+
- [Transforms](#transforms)
|
|
68
|
+
- [CSS Filters](#css-filters)
|
|
69
|
+
- [Glassmorphism](#glassmorphism)
|
|
70
|
+
- [Fluid Typography](#fluid-typography)
|
|
71
|
+
- [Media Queries](#media-queries)
|
|
72
|
+
- [Command-Line Interface](#command-line-interface)
|
|
73
|
+
- [MCP Server (Claude, Cursor, Windsurf)](#mcp-server-claude-cursor-windsurf)
|
|
74
|
+
- [REST API Client](#rest-api-client)
|
|
75
|
+
- [API Reference](#api-reference)
|
|
76
|
+
- [Learn More About CSS](#learn-more-about-css)
|
|
77
|
+
- [Peasy Developer Tools](#peasy-developer-tools)
|
|
78
|
+
- [License](#license)
|
|
79
|
+
|
|
80
|
+
## Install
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
# Core library (zero dependencies)
|
|
84
|
+
pip install peasy-css
|
|
85
|
+
|
|
86
|
+
# With CLI
|
|
87
|
+
pip install "peasy-css[cli]"
|
|
88
|
+
|
|
89
|
+
# With MCP server for AI assistants
|
|
90
|
+
pip install "peasy-css[mcp]"
|
|
91
|
+
|
|
92
|
+
# With REST API client
|
|
93
|
+
pip install "peasy-css[api]"
|
|
94
|
+
|
|
95
|
+
# Everything
|
|
96
|
+
pip install "peasy-css[all]"
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Quick Start
|
|
100
|
+
|
|
101
|
+
```python
|
|
102
|
+
from peasy_css import gradient, box_shadow, Shadow, flexbox, glassmorphism
|
|
103
|
+
|
|
104
|
+
# Generate a linear gradient
|
|
105
|
+
css = gradient(["#ff6b35", "#f7c948", "#2ec4b6"])
|
|
106
|
+
# → "linear-gradient(to right, #ff6b35, #f7c948, #2ec4b6)"
|
|
107
|
+
|
|
108
|
+
# Create a box shadow
|
|
109
|
+
shadow = Shadow(x="0px", y="4px", blur="12px", color="rgba(0,0,0,0.15)")
|
|
110
|
+
css = box_shadow(shadow)
|
|
111
|
+
# → "0px 4px 12px 0px rgba(0,0,0,0.15)"
|
|
112
|
+
|
|
113
|
+
# Flexbox layout
|
|
114
|
+
css = flexbox(direction="row", justify="center", align="center", gap="1rem")
|
|
115
|
+
# → "display: flex;\nflex-direction: row;\njustify-content: center;\nalign-items: center;\ngap: 1rem;"
|
|
116
|
+
|
|
117
|
+
# Glassmorphism effect
|
|
118
|
+
css = glassmorphism(blur="20px", background="rgba(255,255,255,0.1)")
|
|
119
|
+
# → backdrop-filter, background, border — frosted glass effect
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## What You Can Do
|
|
123
|
+
|
|
124
|
+
### Gradients
|
|
125
|
+
|
|
126
|
+
CSS gradients create smooth color transitions — linear (directional), radial (circular), and conic (angular). The `gradient()` function supports all three types with optional repeating patterns and precise color stops.
|
|
127
|
+
|
|
128
|
+
| Type | CSS Function | Use Case |
|
|
129
|
+
|------|-------------|----------|
|
|
130
|
+
| Linear | `linear-gradient()` | Backgrounds, buttons, headers |
|
|
131
|
+
| Radial | `radial-gradient()` | Spotlight effects, circular highlights |
|
|
132
|
+
| Conic | `conic-gradient()` | Pie charts, color wheels |
|
|
133
|
+
| Repeating | `repeating-*-gradient()` | Striped patterns, progress bars |
|
|
134
|
+
|
|
135
|
+
```python
|
|
136
|
+
from peasy_css import gradient, gradient_css, ColorStop
|
|
137
|
+
|
|
138
|
+
# Linear gradient with direction
|
|
139
|
+
gradient(["#e66465", "#9198e5"], direction="to bottom")
|
|
140
|
+
# → "linear-gradient(to bottom, #e66465, #9198e5)"
|
|
141
|
+
|
|
142
|
+
# Radial gradient
|
|
143
|
+
gradient(["#fff", "#000"], gradient_type="radial")
|
|
144
|
+
# → "radial-gradient(circle, #fff, #000)"
|
|
145
|
+
|
|
146
|
+
# Precise color stops
|
|
147
|
+
stops = [ColorStop("red", "0%"), ColorStop("yellow", "50%"), ColorStop("green", "100%")]
|
|
148
|
+
gradient(stops)
|
|
149
|
+
# → "linear-gradient(to right, red 0%, yellow 50%, green 100%)"
|
|
150
|
+
|
|
151
|
+
# Complete CSS rule
|
|
152
|
+
gradient_css(".hero", ["#667eea", "#764ba2"])
|
|
153
|
+
# → ".hero {\n background: linear-gradient(to right, #667eea, #764ba2);\n}"
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Learn more: [Gradient Generator](https://peasycss.com/tools/gradient/) · [CSS Gradients Guide](https://peasycss.com/glossary/gradient/)
|
|
157
|
+
|
|
158
|
+
### Box Shadows
|
|
159
|
+
|
|
160
|
+
Box shadows add depth and elevation to elements. Multiple shadows can be layered for complex effects like material design elevation or neumorphism.
|
|
161
|
+
|
|
162
|
+
```python
|
|
163
|
+
from peasy_css import box_shadow, box_shadow_css, Shadow
|
|
164
|
+
|
|
165
|
+
# Single shadow
|
|
166
|
+
s = Shadow(x="0px", y="4px", blur="6px", spread="0px", color="rgba(0,0,0,0.1)")
|
|
167
|
+
box_shadow(s)
|
|
168
|
+
# → "0px 4px 6px 0px rgba(0,0,0,0.1)"
|
|
169
|
+
|
|
170
|
+
# Inset shadow (inner shadow)
|
|
171
|
+
s = Shadow(x="0px", y="2px", blur="4px", color="rgba(0,0,0,0.2)", inset=True)
|
|
172
|
+
box_shadow(s)
|
|
173
|
+
# → "inset 0px 2px 4px 0px rgba(0,0,0,0.2)"
|
|
174
|
+
|
|
175
|
+
# Multiple layered shadows
|
|
176
|
+
s1 = Shadow(y="2px", blur="4px", color="rgba(0,0,0,0.1)")
|
|
177
|
+
s2 = Shadow(y="8px", blur="16px", color="rgba(0,0,0,0.1)")
|
|
178
|
+
box_shadow(s1, s2)
|
|
179
|
+
# → "0px 2px 4px 0px rgba(0,0,0,0.1), 0px 8px 16px 0px rgba(0,0,0,0.1)"
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Learn more: [Box Shadow Generator](https://peasycss.com/tools/box-shadow/) · [CSS Shadows Guide](https://peasycss.com/glossary/box-shadow/)
|
|
183
|
+
|
|
184
|
+
### Flexbox Layouts
|
|
185
|
+
|
|
186
|
+
Flexbox is a one-dimensional layout model for distributing space and aligning items. It handles both horizontal (row) and vertical (column) layouts with powerful alignment controls.
|
|
187
|
+
|
|
188
|
+
| Property | Values | Default |
|
|
189
|
+
|----------|--------|---------|
|
|
190
|
+
| `direction` | row, row-reverse, column, column-reverse | row |
|
|
191
|
+
| `wrap` | nowrap, wrap, wrap-reverse | nowrap |
|
|
192
|
+
| `justify` | flex-start, flex-end, center, space-between, space-around, space-evenly | flex-start |
|
|
193
|
+
| `align` | stretch, flex-start, flex-end, center, baseline | stretch |
|
|
194
|
+
|
|
195
|
+
```python
|
|
196
|
+
from peasy_css import flexbox, flexbox_css
|
|
197
|
+
|
|
198
|
+
# Centered content
|
|
199
|
+
flexbox(justify="center", align="center")
|
|
200
|
+
|
|
201
|
+
# Responsive card layout
|
|
202
|
+
flexbox(wrap="wrap", gap="1.5rem", justify="space-between")
|
|
203
|
+
|
|
204
|
+
# Complete CSS rule
|
|
205
|
+
flexbox_css(".navbar", direction="row", justify="space-between", align="center")
|
|
206
|
+
# → ".navbar {\n display: flex;\n flex-direction: row;\n ..."
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
Learn more: [Flexbox Generator](https://peasycss.com/tools/flexbox/) · [Flexbox Guide](https://peasycss.com/glossary/flexbox/)
|
|
210
|
+
|
|
211
|
+
### CSS Grid
|
|
212
|
+
|
|
213
|
+
CSS Grid is a two-dimensional layout system for rows and columns simultaneously. It excels at complex page layouts, card grids, and dashboard designs.
|
|
214
|
+
|
|
215
|
+
```python
|
|
216
|
+
from peasy_css import grid, grid_css, GridTemplate
|
|
217
|
+
|
|
218
|
+
# Default 3-column grid
|
|
219
|
+
grid()
|
|
220
|
+
# → "display: grid;\ngrid-template-columns: 1fr 1fr 1fr;\ngap: 1rem;"
|
|
221
|
+
|
|
222
|
+
# Custom grid template
|
|
223
|
+
t = GridTemplate(columns="repeat(4, 1fr)", rows="auto 1fr auto", gap="2rem")
|
|
224
|
+
grid(t)
|
|
225
|
+
|
|
226
|
+
# Dense auto-flow (fill gaps automatically)
|
|
227
|
+
t = GridTemplate(columns="repeat(auto-fill, minmax(250px, 1fr))", auto_flow="dense")
|
|
228
|
+
grid(t)
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
Learn more: [Grid Generator](https://peasycss.com/tools/grid/) · [CSS Grid Guide](https://peasycss.com/glossary/grid/)
|
|
232
|
+
|
|
233
|
+
### Animations & Keyframes
|
|
234
|
+
|
|
235
|
+
CSS animations bring elements to life with multi-step transitions. The `animation()` function generates the shorthand property, while `keyframes()` creates `@keyframes` rules.
|
|
236
|
+
|
|
237
|
+
```python
|
|
238
|
+
from peasy_css import animation, animation_css, keyframes, Keyframe
|
|
239
|
+
|
|
240
|
+
# Animation shorthand
|
|
241
|
+
animation("fadeIn", "0.5s", "ease-in")
|
|
242
|
+
# → "fadeIn 0.5s ease-in 0s 1 normal none"
|
|
243
|
+
|
|
244
|
+
# Keyframes definition
|
|
245
|
+
frames = [
|
|
246
|
+
Keyframe("from", {"opacity": "0", "transform": "translateY(-20px)"}),
|
|
247
|
+
Keyframe("to", {"opacity": "1", "transform": "translateY(0)"}),
|
|
248
|
+
]
|
|
249
|
+
keyframes("fadeIn", frames)
|
|
250
|
+
# → "@keyframes fadeIn {\n from { opacity: 0; transform: translateY(-20px); }\n to { ... }\n}"
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
Learn more: [Animation Generator](https://peasycss.com/tools/animation/) · [CSS Animation Guide](https://peasycss.com/glossary/animation/)
|
|
254
|
+
|
|
255
|
+
### Transforms
|
|
256
|
+
|
|
257
|
+
CSS transforms modify the visual rendering of elements — translate, rotate, scale, and skew without affecting document flow.
|
|
258
|
+
|
|
259
|
+
```python
|
|
260
|
+
from peasy_css import transform, transform_css
|
|
261
|
+
|
|
262
|
+
# Single transform
|
|
263
|
+
transform(rotate="45deg")
|
|
264
|
+
# → "rotate(45deg)"
|
|
265
|
+
|
|
266
|
+
# Combined transforms
|
|
267
|
+
transform(translate_x="10px", translate_y="20px", rotate="45deg", scale_x="1.5")
|
|
268
|
+
# → "translate(10px, 20px) rotate(45deg) scale(1.5, 1)"
|
|
269
|
+
|
|
270
|
+
# No transforms applied
|
|
271
|
+
transform()
|
|
272
|
+
# → "none"
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
Learn more: [Transform Generator](https://peasycss.com/tools/transform/) · [CSS Transform Guide](https://peasycss.com/glossary/transform/)
|
|
276
|
+
|
|
277
|
+
### CSS Filters
|
|
278
|
+
|
|
279
|
+
CSS filters apply graphical effects like blur, brightness, contrast, and grayscale to elements — commonly used for image effects and hover states.
|
|
280
|
+
|
|
281
|
+
```python
|
|
282
|
+
from peasy_css import css_filter, filter_css
|
|
283
|
+
|
|
284
|
+
# Single filter
|
|
285
|
+
css_filter(blur="5px")
|
|
286
|
+
# → "blur(5px)"
|
|
287
|
+
|
|
288
|
+
# Multiple filters
|
|
289
|
+
css_filter(blur="2px", brightness="120%", grayscale="50%")
|
|
290
|
+
# → "blur(2px) brightness(120%) grayscale(50%)"
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
Learn more: [Filter Generator](https://peasycss.com/tools/filter/) · [CSS Filter Guide](https://peasycss.com/glossary/filter/)
|
|
294
|
+
|
|
295
|
+
### Glassmorphism
|
|
296
|
+
|
|
297
|
+
Glassmorphism creates a frosted glass effect using backdrop-filter, semi-transparent backgrounds, and subtle borders. It's widely used in modern UI design (iOS, Windows 11).
|
|
298
|
+
|
|
299
|
+
```python
|
|
300
|
+
from peasy_css import glassmorphism, glassmorphism_css
|
|
301
|
+
|
|
302
|
+
# Default glassmorphism
|
|
303
|
+
glassmorphism()
|
|
304
|
+
# → "backdrop-filter: blur(10px);\n-webkit-backdrop-filter: blur(10px);\nbackground: rgba(255, 255, 255, 0.25);\nborder: 1px solid rgba(255, 255, 255, 0.18);"
|
|
305
|
+
|
|
306
|
+
# Custom glass effect
|
|
307
|
+
glassmorphism(blur="20px", background="rgba(0, 0, 0, 0.3)")
|
|
308
|
+
|
|
309
|
+
# Complete CSS rule
|
|
310
|
+
glassmorphism_css(".modal", blur="15px")
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
Learn more: [Glassmorphism Generator](https://peasycss.com/tools/glassmorphism/) · [Glassmorphism Guide](https://peasycss.com/glossary/glassmorphism/)
|
|
314
|
+
|
|
315
|
+
### Fluid Typography
|
|
316
|
+
|
|
317
|
+
CSS `clamp()` enables fluid typography that scales smoothly between viewport sizes — replacing complex media query breakpoints with a single declaration.
|
|
318
|
+
|
|
319
|
+
```python
|
|
320
|
+
from peasy_css import clamp, clamp_font_css
|
|
321
|
+
|
|
322
|
+
# Fluid value
|
|
323
|
+
clamp("1rem", "2.5vw", "3rem")
|
|
324
|
+
# → "clamp(1rem, 2.5vw, 3rem)"
|
|
325
|
+
|
|
326
|
+
# Fluid font-size CSS rule
|
|
327
|
+
clamp_font_css("h1", "1.5rem", "4vw", "3rem")
|
|
328
|
+
# → "h1 {\n font-size: clamp(1.5rem, 4vw, 3rem);\n}"
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
Learn more: [Clamp Calculator](https://peasycss.com/tools/clamp/) · [CSS Clamp Guide](https://peasycss.com/glossary/clamp/)
|
|
332
|
+
|
|
333
|
+
### Media Queries
|
|
334
|
+
|
|
335
|
+
Media queries enable responsive design by applying CSS rules at specific viewport breakpoints.
|
|
336
|
+
|
|
337
|
+
```python
|
|
338
|
+
from peasy_css import media_query
|
|
339
|
+
|
|
340
|
+
# Min-width (mobile-first)
|
|
341
|
+
media_query("768px", ".sidebar { display: block; }")
|
|
342
|
+
# → "@media (min-width: 768px) {\n .sidebar { display: block; }\n}"
|
|
343
|
+
|
|
344
|
+
# Max-width (desktop-first)
|
|
345
|
+
media_query("480px", "body { font-size: 14px; }", type="max-width")
|
|
346
|
+
# → "@media (max-width: 480px) {\n body { font-size: 14px; }\n}"
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
Learn more: [Media Query Guide](https://peasycss.com/glossary/media-query/)
|
|
350
|
+
|
|
351
|
+
## Command-Line Interface
|
|
352
|
+
|
|
353
|
+
```bash
|
|
354
|
+
# Generate a gradient
|
|
355
|
+
peasy-css gradient --colors "#ff6b35" "#f7c948" "#2ec4b6"
|
|
356
|
+
|
|
357
|
+
# Box shadow
|
|
358
|
+
peasy-css shadow --x 0px --y 4px --blur 12px --color "rgba(0,0,0,0.15)"
|
|
359
|
+
|
|
360
|
+
# Flexbox layout
|
|
361
|
+
peasy-css flexbox --direction row --justify center --align center --gap 1rem
|
|
362
|
+
|
|
363
|
+
# CSS Grid
|
|
364
|
+
peasy-css grid --columns "repeat(3, 1fr)" --gap 2rem
|
|
365
|
+
|
|
366
|
+
# Glassmorphism
|
|
367
|
+
peasy-css glass --blur 20px --background "rgba(255,255,255,0.1)"
|
|
368
|
+
|
|
369
|
+
# Fluid font size
|
|
370
|
+
peasy-css clamp --min 1rem --preferred 2.5vw --max 3rem
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
## MCP Server (Claude, Cursor, Windsurf)
|
|
374
|
+
|
|
375
|
+
Start the MCP server for AI-assisted CSS generation:
|
|
376
|
+
|
|
377
|
+
```bash
|
|
378
|
+
uvx --from "peasy-css[mcp]" python -m peasy_css
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
### Claude Desktop
|
|
382
|
+
|
|
383
|
+
```json
|
|
384
|
+
{
|
|
385
|
+
"mcpServers": {
|
|
386
|
+
"peasy-css": {
|
|
387
|
+
"command": "uvx",
|
|
388
|
+
"args": ["--from", "peasy-css[mcp]", "python", "-m", "peasy_css"]
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
### Cursor / Windsurf
|
|
395
|
+
|
|
396
|
+
```json
|
|
397
|
+
{
|
|
398
|
+
"mcpServers": {
|
|
399
|
+
"peasy-css": {
|
|
400
|
+
"command": "uvx",
|
|
401
|
+
"args": ["--from", "peasy-css[mcp]", "python", "-m", "peasy_css"]
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
```
|
|
406
|
+
|
|
407
|
+
**Available MCP tools:** `css_gradient`, `css_box_shadow`, `css_flexbox`, `css_grid`, `css_animation`, `css_transform`, `css_glassmorphism`, `css_clamp_font`, `css_media_query`
|
|
408
|
+
|
|
409
|
+
## REST API Client
|
|
410
|
+
|
|
411
|
+
```python
|
|
412
|
+
from peasy_css.api import PeasyCssAPI
|
|
413
|
+
|
|
414
|
+
api = PeasyCssAPI()
|
|
415
|
+
|
|
416
|
+
# List all CSS tools
|
|
417
|
+
tools = api.list_tools()
|
|
418
|
+
|
|
419
|
+
# Get a specific tool
|
|
420
|
+
tool = api.get_tool("gradient-generator")
|
|
421
|
+
|
|
422
|
+
# Search tools and glossary
|
|
423
|
+
results = api.search("flexbox")
|
|
424
|
+
|
|
425
|
+
# OpenAPI specification
|
|
426
|
+
spec = api.openapi_spec()
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
## API Reference
|
|
430
|
+
|
|
431
|
+
### CSS Generators
|
|
432
|
+
|
|
433
|
+
| Function | Description |
|
|
434
|
+
|----------|-------------|
|
|
435
|
+
| `gradient(colors, ...)` | Generate CSS gradient value |
|
|
436
|
+
| `gradient_css(selector, colors, ...)` | Complete gradient CSS rule |
|
|
437
|
+
| `box_shadow(*shadows)` | Generate box-shadow value |
|
|
438
|
+
| `box_shadow_css(selector, *shadows)` | Complete box-shadow CSS rule |
|
|
439
|
+
| `text_shadow(x, y, blur, color)` | Generate text-shadow value |
|
|
440
|
+
| `text_shadow_css(selector, ...)` | Complete text-shadow CSS rule |
|
|
441
|
+
| `border_radius(...)` | Generate border-radius value |
|
|
442
|
+
| `border_radius_css(selector, ...)` | Complete border-radius CSS rule |
|
|
443
|
+
| `flexbox(...)` | Generate flexbox properties |
|
|
444
|
+
| `flexbox_css(selector, ...)` | Complete flexbox CSS rule |
|
|
445
|
+
| `grid(template)` | Generate grid properties |
|
|
446
|
+
| `grid_css(selector, template)` | Complete grid CSS rule |
|
|
447
|
+
| `animation(name, duration, timing)` | Generate animation shorthand |
|
|
448
|
+
| `animation_css(selector, name, ...)` | Complete animation CSS rule |
|
|
449
|
+
| `keyframes(name, frames)` | Generate @keyframes rule |
|
|
450
|
+
| `transform(...)` | Generate transform value |
|
|
451
|
+
| `transform_css(selector, ...)` | Complete transform CSS rule |
|
|
452
|
+
| `css_filter(...)` | Generate filter value |
|
|
453
|
+
| `filter_css(selector, ...)` | Complete filter CSS rule |
|
|
454
|
+
| `transition(prop, duration, timing)` | Generate transition value |
|
|
455
|
+
| `transition_css(selector, ...)` | Complete transition CSS rule |
|
|
456
|
+
| `media_query(breakpoint, css, type)` | Wrap CSS in @media rule |
|
|
457
|
+
| `typography(...)` | Generate typography properties |
|
|
458
|
+
| `typography_css(selector, ...)` | Complete typography CSS rule |
|
|
459
|
+
| `aspect_ratio(ratio)` | Generate aspect-ratio value |
|
|
460
|
+
| `aspect_ratio_css(selector, ratio)` | Complete aspect-ratio CSS rule |
|
|
461
|
+
| `clamp(min, preferred, max)` | Generate clamp() value |
|
|
462
|
+
| `clamp_font_css(selector, ...)` | Complete fluid font-size CSS rule |
|
|
463
|
+
| `glassmorphism(...)` | Generate glassmorphism properties |
|
|
464
|
+
| `glassmorphism_css(selector, ...)` | Complete glassmorphism CSS rule |
|
|
465
|
+
|
|
466
|
+
### Types
|
|
467
|
+
|
|
468
|
+
| Type | Fields |
|
|
469
|
+
|------|--------|
|
|
470
|
+
| `ColorStop` | `color: str`, `position: str` |
|
|
471
|
+
| `Shadow` | `x`, `y`, `blur`, `spread`, `color`, `inset` |
|
|
472
|
+
| `GridTemplate` | `columns`, `rows`, `gap`, `auto_flow` |
|
|
473
|
+
| `Keyframe` | `selector: str`, `properties: dict[str, str]` |
|
|
474
|
+
|
|
475
|
+
## Learn More About CSS
|
|
476
|
+
|
|
477
|
+
- **Tools**: [Gradient Generator](https://peasycss.com/tools/gradient/) · [Box Shadow](https://peasycss.com/tools/box-shadow/) · [Flexbox](https://peasycss.com/tools/flexbox/) · [Grid](https://peasycss.com/tools/grid/)
|
|
478
|
+
- **Effects**: [Glassmorphism](https://peasycss.com/tools/glassmorphism/) · [Animation](https://peasycss.com/tools/animation/) · [Transform](https://peasycss.com/tools/transform/)
|
|
479
|
+
- **Reference**: [CSS Glossary](https://peasycss.com/glossary/) · [All CSS Tools](https://peasycss.com/tools/)
|
|
480
|
+
- **API**: [REST API Docs](https://peasycss.com/developers/) · [OpenAPI Spec](https://peasycss.com/api/openapi.json)
|
|
481
|
+
|
|
482
|
+
## Peasy Developer Tools
|
|
483
|
+
|
|
484
|
+
| Package | PyPI | Description |
|
|
485
|
+
|---------|------|-------------|
|
|
486
|
+
| peasytext | [PyPI](https://pypi.org/project/peasytext/) | Text analysis — readability, sentiment, keywords |
|
|
487
|
+
| peasy-pdf | [PyPI](https://pypi.org/project/peasy-pdf/) | PDF processing — extract, merge, split, metadata |
|
|
488
|
+
| peasy-image | [PyPI](https://pypi.org/project/peasy-image/) | Image ops — resize, crop, filter, watermark |
|
|
489
|
+
| **peasy-css** | [PyPI](https://pypi.org/project/peasy-css/) | **CSS generation — gradients, shadows, flexbox, grid** |
|
|
490
|
+
|
|
491
|
+
Part of the [Peasy](https://peasytools.com) developer tools ecosystem — [PeasyCSS](https://peasycss.com) · [PeasyText](https://peasytext.com) · [PeasyPDF](https://peasypdf.com) · [PeasyImage](https://peasyimage.com)
|
|
492
|
+
|
|
493
|
+
## License
|
|
494
|
+
|
|
495
|
+
MIT
|