cf-elements 1.0.0
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.
- package/README.md +104 -0
- package/cf-elements.js +4607 -0
- package/package.json +33 -0
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# cf-elements
|
|
2
|
+
|
|
3
|
+
Zero-dependency Web Components library that generates ClickFunnels compatible HTML with inline styles.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
### CDN (recommended)
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/cf-elements@latest/cf-elements.js"></script>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Or with a specific version:
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/cf-elements@1.0.0/cf-elements.js"></script>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### npm
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install cf-elements
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<!DOCTYPE html>
|
|
29
|
+
<html>
|
|
30
|
+
<head>
|
|
31
|
+
<script src="https://cdn.jsdelivr.net/npm/cf-elements@latest/cf-elements.js"></script>
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
<cf-page bg="#ffffff">
|
|
35
|
+
<cf-section pt="80px" pb="80px" bg="#0f172a">
|
|
36
|
+
<cf-row width="wide">
|
|
37
|
+
<cf-col span="12">
|
|
38
|
+
<cf-headline size="48px" color="#ffffff" align="center">
|
|
39
|
+
Hello World
|
|
40
|
+
</cf-headline>
|
|
41
|
+
</cf-col>
|
|
42
|
+
</cf-row>
|
|
43
|
+
</cf-section>
|
|
44
|
+
</cf-page>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Available Components
|
|
50
|
+
|
|
51
|
+
### Layout
|
|
52
|
+
- `<cf-page>` - Page container with background
|
|
53
|
+
- `<cf-section>` - Section with padding and background
|
|
54
|
+
- `<cf-row>` - Row container (narrow, medium, wide, full)
|
|
55
|
+
- `<cf-col>` - Column with span (1-12)
|
|
56
|
+
- `<cf-flex>` - Flexbox container
|
|
57
|
+
|
|
58
|
+
### Typography
|
|
59
|
+
- `<cf-headline>` - Main headlines (h1-h6)
|
|
60
|
+
- `<cf-subheadline>` - Subheadlines
|
|
61
|
+
- `<cf-paragraph>` - Body text
|
|
62
|
+
- `<cf-list>` - Bulleted/numbered lists
|
|
63
|
+
|
|
64
|
+
### Media
|
|
65
|
+
- `<cf-image>` - Images with sizing options
|
|
66
|
+
- `<cf-video>` - Video embeds
|
|
67
|
+
- `<cf-icon>` - FontAwesome icons
|
|
68
|
+
|
|
69
|
+
### Interactive
|
|
70
|
+
- `<cf-button>` - Buttons with actions
|
|
71
|
+
- `<cf-input>` - Form inputs
|
|
72
|
+
- `<cf-textarea>` - Text areas
|
|
73
|
+
- `<cf-select>` - Dropdowns
|
|
74
|
+
|
|
75
|
+
### Decorative
|
|
76
|
+
- `<cf-divider>` - Horizontal dividers
|
|
77
|
+
- `<cf-progress-bar>` - Progress indicators
|
|
78
|
+
- `<cf-countdown>` - Countdown timers
|
|
79
|
+
|
|
80
|
+
## ClickFunnels Compatibility
|
|
81
|
+
|
|
82
|
+
This library enforces ClickFunnels limitations:
|
|
83
|
+
|
|
84
|
+
- No margin-bottom (use `mt` for spacing)
|
|
85
|
+
- Unified horizontal padding (`px` not `pl`/`pr`)
|
|
86
|
+
- FontAwesome OLD format: `fas fa-check` not `fa-solid fa-check`
|
|
87
|
+
- Line heights as percentages: 100%, 110%, 120%, 140%, 160%, 180%
|
|
88
|
+
- Single shadow only (no multiple shadows)
|
|
89
|
+
|
|
90
|
+
## Output
|
|
91
|
+
|
|
92
|
+
Components render to clean HTML with `data-type` attributes for ClickFunnels conversion:
|
|
93
|
+
|
|
94
|
+
```html
|
|
95
|
+
<div data-type="FlexContainer" style="...">
|
|
96
|
+
<div data-type="Headline" style="...">
|
|
97
|
+
<h2>Hello World</h2>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## License
|
|
103
|
+
|
|
104
|
+
MIT
|