-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
294 lines (268 loc) · 60 KB
/
index.html
File metadata and controls
294 lines (268 loc) · 60 KB
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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!doctype html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta content=default name=apple-mobile-web-app-status-bar-style> <base href=/ > <link href=global.css rel=stylesheet> <link href=assets/apple-touch-icon.png rel=apple-touch-icon sizes=180x180> <link href=assets/favicon-32x32.png rel=icon sizes=32x32 type=image/png> <link href=assets/favicon-16x16.png rel=icon sizes=16x16 type=image/png> <link href=assets/site.webmanifest rel=manifest> <link href=assets/safari-pinned-tab.svg rel=mask-icon color=#6cd7f7> <meta content=#6cd7f7 name=msapplication-TileColor> <meta content=#333333 name=theme-color> <link href=client/main.1021106435.css rel=stylesheet><link href=client/index.2c8e51fd.css rel=stylesheet><link href=client/client.5de11f64.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>Loop • Flexible and Expressive CSS</title><meta content="Fully customizable CSS framework, aiming to create a more maintainable and readable code" name=description><noscript id=sapper-head-end></noscript> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-163322870-1"></script> <script> window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-163322870-1'); </script> </head> <body> <nav class=svelte-1c5p7j2><ul class="svelte-1c5p7j2 list-inline"><li><a href=. class="svelte-1c5p7j2 _300B8bfDmR"><img alt="loop css" src=logo-inverted.svg class=svelte-1c5p7j2 height=35 width=35>Loop</a></li> <li><a href=docs/ class=svelte-1c5p7j2>Docs</a></li> <li><a href=https://github.com/oo-loop/loop class=svelte-1c5p7j2 rel=external>Github</a></li> <li><a href=https://oo-loop.github.io/v0.4 class=svelte-1c5p7j2>v0.4</a></ul></nav> <main class=container> <section class="svelte-b9z19d _13Di2l2MR6"><img alt="" src=logo.svg class=MEKreLMgyn height=637> <div class=svelte-b9z19d><h1 class=svelte-b9z19d>Loop</h1> <h2 class=svelte-b9z19d>Flexible and Expressive CSS</h2> <p class="mb-30 font-large">Aiming to create a more maintainable and readable CSS</p> <code class=large>npm install oo-loop</code></div></section> <div data-oo-col="span8@md self-align-center"><a href=docs/ class=_2Qn9aVT4nt data-oo-button>Start</a> <div class="svelte-b9z19d hr"></div> <h3 class=svelte-b9z19d>Fully customizable</h3> <p>Loop is a fully customizable CSS framework built with Sass. It gives you complete control on your project to let you create and match your styles with your design needs.</p> <h3 class=svelte-b9z19d>Single Configuration</h3> <p>No endless list of variables, Loop offers easy management and access to all configuration in a single map.</p> <h3 class=svelte-b9z19d>Separation of concerns</h3> <p>Loop differentiates components and utilities with semantic for more clarity</p> <ul><li><a href=docs/components/ title="Components documentation">oo-componentName</a> / <a href=docs/components/ title="Components documentation">data-oo-componentName</a> for component attributes</li> <li><a href=docs/utilities/ title="Utilities documentation">.prefixName-valueName</a> for utility classes</ul></div> <section class="_2hj7QM0sl _2gMDmTMc4G _3DWgN0MSOR"><div class=container><h2 class=svelte-16mf9ho>Quick Element Layout</h2> <div data-oo-row=align-center><div data-oo-col="span4@md order0@md"><pre class="mt-0 wrapper-less language-scss mb-0"><code><span class="token comment">// _config.scss</span>
<span class="token keyword">@import</span> <span class="token string">'oo-loop/loop'</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">ooCreate</span><span class="token punctuation">(</span><span class="token punctuation">(</span>
<span class="token property">palette</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">'white'</span><span class="token punctuation">:</span> #fff<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">column</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">gutter</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div> <div data-oo-col="span12 span10@md"><pre class="mt-0 wrapper-less mb-0 language-html"><code><span class="token comment"><!-- App --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-col</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>orange.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>85<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>oranges<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-col</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mt-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Orange <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color-secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>/ˈɒrɪn(d)ʒ/<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>A large round juicy citrus fruit with a tough bright reddish-yellow rind.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre></div> <div data-oo-col="span6@md self-valign-middle order0@md"><div class="svelte-16mf9ho preview mb-30 mt-30"><div data-oo-row=gutter-small><div data-oo-col=fit><img alt=oranges src=orange.jpg width=85></div> <div class=color-white data-oo-col=""><h3 class=mt-0>Orange <small class=color-secondary>/ˈɒrɪn(d)ʒ/</small></h3> <p class=mb-0>A large round juicy citrus fruit with a tough bright reddish-yellow rind.</div></div></div></div> <div class=text-center data-oo-col=span12><a href=docs/components/column/ class="svelte-16mf9ho font-medium" data-oo-button=primary title="Start using Columns">Start using Columns</a></div></div></div></section> <section class="_2hj7QM0sl b0PMlp3Tgh"><div class=container><h2 class=svelte-16mf9ho>Simple Responsive Template Design</h2> <div data-oo-row=align-between><div class=mt-15 data-oo-col=span6@md><pre class="mt-0 wrapper-less language-scss mb-5"><code><span class="token comment">// _config.scss</span>
<span class="token keyword">@import</span> <span class="token string">'oo-loop/loop'</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$ooLoop</span></span><span class="token punctuation">:</span> <span class="token function">ooSet</span><span class="token punctuation">(</span><span class="token string">'template.areas'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>
<span class="token string">'home'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">rt</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">"header"</span>
<span class="token string">"nav"</span>
<span class="token string">"main"</span>
<span class="token string">"widgets"</span>
<span class="token string">"footer"</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">sm</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">"header header header"</span>
<span class="token string">"nav main main"</span>
<span class="token string">"nav widgets widgets"</span>
<span class="token string">"footer footer footer"</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">md</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">"header header header header"</span>
<span class="token string">"nav main main widgets"</span>
<span class="token string">"nav main main widgets"</span>
<span class="token string">"footer footer footer footer"</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">lg</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">"header nav nav"</span>
<span class="token string">"main main widgets"</span>
<span class="token string">"footer footer widgets"</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$ooLoop</span></span><span class="token punctuation">:</span> <span class="token function">ooSet</span><span class="token punctuation">(</span><span class="token string">'template.gap'</span><span class="token punctuation">,</span> 1rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">ooCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <pre class="mt-0 wrapper-less mb-0 language-html"><code>
<span class="token comment"><!-- App --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-template</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-area</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-area</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-area</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-area</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>widgets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Widgets<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-area</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div> <div class=mt-45 data-oo-col="span12 span5@md order0@md"><div class="svelte-yroeky _2YM-qVL6dU"><span class="svelte-yroeky active screen-rt">rt</span><span class="svelte-yroeky screen-sm">sm</span><span class="svelte-yroeky screen-md">md</span><span class="svelte-yroeky screen-lg">lg</span></div> <div class="svelte-yroeky BZ5kMyeSSh"><div class="svelte-yroeky _1WcpYSBzm5 clear mt-5 preview template-rt"><div class=svelte-yroeky><div class="svelte-yroeky bl3vq_drYS sILbvPs8L0 _3cSUfooLKk">Header</div> <div class="svelte-yroeky bl3vq_drYS ZqPB3VbTv8 zbU9r-0mf3">Nav</div> <div class="svelte-yroeky RYT6AWe8hh _1DCKRT5OhQ _3ZSJHxA8lF">Main</div> <div class="svelte-yroeky bl3vq_drYS ZqPB3VbTv8 _386DtAdUEh">Widgets</div> <div class="svelte-yroeky bl3vq_drYS sILbvPs8L0 _3EFtX8yeL7">Footer</div></div></div></div> <div class="text-center mt-30"><a href=docs/components/template/ class="svelte-16mf9ho font-medium" data-oo-button=primary title="Create Templates">Create Templates</a></div></div></div></div></section> <section class="_2hj7QM0sl _1tkMrs0yCg _3g8yuyPfQj"><h2 class=svelte-16mf9ho>Easy Use of Config Data</h2> <div class=container><div data-oo-row=align-center><div class=mt-5 data-oo-col="span12 fit@sm"><pre class="mt-0 wrapper-less language-scss"><code><span class="token comment">// style.scss</span>
<span class="token selector">.hero </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">oo</span><span class="token punctuation">(</span><span class="token string">'container.gutter.rt'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">min-height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">oo</span><span class="token punctuation">(</span><span class="token string">'palette.primary'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">breakpoint</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">oo</span><span class="token punctuation">(</span><span class="token string">'container.gutter.sm'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div> <div class="text-center hidden!@md" data-oo-col="span2 self-valign-middle"><span class="color-secondary font-light h2">=></span></div> <div class=mt-5 data-oo-col="span12 span4@sm span3@md"><pre class="mt-0 wrapper-less language-css"><code><span class="token comment">/** Generating style.css **/</span>
<span class="token selector">.hero</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">min-height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #28a6c7<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 37.5em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">.hero</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div> <div data-oo-col=span12><p class="text-center mt-45"><a href=docs/config/ class="svelte-16mf9ho font-medium" data-oo-button=primary title="Learn about Loop config">Learn about Loop config</a></div></div></div></section> <section><div class=container><div class=wrapper-wide data-oo-col="span9@sm span7@md self-align-center"><p class="mb-0 font-large">Like a companion, Loop supports your development, giving you the tools to make it your own.<br><br> Loop encourages the use and <a href=docs/utilities/ title="Make your own utilties set">creation of utilities</a> while considering <a href=docs/components/ title="Create your own components">making components</a> for recurring styling. </div></div></section> <section class="_2hj7QM0sl _1tkMrs0yCg _2gMDmTMc4G"><br> <h2 class=svelte-16mf9ho>Take Advantage of Utilities<br> <small>Adjust your Needs - Build Rapidly</small></h2> <div class=container><div data-oo-row=align-evenly><div data-oo-col="fit self-align-center"><pre class="mt-0 wrapper-less language-scss"><code><span class="token comment">// _config.scss</span>
<span class="token keyword">@import</span> <span class="token string">'oo-loop/loop'</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$ooLoop</span></span><span class="token punctuation">:</span> <span class="token function">ooPipe</span><span class="token punctuation">(</span>
_<span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'palette'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>
<span class="token string">'lavender'</span><span class="token punctuation">:</span> #a172bf<span class="token punctuation">,</span>
<span class="token string">'white'</span><span class="token punctuation">:</span> #fff<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
_<span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>
<span class="token property">values</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">'tiny'</span><span class="token punctuation">:</span> .5rem
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">screens</span><span class="token punctuation">:</span> <span class="token string">'md'</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
_<span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'utilities'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>
<span class="token property">display</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">prefix</span><span class="token punctuation">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span>
<span class="token property">values</span><span class="token punctuation">:</span> <span class="token string">'block'</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">letterSpacing</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">prefix</span><span class="token punctuation">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
<span class="token property">values</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">'wide'</span><span class="token punctuation">:</span> .5px<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">values</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">'hidden'</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">shape</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">property</span><span class="token punctuation">:</span> <span class="token string">'border-radius'</span><span class="token punctuation">,</span>
<span class="token property">values</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">'squircle'</span><span class="token punctuation">:</span> 1em<span class="token punctuation">,</span>
<span class="token string">'stadium'</span><span class="token punctuation">:</span> 50em<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">ooCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div> <div data-oo-col="span12 span8@md span7@lg self-valign-middle"><pre class="mt-0 wrapper-less language-html mb-30"><code><span class="token comment"><!-- App --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bg-white text-center shape-squircle overflow-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2020-09-07 10:00<span class="token punctuation">"</span></span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>d-block wrapper-tiny bg-lavender color-white font-small text-uppercase<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
September 7th, 10am
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper-small wrapper-medium@md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mt-0 mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Frontend Developer Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-wide<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tokyo, Odaiba, Big Sight<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>shape-stadium<span class="token punctuation">"</span></span> <span class="token attr-name">oo-button</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lavender outline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Join<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre> <div class="svelte-16mf9ho preview mb-30"><div class="text-center bg-white overflow-hidden shape-squircle"><time class="text-center bg-lavender color-white d-block font-small text-uppercase wrapper-tiny" datetime="2020-09-07 10:00">September 7th, 10am </time> <div class="wrapper-medium@md wrapper-small"><h3 class="mt-0 mb-0">Frontend Developer Festival</h3> <p class=text-wide>Tokyo, Odaiba, Big Sight</p> <button class="svelte-16mf9ho shape-stadium" data-oo-button="lavender outline">Join</button></div></div></div></div> <div class=text-center data-oo-col=span12><div data-oo-row="gutter-small align-center"><div data-oo-col="span12 fit@sm"><a href=docs/utilities/ class="svelte-16mf9ho font-medium" data-oo-button=primary title="Make your own Set">Make your own Set</a></div> <div data-oo-col=fit@sm><a href=docs/components/#turn-utility-into-component class="svelte-16mf9ho font-medium" data-oo-button="primary outline" title="Turn utility first component into Loop component">Turn event into Loop component</a></div></div></div></div></div></section> <section class="_2hj7QM0sl _24zzGniu6B"><div class=container><h2 class=svelte-16mf9ho>Turn recurring style into Component<br> <small>Make Html more Readable</small></h2> <div data-oo-row=align-evenly><div class=mt-10 data-oo-col="span6@sm span5@md"><pre class="mt-0 wrapper-less language-scss"><code><span class="token comment">// _config.scss</span>
<span class="token keyword">@import</span> <span class="token string">'oo-loop/loop'</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$ooLoop</span></span><span class="token punctuation">:</span> <span class="token function">ooAdd</span><span class="token punctuation">(</span><span class="token string">'components'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>
<span class="token string">'notification'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">props</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">,</span>
<span class="token property">border-left-width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">,</span>
<span class="token property">border-left-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">variants</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token string">'success'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">color</span><span class="token punctuation">:</span> #015a31<span class="token punctuation">,</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> #83cca9<span class="token punctuation">,</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #c8f7e1<span class="token punctuation">,</span>
<span class="token punctuation">)</span>
<span class="token string">'danger'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">color</span><span class="token punctuation">:</span> #5a0101<span class="token punctuation">,</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> #ca7878<span class="token punctuation">,</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f7c8c8<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string">'warning'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">color</span><span class="token punctuation">:</span> #77490b<span class="token punctuation">,</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> #d69d50<span class="token punctuation">,</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f7f3c8<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string">'centered'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">,</span>
<span class="token property">border-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span>
<span class="token property">border-top-width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">,</span>
<span class="token property">border-top-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string">'right'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">,</span>
<span class="token property">border-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span>
<span class="token property">border-right-width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">,</span>
<span class="token property">border-right-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">,</span>
<span class="token punctuation">)</span>
<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">ooCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div> <div class=mt-10 data-oo-col="span12 span6@sm span5@md order0@md"><pre class="mt-0 wrapper-less language-html"><code><span class="token comment"><!-- App --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-notification</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success centered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Hey, well done!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
You've created a notification component.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-notification</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Oops!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
You've created a notification component.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-notification</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Beware!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
You've created a notification component.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre> <div class="svelte-16mf9ho preview"><div class=mb-15 data-oo-notification="success centered"><strong>Hey, well done!</strong><br> You've created a notification component. </div> <div class=mb-15 data-oo-notification=danger><strong>Oops!</strong><br> You've created a notification component. </div> <div data-oo-notification="warning right"><strong>Beware!</strong><br> You've created a notification component. </div></div> <div class="text-center mt-45"><a href=docs/components/ class="svelte-16mf9ho mt-15" data-oo-button=primary title="Learn about Loop Component">Develop Loop Component</a></div></div></div></div></section> <section class="_2hj7QM0sl _3g8yuyPfQj _3LUHnmexNJ"><div class=container><h2 class=svelte-16mf9ho>Develop Component with more Freedom<br><small>Pure Scss coding with Mixins</small></h2> <div data-oo-row=align-center><div data-oo-col="span12 span11@sm span6@md order0@md"><pre class="mt-0 wrapper-less language-scss mb-0"><code><span class="token comment">// index.scss</span>
<span class="token keyword">@import</span> <span class="token string">'config'</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">ooComponent</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.3rem<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token selector"><span class="token important parent">&</span>::before </span><span class="token punctuation">{</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token important parent">&</span>::after </span><span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-degree<span class="token punctuation">)</span><span class="token string">'\00B0'</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span>
<span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token important parent">&</span> + <span class="token important parent">&</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'celsius'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token important parent">&</span>::after </span><span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-degree<span class="token punctuation">)</span><span class="token string">'\2103'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'fahrenheit'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token important parent">&</span>::after </span><span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-degree<span class="token punctuation">)</span><span class="token string">'\2109'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'sunny'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #36c2dd<span class="token punctuation">;</span>
<span class="token selector"><span class="token important parent">&</span>::before </span><span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff789<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span>
0 0 10px 0 yellow<span class="token punctuation">,</span>
0 0 0 1px #ffdd40<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div> <div data-oo-col="span12 span11@sm span12@md span11@lg"><pre class="mt-0 wrapper-less language-scss mb-0"><code><span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'clear'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #212240<span class="token punctuation">;</span></code></pre> <code class=color-white role=button>...</code> <pre class="mt-0 wrapper-less language-scss mb-0"><code><span class="token punctuation">}</span>
<span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'rainy'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #84a4cc<span class="token punctuation">;</span></code></pre> <code class=color-white role=button>...</code> <pre class="mt-0 wrapper-less language-scss mb-0"><code><span class="token punctuation">}</span>
<span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'snowy'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #92bace<span class="token punctuation">;</span></code></pre> <code class=color-white role=button>...</code> <pre class="mt-0 wrapper-less language-scss mb-0"><code><span class="token punctuation">}</span>
<span class="token keyword">@include</span> <span class="token function">ooComponentVariant</span><span class="token punctuation">(</span><span class="token string">'weather'</span><span class="token punctuation">,</span> <span class="token string">'night'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #212240<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div> <div data-oo-col="span8@sm auto@md span5@lg order0@md"><pre class="mt-0 wrapper-less language-html mb-20"><code><span class="token comment"><!-- App --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-weather</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sunny<span class="token punctuation">"</span></span> <span class="token attr-name">data-degree</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>28<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Marseille<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>Sunny<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-weather</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rainy<span class="token punctuation">"</span></span> <span class="token attr-name">data-degree</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Edinburgh<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>Rainy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-weather</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>clear celsius<span class="token punctuation">"</span></span> <span class="token attr-name">data-degree</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Tokyo<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>Clear Night<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-weather</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rainy night celsius<span class="token punctuation">"</span></span> <span class="token attr-name">data-degree</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Sapporo<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>Rainy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">oo-weather</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>snowy fahrenheit<span class="token punctuation">"</span></span> <span class="token attr-name">data-degree</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>La Crosse<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>Snowy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre> <div data-oo-col="span11@sm span10@md span11@lg"><div class="svelte-16mf9ho preview mb-45"><div data-degree=28 data-oo-weather=sunny><span>Marseille<br><small>Sunny</small></span></div> <div data-degree=8 data-oo-weather=rainy><span>Edinburgh<br><small>Rainy</small></span></div> <div data-degree=14 data-oo-weather="clear celsius"><span>Tokyo<br><small>Clear Night</small></span></div> <div data-degree=5 data-oo-weather="rainy night celsius"><span>Sapporo<br><small>Rainy</small></span></div> <div data-degree=32 data-oo-weather="snowy fahrenheit"><span>La Crosse<br><small>Snowy</small></span></div></div> <div class=text-center><a href=docs/components/#from-mixin class="svelte-16mf9ho font-medium mt-10" data-oo-button=primary title="Develop Custom Component">Develop Custom Component</a></div></div></div></div></div></section> <div data-oo-col="span8@md self-align-center"><h3 class=svelte-b9z19d>Why Loop?</h3> <p>The first iteration of Loop <em>(0.4)</em> focused on bringing the minimum to bootstrap any project. Instead of providing any possible existing components, Loop worked towards flexibility and customization to let the developer manage his own set of utilities; thus, making the CSS easier to maintain. Loop also introduced a new component syntax to improve HTML readibility making styling code more expressive and less confusing. </p> <p><strong>Loop v1</strong> continues into the same philosophy tackling this time the variables situation. What we often get from a css framework, is a list of single variable to customize elements or components properties. The list, trying to cover a multitude of parameters, tends to be exhaustive and can become painful while searching for a possible change. </p> <p>Loop proposes to treat the variables as a single structured map to facilitate its use. As the result, the config map is enabling easy parsing and access to all the data during the development. Moreover, the introduction of properties such <em>props</em> and <em>states</em> offers a complete control over the style of elements and components. It is simplifying its customization by allowing you to add whatever CSS properties you need without worrying if it's changeable or not. </p> <p class="text-center mt-30"><a href=docs/ class=font-medium data-oo-button="primary outline">Let's go</a></p> <hr> </div></main> <script>__SAPPER__={baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');(function(){try{eval("async function x(){}");var main="/client/client.5de11f64.js"}catch(e){main="/client/legacy/client.d3164e96.js"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/client/shimport@1.0.1.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());</script>