forked from primefaces/primeflex
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
217 lines (212 loc) · 12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
---
layout: layout
---
<div class="home-page">
<div class="hero">
<div class="grid grid-nogutter flex justify-content-between">
<div class="col-12 xl:col-6 flex justify-content-center align-items-center xl:align-items-start flex-column">
<div>
<h1 class="line-height-3 text-4xl">Perfect CSS Utility Companion</h1>
<p class="line-height-3 m-0">PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries
and static webpages as well.</p>
</div>
<div class="hero-npm flex align-items-center justify-content-between">
<span class="copied-text">Copied!</span>
<input readonly value="npm install primeflex"/>
<a type="button" id="copy-button" class="copy" onclick="PrimeFlex.copyText(event)">COPY</a>
</div>
<div class="hero-links py-5">
<a href="https://www.npmjs.com/package/primeflex" class="mr-5">Download</a>
<a href="https://www.github.com/primefaces/primeflex">GitHub</a>
</div>
</div>
<div class="col-12 xl:col-6 flex justify-content-center">
<img src="{{site.baseurl}}/assets/images/home/asset-hero.svg" alt="PrimeFlex Hero">
</div>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div class="text-center font-bold p-2 text-4xl mb-2">What is PrimeFlex</div>
<div class="sub-text text-center mb-5">PrimeFlex consists of various CSS utilities that can be combined with Prime UI libraries
to craft spectacular applications in no time.
</div>
<div class="feature-boxes grid-nogutter grid">
<div class="col-12 md:col-4 p-3">
<div class="feature-box utility text-center">
<div class="mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/utilityfirst.svg">
</div>
<div class="font-semibold mb-3">Utility First</div>
<div class="sub-text">Style classes for commonly used CSS properties</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box grid-system text-center">
<div class="mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/gridsystem.svg">
</div>
<div class="font-semibold mb-3">Grid System</div>
<div class="sub-text">Responsive grid system optimized for all screen sizes</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box flexbox text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/flexboxutilities.svg">
</div>
<div class="font-semibold mb-3">Flexbox Utilities</div>
<div class="sub-text">Responsive flexbox based utilities to place and align your content</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box spacing text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/spacing.svg">
</div>
<div class="font-semibold mb-3">Spacing</div>
<div class="sub-text">Apply paddings and margins with ease</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box elevation text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/elevation.svg">
</div>
<div class="font-semibold mb-3">Elevation</div>
<div class="sub-text">Built-in shadows to define elevation and importance</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box font text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/fontutilities.svg">
</div>
<div class="font-semibold mb-3">Font Utilities</div>
<div class="sub-text">Define font properties like size and styling</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box sizing text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/sizing.svg">
</div>
<div class="font-semibold mb-3">Sizing</div>
<div class="sub-text">Specify width and height of an element in responsive fashion</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box color text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/colorsystem.svg">
</div>
<div class="font-semibold mb-3">Color System</div>
<div class="sub-text">Integrated with the beautiful color palettes of Prime UI library themes</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box responsive text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/responsive.svg">
</div>
<div class="font-semibold mb-3">Responsive</div>
<div class="sub-text">Optimized for all screens including desktops, tables and phones</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box form text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/formlayout.svg">
</div>
<div class="font-semibold mb-3">Form Layout</div>
<div class="sub-text">Exclusive layout utilities to create aesthetic forms</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box icons text-center">
<div class=" mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/icons.svg">
</div>
<div class="font-semibold mb-3">Icons</div>
<div class="sub-text">Integration with PrimeIcons featuring over 200 icons</div>
</div>
</div>
<div class="col-12 md:col-4 p-3">
<div class="feature-box utility text-center">
<div class="mb-4 flex align-items-center justify-content-center">
<img src="assets/images/home/features/minimize.svg">
</div>
<div class="font-semibold mb-3">Optimized Size</div>
<div class="sub-text">Minimize the production size by removing unused CSS</div>
</div>
</div>
</div>
</div>
<div class="users mx-3 py-5 text-center">
<div class="font-bold p-2 text-4xl mb-2">Key Users</div>
<div class="sub-text mb-5">The creator of PrimeFlex is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG, PrimeReact and PrimeVue over the past years.</div>
<div class="user-boxes grid-nogutter grid">
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/fox.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/intel.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/ebay.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/ford.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/nvidia.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/sap.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/unicredit.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/airbus.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/verizon.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/lufthansa.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/amex.svg" alt="user">
</div>
</div>
<div class="col-6 md:col-4 lg:col-2 p-3">
<div class="flex align-items-center justify-content-center">
<img src="assets/images/home/users/viacom.svg" alt="user">
</div>
</div>
</div>
</div>
</div>
</div>