@internetstiftelsen/styleguide 2.21.31 → 2.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/dist/assets/js/conditional.js +3 -1
  2. package/dist/assets/js/validationMessage.js +1 -1
  3. package/package.json +1 -1
  4. package/src/assets/js/conditional.js +3 -1
  5. package/dist/.DS_Store +0 -0
  6. package/src/.DS_Store +0 -0
  7. package/src/_head.hbs +0 -12
  8. package/src/_icon-sprite.hbs +0 -334
  9. package/src/_layout-icons.hbs +0 -58
  10. package/src/_layout-logotypes.hbs +0 -54
  11. package/src/_logotype-sprite.hbs +0 -42
  12. package/src/_preview.hbs +0 -12
  13. package/src/_scripts.hbs +0 -1
  14. package/src/assets/.DS_Store +0 -0
  15. package/src/assets/images/ALX_0876.jpg +0 -0
  16. package/src/assets/images/ALX_2024.jpg +0 -0
  17. package/src/assets/images/ALX_2242.jpg +0 -0
  18. package/src/assets/images/ALX_2629.jpg +0 -0
  19. package/src/assets/images/ALX_7251.jpg +0 -0
  20. package/src/assets/images/ALX_7427_1.jpg +0 -0
  21. package/src/assets/images/Friutrymme-logotyp.png +0 -0
  22. package/src/assets/images/ISO_27001_2013_black_TM.svg +0 -1
  23. package/src/assets/images/KPA_0996.jpg +0 -0
  24. package/src/assets/images/KPA_3810.jpg +0 -0
  25. package/src/assets/images/KPA_4156.jpg +0 -0
  26. package/src/assets/images/KPA_4198.jpg +0 -0
  27. package/src/assets/images/KPA_4516.jpg +0 -0
  28. package/src/assets/images/KPA_5081.jpg +0 -0
  29. package/src/assets/images/KPA_5090-5-4.jpg +0 -0
  30. package/src/assets/images/KPA_5090.jpg +0 -0
  31. package/src/assets/images/author.png +0 -0
  32. package/src/assets/images/bildmaner.jpg +0 -0
  33. package/src/assets/images/bluffmejl.png +0 -0
  34. package/src/assets/images/bredbandskollen.svg +0 -63
  35. package/src/assets/images/card.png +0 -0
  36. package/src/assets/images/digitala-lektioner.svg +0 -90
  37. package/src/assets/images/goto-10.svg +0 -62
  38. package/src/assets/images/goto10_exempel1-1024x580.jpg +0 -0
  39. package/src/assets/images/goto10_exempel2-1024x580.jpg +0 -0
  40. package/src/assets/images/goto10_exempel3-1024x580.jpg +0 -0
  41. package/src/assets/images/goto10_grid-1024x580.jpg +0 -0
  42. package/src/assets/images/goto10_monster-1024x580.jpg +0 -0
  43. package/src/assets/images/hero.jpg +0 -0
  44. package/src/assets/images/icon-arrow-down.svg +0 -3
  45. package/src/assets/images/icon-checkbox-checked.svg +0 -10
  46. package/src/assets/images/icon-checkbox.svg +0 -8
  47. package/src/assets/images/icon-radiobutton-checked.svg +0 -13
  48. package/src/assets/images/icon-radiobutton.svg +0 -10
  49. package/src/assets/images/internetdagarna.svg +0 -91
  50. package/src/assets/images/internetkunskap.svg +0 -80
  51. package/src/assets/images/internetmuseum.svg +0 -85
  52. package/src/assets/images/internetstiftelsen.svg +0 -36
  53. package/src/assets/images/placeringsriktlinjer.png +0 -0
  54. package/src/assets/images/punktse.svg +0 -96
  55. package/src/assets/images/search-hit.png +0 -0
  56. package/src/assets/images/svenskarna-och-internet.svg +0 -69
  57. package/src/assets/images/tiny-hero.png +0 -0
  58. package/src/assets/zip/Goto_10_monster.zip +0 -0
  59. package/src/assets/zip/Internetstiftelsen-logotyp.zip +0 -0
  60. package/src/assets/zip/goto10-logo.zip +0 -0
  61. package/src/assets/zip/undervarumarken.zip +0 -0
  62. package/src/atoms/.DS_Store +0 -0
  63. package/src/atoms/archive-link/archive-link.hbs +0 -8
  64. package/src/atoms/button/button.hbs +0 -13
  65. package/src/atoms/checkbox/checkbox.hbs +0 -24
  66. package/src/atoms/file/file.hbs +0 -16
  67. package/src/atoms/grid-toggle/grid-toggle.hbs +0 -3
  68. package/src/atoms/height-limiter/height-limiter.hbs +0 -13
  69. package/src/atoms/icon/.DS_Store +0 -0
  70. package/src/atoms/icon/icon.hbs +0 -7
  71. package/src/atoms/input/input.hbs +0 -18
  72. package/src/atoms/label/label.hbs +0 -1
  73. package/src/atoms/logotype/logotype.hbs +0 -7
  74. package/src/atoms/main-menu/main-menu.hbs +0 -75
  75. package/src/atoms/meta/meta.hbs +0 -1
  76. package/src/atoms/paging/paging.hbs +0 -7
  77. package/src/atoms/password-toggle/password-toggle.hbs +0 -19
  78. package/src/atoms/quote/quote.hbs +0 -9
  79. package/src/atoms/radiobutton/radiobutton.hbs +0 -13
  80. package/src/atoms/rating/rating.hbs +0 -15
  81. package/src/atoms/ribbon/ribbon.hbs +0 -65
  82. package/src/atoms/select/select.hbs +0 -17
  83. package/src/atoms/skip/skip.hbs +0 -5
  84. package/src/atoms/spinner/spinner.hbs +0 -3
  85. package/src/atoms/tag/tag.hbs +0 -1
  86. package/src/atoms/textarea/textarea.hbs +0 -32
  87. package/src/atoms/toggle-high-contrast/toggle-high-contrast.hbs +0 -6
  88. package/src/atoms/tooltip/tooltip.hbs +0 -13
  89. package/src/brandbook/goto10/goto10.hbs +0 -225
  90. package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.hbs +0 -74
  91. package/src/brandbook/internetstiftelsen/identitet/identitet.hbs +0 -426
  92. package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.hbs" +0 -79
  93. package/src/configurations/colors/colors.hbs +0 -85
  94. package/src/configurations/css-utility-classes.hbs +0 -47
  95. package/src/configurations/favicon/favicon.hbs +0 -9
  96. package/src/configurations/grid/grid.hbs +0 -785
  97. package/src/configurations/typography/typography.hbs +0 -186
  98. package/src/molecules/.DS_Store +0 -0
  99. package/src/molecules/alert/alert.hbs +0 -12
  100. package/src/molecules/breadcrumb/breadcrumb.hbs +0 -12
  101. package/src/molecules/byline/byline.hbs +0 -20
  102. package/src/molecules/card/card.hbs +0 -55
  103. package/src/molecules/context-menu/context-menu.hbs +0 -14
  104. package/src/molecules/cookie-disclaimer/cookie-disclaimer.hbs +0 -14
  105. package/src/molecules/download/download.hbs +0 -27
  106. package/src/molecules/form/form.hbs +0 -60
  107. package/src/molecules/form-control/form-control.hbs +0 -75
  108. package/src/molecules/glider/glider--course.hbs +0 -127
  109. package/src/molecules/glider/glider.hbs +0 -39
  110. package/src/molecules/icon-overlay/icon-overlay.hbs +0 -4
  111. package/src/molecules/info-box/info-box.hbs +0 -8
  112. package/src/molecules/modal/modal.hbs +0 -101
  113. package/src/molecules/natural-language-form/natural-language-form.hbs +0 -19
  114. package/src/molecules/share/share.hbs +0 -28
  115. package/src/molecules/submenu/submenu.hbs +0 -68
  116. package/src/molecules/system-error/system-error.hbs +0 -9
  117. package/src/molecules/table/table.hbs +0 -72
  118. package/src/molecules/teaser-news-list/teaser-news-list.hbs +0 -16
  119. package/src/molecules/timeline-navigation/timeline-navigation.hbs +0 -83
  120. package/src/organisms/accordion/accordion.hbs +0 -38
  121. package/src/organisms/domain-search/domain-search.hbs +0 -50
  122. package/src/organisms/event-listing-item/event-listing-item.hbs +0 -27
  123. package/src/organisms/features-box/features-box.hbs +0 -24
  124. package/src/organisms/filter/filter.hbs +0 -100
  125. package/src/organisms/footer/footer.hbs +0 -157
  126. package/src/organisms/header/header.hbs +0 -15
  127. package/src/organisms/hero/hero.hbs +0 -57
  128. package/src/organisms/mailchimp/mailchimp.hbs +0 -146
  129. package/src/organisms/map-box/map-box.hbs +0 -8
  130. package/src/organisms/mega-menu/mega-menu.hbs +0 -95
  131. package/src/organisms/podcast/podcast--episode-list.hbs +0 -8
  132. package/src/organisms/podcast/podcast--hero.hbs +0 -5
  133. package/src/organisms/podcast/podcast--single-episode.hbs +0 -48
  134. package/src/organisms/podcast/podcast.hbs +0 -43
  135. package/src/organisms/search-result/search-result.hbs +0 -95
  136. package/src/organisms/sections/sections.hbs +0 -52
  137. package/src/organisms/tabs/tabs.hbs +0 -15
  138. package/src/pages/animate-footer/animate-footer.hbs +0 -78
  139. package/src/pages/conditional/conditional.hbs +0 -36
  140. package/src/pages/grid-block/grid-block.hbs +0 -185
  141. package/src/pages/internetguider/internetguider.hbs +0 -98
  142. package/src/pages/magazine/magazine.hbs +0 -60
  143. package/src/pages/mailchimp-newsletter/mailchimp-newsletter.hbs +0 -4
  144. package/src/pages/responsive-position/responsive-position.hbs +0 -7
  145. package/src/pages/search/search.hbs +0 -40
  146. package/src/pages/timeline/timeline.hbs +0 -53
  147. package/src/pages/wordpress-blocks/wordpress-blocks.hbs +0 -99
package/src/configurations/grid/grid.hbs DELETED
@@ -1,785 +0,0 @@
1
- <style>
2
- .styleguide-visible-grid {
3
- background-color: #0477ce;
4
- margin-bottom: 1rem;
5
- color: #fff;
6
- }
7
-
8
- .styleguide-align-containers {
9
- background-color: #a7d8fd;
10
- height: 100px;
11
- margin-bottom: 2rem;
12
- color: #fff;
13
- }
14
-
15
- .align-items-stretch .styleguide-visible-grid {
16
- min-height: 100%;
17
- }
18
-
19
- code {
20
- background-color: #ededed;
21
- }
22
- </style>
23
-
24
- <div class="wrapper u-p-y-4" id="content">
25
- <div class="row">
26
- <div class="grid-sm-12 grid-18">
27
- <h1>Gridsystem</h1>
28
- <p class="preamble">Internetstiftelsens layout-grid är en 18-kolumnsgrid med 20 pixlars gap mellan varje kolumn, 10 pixlar på varje sida. Griden är baserad på flexbox.</p>
29
- </div>
30
- </div>
31
-
32
- <div class="row">
33
- <div class="grid-sm-12 grid-18">
34
- <h2>Wrapper och Row</h2>
35
- <p>För att hålla dina containers på plats används en omgivande container med klassen <code>.wrapper</code>. Denna ser till att kolumnerna centreras och får en maxbredd på 1360px. Vill man ha en fullbred layout behövs inte denna omgivande container.</p>
36
- <p>För varje rad med kolumner används en omgivande container med klassen <code>.row</code></p>
37
- </div>
38
- </div>
39
-
40
- <div class="row">
41
- <div class="grid-18">
42
- <h2>Kolumner</h2>
43
- <p>Det finns totalt 18 kolumner. För att styra hur många kolumner en container ska ta upp används klasserna <code>.grid-{columns}</code>.</p>
44
- </div>
45
- </div>
46
- <div class="row">
47
- <div class="grid-1">
48
- <div class="styleguide-visible-grid">
49
- .grid-1
50
- </div>
51
- </div>
52
- <div class="grid-17">
53
- <div class="styleguide-visible-grid">
54
- .grid-17
55
- </div>
56
- </div>
57
- </div>
58
- <div class="row">
59
- <div class="grid-2">
60
- <div class="styleguide-visible-grid">
61
- .grid-2
62
- </div>
63
- </div>
64
- <div class="grid-16">
65
- <div class="styleguide-visible-grid">
66
- .grid-16
67
- </div>
68
- </div>
69
- </div>
70
- <div class="row">
71
- <div class="grid-3">
72
- <div class="styleguide-visible-grid">
73
- .grid-3
74
- </div>
75
- </div>
76
- <div class="grid-15">
77
- <div class="styleguide-visible-grid">
78
- .grid-15
79
- </div>
80
- </div>
81
- </div>
82
- <div class="row">
83
- <div class="grid-4">
84
- <div class="styleguide-visible-grid">
85
- .grid-4
86
- </div>
87
- </div>
88
- <div class="grid-14">
89
- <div class="styleguide-visible-grid">
90
- .grid-14
91
- </div>
92
- </div>
93
- </div>
94
- <div class="row">
95
- <div class="grid-5">
96
- <div class="styleguide-visible-grid">
97
- .grid-5
98
- </div>
99
- </div>
100
- <div class="grid-13">
101
- <div class="styleguide-visible-grid">
102
- .grid-13
103
- </div>
104
- </div>
105
- </div>
106
- <div class="row">
107
- <div class="grid-6">
108
- <div class="styleguide-visible-grid">
109
- .grid-6
110
- </div>
111
- </div>
112
- <div class="grid-12">
113
- <div class="styleguide-visible-grid">
114
- .grid-12
115
- </div>
116
- </div>
117
- </div>
118
- <div class="row">
119
- <div class="grid-7">
120
- <div class="styleguide-visible-grid">
121
- .grid-7
122
- </div>
123
- </div>
124
- <div class="grid-11">
125
- <div class="styleguide-visible-grid">
126
- .grid-11
127
- </div>
128
- </div>
129
- </div>
130
- <div class="row">
131
- <div class="grid-8">
132
- <div class="styleguide-visible-grid">
133
- .grid-8
134
- </div>
135
- </div>
136
- <div class="grid-10">
137
- <div class="styleguide-visible-grid">
138
- .grid-10
139
- </div>
140
- </div>
141
- </div>
142
- <div class="row">
143
- <div class="grid-9">
144
- <div class="styleguide-visible-grid">
145
- .grid-9
146
- </div>
147
- </div>
148
- <div class="grid-9">
149
- <div class="styleguide-visible-grid">
150
- .grid-9
151
- </div>
152
- </div>
153
- </div>
154
- <div class="row">
155
- <div class="grid-10">
156
- <div class="styleguide-visible-grid">
157
- .grid-10
158
- </div>
159
- </div>
160
- <div class="grid-8">
161
- <div class="styleguide-visible-grid">
162
- .grid-8
163
- </div>
164
- </div>
165
- </div>
166
- <div class="row">
167
- <div class="grid-11">
168
- <div class="styleguide-visible-grid">
169
- .grid-11
170
- </div>
171
- </div>
172
- <div class="grid-7">
173
- <div class="styleguide-visible-grid">
174
- .grid-7
175
- </div>
176
- </div>
177
- </div>
178
-
179
- <div class="row">
180
- <div class="grid-12">
181
- <div class="styleguide-visible-grid">
182
- .grid-12
183
- </div>
184
- </div>
185
- <div class="grid-6">
186
- <div class="styleguide-visible-grid">
187
- .grid-6
188
- </div>
189
- </div>
190
- </div>
191
-
192
- <div class="row">
193
- <div class="grid-13">
194
- <div class="styleguide-visible-grid">
195
- .grid-13
196
- </div>
197
- </div>
198
- <div class="grid-5">
199
- <div class="styleguide-visible-grid">
200
- .grid-5
201
- </div>
202
- </div>
203
- </div>
204
-
205
- <div class="row">
206
- <div class="grid-14">
207
- <div class="styleguide-visible-grid">
208
- .grid-14
209
- </div>
210
- </div>
211
- <div class="grid-4">
212
- <div class="styleguide-visible-grid">
213
- .grid-4
214
- </div>
215
- </div>
216
- </div>
217
-
218
- <div class="row">
219
- <div class="grid-15">
220
- <div class="styleguide-visible-grid">
221
- .grid-15
222
- </div>
223
- </div>
224
- <div class="grid-3">
225
- <div class="styleguide-visible-grid">
226
- .grid-3
227
- </div>
228
- </div>
229
- </div>
230
-
231
- <div class="row">
232
- <div class="grid-16">
233
- <div class="styleguide-visible-grid">
234
- .grid-16
235
- </div>
236
- </div>
237
- <div class="grid-2">
238
- <div class="styleguide-visible-grid">
239
- .grid-2
240
- </div>
241
- </div>
242
- </div>
243
-
244
- <div class="row">
245
- <div class="grid-17">
246
- <div class="styleguide-visible-grid">
247
- .grid-17
248
- </div>
249
- </div>
250
- <div class="grid-1">
251
- <div class="styleguide-visible-grid">
252
- .grid-1
253
- </div>
254
- </div>
255
- </div>
256
-
257
- <div class="row u-m-b-4">
258
- <div class="grid-18">
259
- <div class="styleguide-visible-grid">
260
- .grid-18
261
- </div>
262
- </div>
263
- </div>
264
-
265
- <div class="row">
266
- <div class="grid-sm-12 grid-18">
267
- <h2>Dynamisk kolumnbredd</h2>
268
- <p>Om en container alltid ska ta upp resterande tillgänglig yta behöver den bara ges klassen <code>.grid</code></p>
269
- </div>
270
- </div>
271
-
272
- <div class="row u-m-b-4">
273
- <div class="grid-2">
274
- <div class="styleguide-visible-grid">
275
- .grid-2
276
- </div>
277
- </div>
278
- <div class="grid-4">
279
- <div class="styleguide-visible-grid">
280
- .grid-4
281
- </div>
282
- </div>
283
- <div class="grid">
284
- <div class="styleguide-visible-grid">
285
- .grid
286
- </div>
287
- </div>
288
- </div>
289
-
290
- <div class="row">
291
- <div class="grid-sm-12 grid-18">
292
- <h2>Kolumnbredd baserad på innehåll</h2>
293
- <p>Om en container alltid ska ta upp samma yta som dess innehåll används klasserna <code>.grid-auto</code> eller <code>.grid-{breakpoint}-auto</code> <a href="#breakpoints">Läs mer om breakpoints</a>.</p>
294
- </div>
295
- </div>
296
-
297
- <div class="row u-m-b-4">
298
- <div class="grid-md-auto">
299
- <div class="styleguide-visible-grid">
300
- .grid-md-auto
301
- </div>
302
- </div>
303
- <div class="grid-6">
304
- <div class="styleguide-visible-grid">
305
- .grid-6
306
- </div>
307
- </div>
308
- <div class="grid">
309
- <div class="styleguide-visible-grid">
310
- .grid
311
- </div>
312
- </div>
313
- </div>
314
-
315
- <div class="row">
316
- <div class="grid-sm-12 grid-18">
317
- <h2 id="breakpoints">Breakpoints</h2>
318
- <p>Det finns 7 olika fasta breakpoints. Där emellan är containrarnas bredd dynamisk. Dessa breakpoints är följande:</p>
319
- <ul>
320
- <li><code>xs: 0</code> < 469px</li>
321
- <li><code>sm-xs: 469px</code> ≥ 469px</li>
322
- <li><code>sm: 576px</code> ≥ 576px</li>
323
- <li><code>md: 769px</code> ≥ 769px</li>
324
- <li><code>lg: 961px</code> ≥ 961px</li>
325
- <li><code>xl: 1200px</code> ≥ 1200px</li>
326
- <li><code>xxl: 1400px</code> ≥ 1400px</li>
327
- </ul>
328
- <p>För att ge en kolumn en viss bredd vid en viss breakpoint använd klasserna <code>.grid-{breakpoint}-{columns}</code></p>
329
- <p><strong>OBS!</strong>: Du behöver bara ange den minsta breakpoint där du vill att det ska slå igenom. Vid lägsta breakpointen <code>xs</code> anges inget prefix utan då används istället <code>.grid-{columns}</code></p>
330
- </div>
331
- </div>
332
- <div class="row">
333
- <div class="grid-sm-6 grid-18">
334
- <div class="styleguide-visible-grid">
335
- .grid-sm-6 .grid-18
336
- </div>
337
- </div>
338
- <div class="grid-sm-12 grid-18">
339
- <div class="styleguide-visible-grid">
340
- .grid-sm-12 .grid-18
341
- </div>
342
- </div>
343
- </div>
344
- <div class="row">
345
- <div class="grid-sm-9 grid-18">
346
- <div class="styleguide-visible-grid">
347
- .grid-sm-9 .grid-18
348
- </div>
349
- </div>
350
- <div class="grid-sm-9 grid-18">
351
- <div class="styleguide-visible-grid">
352
- .grid-sm-9 .grid-18
353
- </div>
354
- </div>
355
- </div>
356
- <div class="row u-m-b-4 u-m-b-4">
357
- <div class="grid-sm-12 grid-18">
358
- <div class="styleguide-visible-grid">
359
- .grid-sm-12 .grid-18
360
- </div>
361
- </div>
362
- <div class="grid-sm-6 grid-18">
363
- <div class="styleguide-visible-grid">
364
- .grid-sm-6 .grid-18
365
- </div>
366
- </div>
367
- </div>
368
-
369
- <div class="row">
370
- <div class="grid-sm-12 grid-18">
371
- <h2>Vertikal linjering</h2>
372
- <p>Du kan få dina containers att linjera upptill, nertill eller ligga centrerade inuti sin parent. Applicera klasserna <code>.align-items-start</code> <code>.align-items-end</code> eller <code>.align-items-center</code> på din <code>.row</code></p>
373
- <p>Samtliga dessa klasser går att kombinera med breakpoints <code>.align-items-{breakpoint}-start</code></p>
374
- </div>
375
- </div>
376
- .align-items-start
377
- <div class="row align-items-start styleguide-align-containers">
378
- <div class="grid-9">
379
- <div class="styleguide-visible-grid u-m-b-0">
380
- .grid-9
381
- </div>
382
- </div>
383
- <div class="grid-9">
384
- <div class="styleguide-visible-grid u-m-b-0">
385
- .grid-9
386
- </div>
387
- </div>
388
- </div>
389
- .align-items-end
390
- <div class="row align-items-end styleguide-align-containers">
391
- <div class="grid-9">
392
- <div class="styleguide-visible-grid u-m-b-0">
393
- .grid-9
394
- </div>
395
- </div>
396
- <div class="grid-9">
397
- <div class="styleguide-visible-grid u-m-b-0">
398
- .grid-9
399
- </div>
400
- </div>
401
- </div>
402
- .align-items-center
403
- <div class="row align-items-center styleguide-align-containers">
404
- <div class="grid-9">
405
- <div class="styleguide-visible-grid u-m-b-0">
406
- .grid-9
407
- </div>
408
- </div>
409
- <div class="grid-9">
410
- <div class="styleguide-visible-grid u-m-b-0">
411
- .grid-9
412
- </div>
413
- </div>
414
- </div>
415
- .align-items-baseline
416
- <div class="row align-items-baseline styleguide-align-containers">
417
- <div class="grid-9">
418
- <div class="styleguide-visible-grid u-m-b-0">
419
- .grid-9
420
- </div>
421
- </div>
422
- <div class="grid-9">
423
- <div class="styleguide-visible-grid u-m-b-0">
424
- .grid-9
425
- </div>
426
- </div>
427
- </div>
428
- .align-items-stretch
429
- <div class="row align-items-stretch styleguide-align-containers">
430
- <div class="grid-9">
431
- <div class="styleguide-visible-grid u-m-b-0">
432
- .grid-9
433
- </div>
434
- </div>
435
- <div class="grid-9">
436
- <div class="styleguide-visible-grid u-m-b-0">
437
- .grid-9
438
- </div>
439
- </div>
440
- </div>
441
-
442
- <div class="row">
443
- <div class="grid-sm-12 grid-18">
444
- <h2>Horizontell linjering</h2>
445
- <p>Du kan få dina containers att linjera vänster, höger eller ligga centrerade inuti sin parent. Applicera klasserna <code>.justify-content-start</code>, <code>.justify-content-end</code> eller <code>.justify-content-center</code> på din <code>.row</code></p>
446
- <p>Samtliga dessa klasser går att kombinera med breakpoints <code>.justify-content-{breakpoint}-start</code></p>
447
- </div>
448
- </div>
449
- .justify-content-start
450
- <div class="row justify-content-start align-items-center styleguide-align-containers">
451
- <div class="grid-3">
452
- <div class="styleguide-visible-grid u-m-b-0">
453
- .grid-3
454
- </div>
455
- </div>
456
- <div class="grid-3">
457
- <div class="styleguide-visible-grid u-m-b-0">
458
- .grid-3
459
- </div>
460
- </div>
461
- </div>
462
- .justify-content-end
463
- <div class="row justify-content-end align-items-center styleguide-align-containers">
464
- <div class="grid-3">
465
- <div class="styleguide-visible-grid u-m-b-0">
466
- .grid-3
467
- </div>
468
- </div>
469
- <div class="grid-3">
470
- <div class="styleguide-visible-grid u-m-b-0">
471
- .grid-3
472
- </div>
473
- </div>
474
- </div>
475
- .justify-content-center
476
- <div class="row justify-content-center align-items-center styleguide-align-containers">
477
- <div class="grid-3">
478
- <div class="styleguide-visible-grid u-m-b-0">
479
- .grid-3
480
- </div>
481
- </div>
482
- <div class="grid-3">
483
- <div class="styleguide-visible-grid u-m-b-0">
484
- .grid-3
485
- </div>
486
- </div>
487
- </div>
488
-
489
- .justify-content-around
490
- <div class="row justify-content-around align-items-center styleguide-align-containers">
491
- <div class="grid-3">
492
- <div class="styleguide-visible-grid u-m-b-0">
493
- .grid-3
494
- </div>
495
- </div>
496
- <div class="grid-3">
497
- <div class="styleguide-visible-grid u-m-b-0">
498
- .grid-3
499
- </div>
500
- </div>
501
- </div>
502
-
503
- .justify-content-between
504
- <div class="row justify-content-between align-items-center styleguide-align-containers">
505
- <div class="grid-3">
506
- <div class="styleguide-visible-grid u-m-b-0">
507
- .grid-3
508
- </div>
509
- </div>
510
- <div class="grid-3">
511
- <div class="styleguide-visible-grid u-m-b-0">
512
- .grid-3
513
- </div>
514
- </div>
515
- </div>
516
-
517
- <div class="row">
518
- <div class="grid-sm-12 grid-18">
519
- <h2>Blanda</h2>
520
- <p>Du kan även blanda mellan dessa alternativ</p>
521
- </div>
522
- </div>
523
- .align-items-center.justify-content-center
524
- <div class="row align-items-center justify-content-center styleguide-align-containers">
525
- <div class="grid-3">
526
- <div class="styleguide-visible-grid u-m-b-0">
527
- .grid-3
528
- </div>
529
- </div>
530
- <div class="grid-3">
531
- <div class="styleguide-visible-grid u-m-b-0">
532
- .grid-3
533
- </div>
534
- </div>
535
- </div>
536
-
537
- <div class="row">
538
- <div class="grid-sm-12 grid-18">
539
- <h2>Ordning</h2>
540
- <p>Eftersom flexbox stöder <strong>order</strong> så kan man även ändra ordning på kolumnerna i griden med <code>.order-{column}</code> eller <code>.order-{breakpoint}-{column}</code>. På så sätt kan man få till en visuell ändring av ordningen utan att logiken i markupen påverkas.</p>
541
- </div>
542
- </div>
543
-
544
- Först men sist
545
- <div class="row align-items-center justify-content-center styleguide-align-containers">
546
- <div class="grid-6 order-2">
547
- <div class="styleguide-visible-grid u-m-b-0">
548
- .order-2
549
- </div>
550
- </div>
551
- <div class="grid-6 order-1">
552
- <div class="styleguide-visible-grid u-m-b-0">
553
- .order-1
554
- </div>
555
- </div>
556
- </div>
557
-
558
- <div class="row align-items-center justify-content-center styleguide-align-containers u-m-b-4">
559
- <div class="grid-6 order-lg-2">
560
- <div class="styleguide-visible-grid u-m-b-0">
561
- .order-2
562
- </div>
563
- </div>
564
- <div class="grid-6 order-lg-1">
565
- <div class="styleguide-visible-grid u-m-b-0">
566
- .order-lg-1
567
- </div>
568
- </div>
569
- </div>
570
-
571
- <div class="row">
572
- <div class="grid-sm-12 grid-18">
573
- <h2>Inget mellanrum</h2>
574
- <p>Om det finns behov av att ta bort mellanrummet mellan containers kan klassen <code>.no-gutters</code> användas på <code>.row</code></p>
575
- </div>
576
- </div>
577
- <div class="row styleguide-align-containers align-items-center no-gutters u-m-b-4">
578
- <div class="grid-9">
579
- <div class="styleguide-visible-grid u-m-b-0">
580
- .grid-9
581
- </div>
582
- </div>
583
- <div class="grid-9">
584
- <div class="styleguide-visible-grid u-m-b-0">
585
- .grid-9
586
- </div>
587
- </div>
588
- </div>
589
-
590
- <div class="row">
591
- <div class="grid-sm-12 grid-18">
592
- <h2>Offset</h2>
593
- <p>Om det finns behov av att "putta" kolumner används margins, t.ex. <code>.ml-auto</code> (margin-left: auto), <code>.mr-auto</code> (margin-right: auto) eller <code>.ml-{breakpoint}-auto</code> om det bara ska ske vid vissa breakpoints.</p>
594
- <p>Det går även att putta en kolumner med ett visst antal kolummner t.ex. <code>.offset-{breakpoint}-{columns}</code></p>
595
- </div>
596
- </div>
597
-
598
- <div class="row align-items-center styleguide-align-containers">
599
- <div class="grid-md-4">
600
- <div class="styleguide-visible-grid u-m-b-0">
601
- .grid-md-4
602
- </div>
603
- </div>
604
- <div class="grid-md-4 ml-auto">
605
- <div class="styleguide-visible-grid u-m-b-0">
606
- .grid-md-4 .ml-auto
607
- </div>
608
- </div>
609
- </div>
610
- <div class="row align-items-center styleguide-align-containers">
611
- <div class="grid-md-3 ml-md-auto">
612
- <div class="styleguide-visible-grid u-m-b-0">
613
- .grid-md-3 .ml-md-auto
614
- </div>
615
- </div>
616
- <div class="grid-md-3 mr-md-auto">
617
- <div class="styleguide-visible-grid u-m-b-0">
618
- .grid-md-3 .ml-md-auto
619
- </div>
620
- </div>
621
- </div>
622
- <div class="row align-items-center styleguide-align-containers u-m-b-4">
623
- <div class="grid-auto mr-auto">
624
- <div class="styleguide-visible-grid u-m-b-0">
625
- .grid-auto .mr-auto
626
- </div>
627
- </div>
628
- <div class="grid-auto">
629
- <div class="styleguide-visible-grid u-m-b-0">
630
- .grid-auto
631
- </div>
632
- </div>
633
- </div>
634
- <div class="row align-items-center styleguide-align-containers u-m-b-4">
635
- <div class="grid-auto offset-3">
636
- <div class="styleguide-visible-grid u-m-b-0">
637
- .offset-3
638
- </div>
639
- </div>
640
- <div class="grid-auto">
641
- <div class="styleguide-visible-grid u-m-b-0">
642
- .grid-auto
643
- </div>
644
- </div>
645
- </div>
646
- <div class="row align-items-center styleguide-align-containers u-m-b-4">
647
- <div class="grid-auto offset-lg-5">
648
- <div class="styleguide-visible-grid u-m-b-0">
649
- .offset-lg-5
650
- </div>
651
- </div>
652
- <div class="grid-auto">
653
- <div class="styleguide-visible-grid u-m-b-0">
654
- .grid-auto
655
- </div>
656
- </div>
657
- </div>
658
-
659
- <h2>Wordpress gutenberg columns block grid</h2>
660
-
661
- <div class="row background-ocean-light u-m-b-4">
662
- <div class="grid-18">
663
- <div class="wp-block-columns">
664
- <div class="wp-block-column background-ocean-dark color-snow">
665
- 50%
666
- </div>
667
- <div class="wp-block-column background-ocean-dark color-snow">
668
- 50%
669
- </div>
670
- </div>
671
- </div>
672
- </div>
673
-
674
- <h2>Two columns; one-third, two-thirds split</h2>
675
-
676
- <div class="row background-ocean-light u-m-b-4">
677
- <div class="grid-18">
678
- <div class="wp-block-columns">
679
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
680
- 33%
681
- </div>
682
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 66.66%">
683
- 66%
684
- </div>
685
- </div>
686
-
687
- <div class="wp-block-columns">
688
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 66.66%">
689
- 66%
690
- </div>
691
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
692
- 33%
693
- </div>
694
- </div>
695
- </div>
696
- </div>
697
-
698
- <h2>Three columns; equal split</h2>
699
-
700
- <div class="row background-ocean-light u-m-b-4">
701
- <div class="grid-18">
702
- <div class="wp-block-columns">
703
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
704
- <p>33%</p>
705
- </div>
706
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
707
- <p>33%</p>
708
- </div>
709
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
710
- <p>33%</p>
711
- </div>
712
- </div>
713
- </div>
714
- </div>
715
-
716
- <h2>Three columns; wide center column</h2>
717
-
718
- <div class="row background-ocean-light u-m-b-4">
719
- <div class="grid-18">
720
- <div class="wp-block-columns">
721
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 25%">
722
- <p>25%</p>
723
- </div>
724
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 50%">
725
- 50%
726
- </div>
727
- <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 25%">
728
- <p>25%</p>
729
- </div>
730
- </div>
731
-
732
- <h2>One column</h2>
733
-
734
- <div class="wp-block-columns">
735
- <div class="wp-block-column background-ocean-dark color-snow">
736
- <p>100%</p>
737
- </div>
738
- </div>
739
- </div>
740
- </div>
741
-
742
- <div class="row">
743
- <div class="grid-sm-12 grid-18">
744
- <h2>Asymmetrisk grid</h2>
745
- <p>Placera kolumner asymmetriskt<p>
746
- </div>
747
- </div>
748
-
749
- <div class="row asymmetric-sm">
750
- <div class="grid-18 grid-sm-6">
751
- <div class="styleguide-visible-grid">
752
- Column 1
753
- </div>
754
- </div>
755
- <div class="grid-18 grid-sm-6">
756
- <div class="styleguide-visible-grid">
757
- Column 2
758
- </div>
759
- </div>
760
- <div class="grid-18 grid-sm-6">
761
- <div class="styleguide-visible-grid">
762
- Column 3
763
- </div>
764
- </div>
765
- </div>
766
-
767
- <div class="row asymmetric-sm asymmetric-reversed">
768
- <div class="grid-18 grid-sm-6">
769
- <div class="styleguide-visible-grid">
770
- Column 1
771
- </div>
772
- </div>
773
- <div class="grid-18 grid-sm-6">
774
- <div class="styleguide-visible-grid">
775
- Column 2
776
- </div>
777
- </div>
778
- <div class="grid-18 grid-sm-6">
779
- <div class="styleguide-visible-grid">
780
- Column 3
781
- </div>
782
- </div>
783
- </div>
784
- </div>
785
- </div>