forked from michalgrochowski/grid-playground
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
333 lines (333 loc) · 22.5 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
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
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add a Google Font of choice or remove this -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext">
<!-- Add new css files here so gulp-useref can bundle them in one file -->
<!--build:css css/main.min.css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
<!-- Basic page info -->
<title>CSS Grid Playground</title>
<meta name="description" content="Learn CSS grid by changing it's properties live.">
<meta name="keywords" content="css, grid, css grid, dobry, webdev, dobrywebdev, playground, learning, frontend, front-end">
<meta name="author" content="Michał Grochowski">
<!-- Open Graph properties -->
<meta property="og:title" content="CSS Grid Playground">
<meta property="og:url" content="https://michalgrochowski.github.io/grid-playground/dist/">
<meta property="og:image" content="https://michalgrochowski.github.io/grid-playground/dist/img/playground.png">
<meta property="og:description" content="Learn CSS grid by changing it's properties live.">
<!-- Twitter card properties -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://michalgrochowski.github.io/grid-playground/dist/">
<meta name="twitter:title" content="CSS Grid Playground">
<meta name="twitter:description" content="Learn CSS grid by changing it's properties live.">
<meta name="twitter:image" content="https://michalgrochowski.github.io/grid-playground/dist/img/playground.png">
<meta name="twitter:image:alt" content="CSS Grid Playground">
<meta name="twitter:site" content="@dobrywebdev">
<meta name="twitter:creator" content="@dobrywebdev">
<!-- Icons and manifest - should be in a root folder -->
<link rel="apple-touch-icon" sizes="180x180" href="https://michalgrochowski.github.io/grid-playground/dist/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://michalgrochowski.github.io/grid-playground/dist/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="https://michalgrochowski.github.io/grid-playground/dist/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://michalgrochowski.github.io/grid-playground/dist//android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://michalgrochowski.github.io/grid-playground/dist/favicon-16x16.png">
<link rel="mask-icon" href="https://michalgrochowski.github.io/grid-playground/dist/safari-pinned-tab.svg" color="#ffffff">
<meta name="apple-mobile-web-app-title" content="CSS Grid Playground">
<meta name="application-name" content="CSS Grid Playground">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="https://michalgrochowski.github.io/grid-playground/dist/manifest.json">
</head>
<body id="body" class="overflow-on">
<div class="github-stars">
<a class="github-button" href="https://github.com/michalgrochowski/grid-playground" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star michalgrochowski/grid-playground on GitHub">Star</a>
</div>
<nav class="social-nav">
<ul class="social-nav__list">
<li class="social-nav__item">
<a class="social-nav__link" href="https://twitter.com/dobrywebdev" title="Michał Grochowski Twitter" rel="noopener" target="_blank">
<span class="icon-twitter"></span>
</a>
</li>
<li class="social-nav__item">
<a class="social-nav__link" href="https://www.linkedin.com/in/micha%C5%82-grochowski-962a45131/" title="Michał Grochowski LinkedIn" rel="noopener" target="_blank">
<span class="icon-linkedin"></span>
</a>
</li>
<li class="social-nav__item">
<a class="social-nav__link" href="https://github.com/michalgrochowski" title="Michał Grochowski GitHub" rel="noopener" target="_blank">
<span class="icon-github-circled"></span>
</a>
</li>
<li class="social-nav__item">
<a class="social-nav__link" href="https://dobrywebdev.pl" title="dobrywebdev.pl" rel="noopener" target="_blank">
<span class="icon-user-o"></span>
</a>
</li>
</ul>
</nav>
<main class="container">
<h1 class="container__title">CSS Grid Playground</h1>
<p class="container__subtitle">Play with the grid options below and see how the layout changes.</p>
<p class="container__subtitle">You can also add, edit or remove items from the grid.</p>
<p class="container__subtitle">Just put a desired value in the input box and click the "Apply" button to see changes in the grid.</p>
<p class="container__subtitle">Although it is fully responsive, I would recommend using it only on desktop - it may easily get too cluttered on mobile.</p>
<p class="container__subtitle container__subtitle--bold">If you like this project, consider giving it a star on GitHub - it's always appreciated!</p>
<section id="" class="section">
<h2 class="section__title">Here is your grid:</h2>
<div id="helpModal" class="grid-options__help-box">
<article class="grid-options__article">
<button id="closeModal" class="grid-options__close-modal">Close <span class="icon-cancel"></span></button>
<h3 class="grid-options__title">Here are the basic CSS Grid properties:</h3>
<p class="grid-options__paragraph grid-options__paragraph--italic">Not all of them are used in this app or are used in a different way - you can find all the details below</p>
<p class="grid-options__paragraph">To use CSS Grid, first you have to add <code class="grid-options__code">"display: grid"</code> to your container. You can also set it to <code class="grid-options__code">"inline-grid"</code>. There is one more option, <code class="grid-options__code">"display: subgrid"</code> - useful if the elements parent has <code class="grid-options__code">"display: grid"</code> and you want your element and its content to be laid out according to the grid model.</p>
<p class="grid-options__subtitle">Grid options:</p>
<p class="grid-options__paragraph"><strong>width and height</strong> - pretty self explanatory, it's the height and width of the grid container.</p>
<p class="grid-options__paragraph"><strong>columns and rows</strong> - full property names are <code class="grid-options__code">"grid-template-columns"</code> and <code class="grid-options__code">"grid-template-rows"</code>. They specify how many columns and rows the grid will have. You can put there any value in px, %, rem, em, vh, vw or fr. Shorthand property is <code class="grid-options__code">"grid-template"</code>. Here we are using evenly sized columns and rows with <code class="grid-options__code">"repeat(number of columns/rows, size of column/row)"</code> option, but in your own grid you can use named areas or different values for each column/row, for example: <br>
<code class="grid-options__code">"grid-template-columns: [first] 40px 1fr 20% [last];".</code><br>
Yes, you can name very column and every row of your grid - pretty neat!</p>
<p class="grid-options__paragraph"><strong>column and row size</strong> - you can specify the size of rows and columns, using px, %, rem, em, vh, vw or fr. We are using equal sizes, so it will affect every item the same way.</p>
<p class="grid-options__paragraph"><strong>column gap and row gap</strong> - full property names are <code class="grid-options__code">"grid-column-gap"</code> and <code class="grid-options__code">"grid-row-gap"</code>. They specify the size of the gutters between columns and rows. You can put there any value in px, %, rem, em, vh, vw or fr. Shorthand property is <code class="grid-options__code">"grid-gap"</code>.</p>
<p class="grid-options__paragraph"><strong>grid-auto-flow</strong> - Grid has pretty great auto-placement algorithm, and <code class="grid-options__code">"grid-auto-flow"</code> property defines how should it act. If you set it to <code class="grid-options__code">"column"</code> it will place new grid items in available columns or create a new one and place it there. If you set it to <code class="grid-options__code">"row"</code> it will place new grid items in available rows or create a new one and place it there. Last option, <code class="grid-options__code">"dense"</code>, will try to fit any new items in available spotsand may also change the order of your grid items, so be careful with that.</p>
<p class="grid-options__subtitle">Grid item options:</p>
<p class="grid-options__paragraph"><strong>grid-column-start</strong> - specifies in which column the item will start. Given number refers to the start of the column. You can use integers to indicate specific column number, named area if you have one or <code class="grid-options__code">"span integer"</code> to tell the item to span over given number of columns.</p>
<p class="grid-options__paragraph"><strong>grid-column-end</strong> - specifies in which column the item will end. Given number refers to the start of the column, so for example if you want an item to span over columns 1-3, you have to put 4 in there. You can use integers to indicate specific column number, named area if you have one or <code class="grid-options__code">"span integer"</code> to tell the item to span over given number of columns.</p>
<p class="grid-options__paragraph"><strong>grid-row-start</strong> - specifies in which row the item will start. Given number refers to the start of the row. You can use integers to indicate specific row number, named area if you have one or <code class="grid-options__code">"span integer"</code> to tell the item to span over given number of rows.</p>
<p class="grid-options__paragraph"><strong>grid-row-end</strong> - specifies in which row the item will end. Given number refers to the start of the row, so for example if you want an item to span over rows 1-3, you have to put 4 in there. You can use integers to indicate specific row number, named area if you have one or <code class="grid-options__code">"span integer"</code> to tell the item to span over given number of rows.</p>
<p class="grid-options__subtitle">Other options:</p>
<p class="grid-options__paragraph">CSS Grid offers a lot of more options than shown in this app. Options like <code class="grid-options__code">"align-items"</code>, <code class="grid-options__code">"justify-items"</code>, <code class="grid-options__code">"align-content"</code> and <code class="grid-options__code">"justify-content"</code> works pretty much the same as in Flexbox, so if you know how to use them you are good to go. There is also the <code class="grid-options__code">"grid"</code> property, in which you specify all of the above properties. It makes the code a lot less readable in my opinion, but feel free to use it.</p>
<p class="grid-options__paragraph grid-options__paragraph--last">Grid items also have some more properties, like <code class="grid-options__code">"grid-area"</code> that tells the item which named areas of your grid should it take or specify both columns and rows start and end, also there are of course <code class="grid-options__code">"align-self"</code> and <code class="grid-options__code">"justify-self"</code> - again, works the same way as with Flex items. You can also use short-hand properties <code class="grid-options__code">"grid-column"</code> and <code class="grid-options__code">"grid-row"</code> to specify both the start and the end of your item.</p>
</article>
</div>
<div class="grid-options__controls">
<button id="addGridItem" class="grid-options__button grid-options__button--add"><span class="icon-plus"></span> Add item</button>
<button id="showHelp" class="grid-options__button grid-options__button--help"><span class="icon-help-circled"></span> Need help?</button>
<button id="optionsButton" class="grid-options__button grid-options__button--options"><span class="icon-cog"></span> Grid options</button>
</div>
<div id="options-box" class="grid-options">
<form class="options-form">
<fieldset class="options-form__fieldset">
<legend class="options-form__legend">Grid options:</legend>
<label class="options-form__label" for="gridWidth">width (px, rem, vh vw or %):</label>
<input id="gridWidth" class="options-form__input" type="text" value="90%">
<label class="options-form__label" for="gridHeight">height (px, rem, vh vw or %):</label>
<input id="gridHeight" class="options-form__input" type="text" value="950px">
<label class="options-form__label" for="gridColumns">columns (number):</label>
<input id="gridColumns" class="options-form__input" type="text" value="3">
<label class="options-form__label" for="gridRows">rows (number):</label>
<input id="gridRows" class="options-form__input" type="text" value="3">
<label class="options-form__label" for="gridColumnSize">column size:</label>
<input id="gridColumnSize" class="options-form__input" type="text" value="1fr">
<label class="options-form__label" for="gridRowSize">row size:</label>
<input id="gridRowSize" class="options-form__input" type="text" value="1fr">
<label class="options-form__label" for="gridColumnGap">column gap (px, rem, vh vw or %):</label>
<input id="gridColumnGap" class="options-form__input" type="text" value="10px">
<label class="options-form__label" for="gridRowGap">row gap (px, rem, vh, vw or %):</label>
<input id="gridRowGap" class="options-form__input" type="text" value="10px">
<label class="options-form__label" for="gridAutoFlow">grid-auto-flow:</label>
<select id="gridAutoFlow" class="options-form__select">
<option>dense</option>
<option>row</option>
<option>column</option>
</select>
</fieldset>
</form>
<button id="gridOptionsApply" class="grid-options__button grid-options__button--apply">Apply <span class="icon-ok"></span></button>
</div>
<div id="grid" class="grid-container">
<div class="grid-item">
<button class="grid-item__button grid-item__button--delete">
Delete <span class="icon-cancel"></span>
</button>
<form class="grid-item__options">
<label class="grid-item__label grid-item__label--column-start">
grid-column-start:
<input class="grid-item__input gridColumnStart" type="text">
</label>
<label class="grid-item__label grid-item__label--column-end">
grid-column-end:
<input class="grid-item__input gridColumnEnd" type="text">
</label>
<label class="grid-item__label grid-item__label--row-start">
grid-row-start:
<input class="grid-item__input gridRowStart" type="text">
</label>
<label class="grid-item__label grid-item__label--row-end">
grid-row-end:
<input class="grid-item__input gridRowEnd" type="text">
</label>
</form>
<button class="grid-item__button grid-item__button--apply">
Apply <span class="icon-ok"></span>
</button>
</div>
<div class="grid-item">
<button class="grid-item__button grid-item__button--delete">
Delete <span class="icon-cancel"></span>
</button>
<form class="grid-item__options">
<label class="grid-item__label grid-item__label--column-start">
grid-column-start:
<input class="grid-item__input gridColumnStart" type="text">
</label>
<label class="grid-item__label grid-item__label--column-end">
grid-column-end:
<input class="grid-item__input gridColumnEnd" type="text">
</label>
<label class="grid-item__label grid-item__label--row-start">
grid-row-start:
<input class="grid-item__input gridRowStart" type="text">
</label>
<label class="grid-item__label grid-item__label--row-end">
grid-row-end:
<input class="grid-item__input gridRowEnd" type="text">
</label>
</form>
<button class="grid-item__button grid-item__button--apply">
Apply <span class="icon-ok"></span>
</button>
</div>
<div class="grid-item">
<button class="grid-item__button grid-item__button--delete">
Delete <span class="icon-cancel"></span>
</button>
<form class="grid-item__options">
<label class="grid-item__label grid-item__label--column-start">
grid-column-start:
<input class="grid-item__input gridColumnStart" type="text">
</label>
<label class="grid-item__label grid-item__label--column-end">
grid-column-end:
<input class="grid-item__input gridColumnEnd" type="text">
</label>
<label class="grid-item__label grid-item__label--row-start">
grid-row-start:
<input class="grid-item__input gridRowStart" type="text">
</label>
<label class="grid-item__label grid-item__label--row-end">
grid-row-end:
<input class="grid-item__input gridRowEnd" type="text">
</label>
</form>
<button class="grid-item__button grid-item__button--apply">
Apply <span class="icon-ok"></span>
</button>
</div>
<div class="grid-item">
<button class="grid-item__button grid-item__button--delete">
Delete <span class="icon-cancel"></span>
</button>
<form class="grid-item__options">
<label class="grid-item__label grid-item__label--column-start">
grid-column-start:
<input class="grid-item__input gridColumnStart" type="text">
</label>
<label class="grid-item__label grid-item__label--column-end">
grid-column-end:
<input class="grid-item__input gridColumnEnd" type="text">
</label>
<label class="grid-item__label grid-item__label--row-start">
grid-row-start:
<input class="grid-item__input gridRowStart" type="text">
</label>
<label class="grid-item__label grid-item__label--row-end">
grid-row-end:
<input class="grid-item__input gridRowEnd" type="text">
</label>
</form>
<button class="grid-item__button grid-item__button--apply">
Apply <span class="icon-ok"></span>
</button>
</div>
<div class="grid-item">
<button class="grid-item__button grid-item__button--delete">
Delete <span class="icon-cancel"></span>
</button>
<form class="grid-item__options">
<label class="grid-item__label grid-item__label--column-start">
grid-column-start:
<input class="grid-item__input gridColumnStart" type="text">
</label>
<label class="grid-item__label grid-item__label--column-end">
grid-column-end:
<input class="grid-item__input gridColumnEnd" type="text">
</label>
<label class="grid-item__label grid-item__label--row-start">
grid-row-start:
<input class="grid-item__input gridRowStart" type="text">
</label>
<label class="grid-item__label grid-item__label--row-end">
grid-row-end:
<input class="grid-item__input gridRowEnd" type="text">
</label>
</form>
<button class="grid-item__button grid-item__button--apply">
Apply <span class="icon-ok"></span>
</button>
</div>
<div class="grid-item">
<button class="grid-item__button grid-item__button--delete">
Delete <span class="icon-cancel"></span>
</button>
<form class="grid-item__options">
<label class="grid-item__label grid-item__label--column-start">
grid-column-start:
<input class="grid-item__input gridColumnStart" type="text">
</label>
<label class="grid-item__label grid-item__label--column-end">
grid-column-end:
<input class="grid-item__input gridColumnEnd" type="text">
</label>
<label class="grid-item__label grid-item__label--row-start">
grid-row-start:
<input class="grid-item__input gridRowStart" type="text">
</label>
<label class="grid-item__label grid-item__label--row-end">
grid-row-end:
<input class="grid-item__input gridRowEnd" type="text">
</label>
</form>
<button class="grid-item__button grid-item__button--apply">
Apply <span class="icon-ok"></span>
</button>
</div>
</div>
</section>
<section class="bonus-materials">
<h2 class="bonus-materials__title">Additional resources</h2>
<p class="bonus-materials__description">Because CSS Grid is much more robust than shown in this app, I recommend looking at additional resources listed below:</p>
<a class="bonus-materials__link" href="https://cssgrid.io/" rel="noopener" target="_blank" title="">Wes Bos CSS Grid Course (Free!)</a>
<a class="bonus-materials__link" href="http://cssgridgarden.com/" rel="noopener" target="_blank" title="">CSS Grid Garden - a fun game from creators of Flexbox Froggy</a>
<a class="bonus-materials__link" href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="noopener" target="_blank" title="">CSS Tricks - A Complete Guide to Grid</a>
<a class="bonus-materials__link" href="https://css-tricks.com/things-ive-learned-css-grid-layout/" rel="noopener" target="_blank" title="">CSS Tricks - Couple more interesting thing about Grid</a>
<a class="bonus-materials__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="noopener" target="_blank" title="">MDN - CSS Grid Layout</a>
<a class="bonus-materials__link" href="https://www.youtube.com/watch?v=7kVeCqQCxlk" rel="noopener" target="_blank" title="">[VIDEO] CSS Grid Changes EVERYTHING - Morten Rand-Hendriksen</a>
<a class="bonus-materials__link" href="https://github.com/rachelandrew/gridbugs" rel="noopener" target="_blank" title="">Nice list of known Grid bugs in various browsers.</a>
</section>
<footer id="footer" class="footer">
<p class="footer__text">Built by Michał Grochowski @ <a class="footer__link" href="https://dobrywebdev.pl" rel="noopener" target="_blank">dobrywebdev.pl</a></p>
</footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Add new JS files here so gulp-useref can bundle them in one file -->
<!--build:js js/main.min.js -->
<script src="js/main.js"></script>
<!-- endbuild -->
<script async>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-87019136-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>