mp-design-system 0.9.17 → 0.9.25
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/build/arc.a8e07ecd.svg +1 -0
- package/dist/build/crystal.a90c9e1f.svg +1 -0
- package/dist/build/dots-pattern.1b95f054.svg +1 -0
- package/dist/build/js/app.js +1 -1
- package/dist/build/js/app.js.map +1 -1
- package/dist/build/scss/library.css +1 -1
- package/dist/build/scss/library.css.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +1 -1
- package/src/_includes/components/accordion/accordion.md +1 -1
- package/src/_includes/components/breadcrumb/breadcrumb.config.js +6 -4
- package/src/_includes/components/breadcrumb/breadcrumb.njk +18 -2
- package/src/_includes/components/breadcrumb/breadcrumb.scss +69 -0
- package/src/_includes/components/button/button.config.js +14 -1
- package/src/_includes/components/button/button.scss +34 -1
- package/src/_includes/components/campaign/campaign.config.js +4 -2
- package/src/_includes/components/card/card.config.js +43 -1
- package/src/_includes/components/card/card.scss +32 -0
- package/src/_includes/components/component/component.njk +2 -2
- package/src/_includes/components/gallery/gallery.config.js +34 -8
- package/src/_includes/components/gallery/gallery.md +1 -0
- package/src/_includes/components/gallery/gallery.njk +0 -1
- package/src/_includes/components/gallery/gallery.scss +7 -8
- package/src/_includes/components/input/radio.scss +21 -1
- package/src/_includes/components/post-meta/post-meta.njk +2 -2
- package/src/_includes/components/slat/slat.config.js +12 -0
- package/src/_includes/components/slat/slat.scss +14 -0
- package/src/_includes/components/table/table.config.js +7 -6
- package/src/_includes/components/table/table.md +16 -0
- package/src/_includes/components/table/table.scss +9 -0
- package/src/_includes/components/tabs/tabs.config.js +22 -3
- package/src/_includes/components/tabs/tabs.njk +1 -1
- package/src/_includes/components/tabs/tabs.scss +4 -0
- package/src/_includes/includes/system-header.njk +1 -1
- package/src/_includes/layout.njk +10 -5
- package/src/_includes/library-navigation/brand-nav.njk +1 -0
- package/src/_includes/library-navigation/components-nav.njk +1 -0
- package/src/assets/js/imports/accordion.js +0 -2
- package/src/assets/scss/components/index.scss +1 -0
- package/src/assets/scss/elements/reset.scss +2 -1
- package/src/assets/scss/foundations/animation.scss +4 -0
- package/src/assets/scss/foundations/index.scss +2 -1
- package/src/assets/scss/library.scss +9 -6
- package/src/assets/scss/objects/syntax-highlighting.scss +4 -0
- package/src/assets/scss/tools/cutoff.scss +21 -31
- package/src/assets/scss/utilities/flow.scss +1 -0
- package/src/assets/svg/arc.svg +1 -0
- package/src/assets/svg/crystal.svg +1 -0
- package/src/assets/svg/dots-pattern.svg +1 -1
- package/src/brand/basics.md +4 -3
- package/src/brand/illustration.md +8 -2
- package/src/brand/index.njk +1 -0
- package/src/brand/patterns.njk +43 -0
- package/src/brand/typography.md +12 -5
- package/src/components/creating-a-component.md +1 -1
- package/src/components/flow.njk +31 -18
- package/src/components/iconography.njk +1 -1
- package/src/components/index.njk +1 -0
- package/src/components/installation.md +3 -1
- package/src/components/utilities.md +37 -11
- package/src/content/index.njk +1 -0
- package/src/index.njk +8 -4
- package/src/prototype/product.njk +29 -19
- package/src/static/img/slide-4.webp +0 -0
- package/src/static/img/slide-5.webp +0 -0
- package/src/static/img/slide-6.webp +0 -0
- package/src/static/img/slide-7.webp +0 -0
- package/dist/build/dots-pattern.3c9c2a26.svg +0 -1
- package/src/_includes/components/campaign/campaign.md +0 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<header class="c-library__header u-split">
|
|
4
4
|
<a class="c-library__logo" href="/">
|
|
5
|
-
<img src="/static/svg/logo-small.svg" alt="Home" />
|
|
5
|
+
<img src="/static/svg/logo-small.svg" alt="Home" width="299" height="77" />
|
|
6
6
|
<span class="c-library__logo-name">
|
|
7
7
|
{% for item in config.logo %}
|
|
8
8
|
<span>{{ item }}</span>
|
package/src/_includes/layout.njk
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>{{ fullTitle }}</title>
|
|
8
|
+
{% if description %} <meta name="description" content="{{ description }}" /> {% endif %}
|
|
8
9
|
<meta name="theme-color" content="#005461">
|
|
9
10
|
<meta property="og:type" content="website" />
|
|
10
11
|
<meta property="og:title" content="{{ fullTitle }}" />
|
|
@@ -13,7 +14,12 @@
|
|
|
13
14
|
<meta property="og:image" content="{{ config.openGraphImage }}" />
|
|
14
15
|
<meta property="og:image:alt" content="{{ config.name }}" />
|
|
15
16
|
<meta name="twitter:image" content="{{ config.openGraphImage }}" />
|
|
16
|
-
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
17
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
18
|
+
<link rel="preload" href="/build/Inter-Bold.af5441a3.woff2" as="font" type="font/woff2" crossorigin>
|
|
19
|
+
<link rel="preload" href="/build/Inter-Regular.ed77b881.woff2" as="font" type="font/woff2" crossorigin>
|
|
20
|
+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" as="style">
|
|
21
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.svg">
|
|
22
|
+
<link rel="stylesheet" href="/build/scss/main.css" />
|
|
17
23
|
<script>
|
|
18
24
|
if(document.documentElement){
|
|
19
25
|
document.documentElement.classList.add('has-js');
|
|
@@ -35,12 +41,12 @@
|
|
|
35
41
|
};
|
|
36
42
|
};
|
|
37
43
|
var resizeSidebar = debounce(function() {
|
|
38
|
-
var
|
|
44
|
+
var header = document.querySelector('.c-library__header');
|
|
45
|
+
var headerHeight = header && header.offsetHeight + 'px';
|
|
39
46
|
document.documentElement.style.setProperty('--headerHeight', headerHeight)
|
|
40
47
|
}, 250);
|
|
41
48
|
</script>
|
|
42
|
-
<
|
|
43
|
-
<link rel="stylesheet" href="/build/scss/main.css" />
|
|
49
|
+
<script src="/build/js/app.js" defer></script>
|
|
44
50
|
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
|
|
45
51
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.forEach%2CDOMTokenList.prototype.forEach%2CNodeList.prototype.forEach%2CArray.from"></script>
|
|
46
52
|
{% block head %}{% endblock %}
|
|
@@ -48,7 +54,6 @@
|
|
|
48
54
|
<body class="{{ bodyClass }}">
|
|
49
55
|
{% block inner %}{% endblock %}
|
|
50
56
|
|
|
51
|
-
<script src="/build/js/app.js"></script>
|
|
52
57
|
<script>
|
|
53
58
|
(function() {
|
|
54
59
|
// Prevent empty links from jumping to the top of page when clicked
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
{{ libraryList('Typography', '/brand/typography/', page.url) }}
|
|
13
13
|
{{ libraryList('Photography', '/brand/images/', page.url) }}
|
|
14
14
|
{{ libraryList('Illustration', '/brand/illustration/', page.url) }}
|
|
15
|
+
{{ libraryList('Patterns', '/brand/patterns/', page.url) }}
|
|
15
16
|
</ul>
|
|
16
17
|
{# <h3>Brand identity</h3>
|
|
17
18
|
<ul>
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
{{ libraryList('Flow', '/components/flow/', page.url) }}
|
|
32
32
|
{{ libraryList('Iconography', '/components/iconography/', page.url) }}
|
|
33
33
|
{{ libraryList('Approach to CSS', '/components/css/', page.url) }}
|
|
34
|
+
{{ libraryList('Utilities', '/components/utilities/', page.url) }}
|
|
34
35
|
</ul>
|
|
35
36
|
</div>
|
|
36
37
|
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
|
|
76
76
|
@media only screen and (min-width: 600px) {
|
|
77
77
|
&--components &__body > * {
|
|
78
|
-
overflow-y:
|
|
78
|
+
overflow-y: auto;
|
|
79
79
|
height: calc( 100vh - var(--headerHeight) - 1px );
|
|
80
80
|
}
|
|
81
81
|
}
|
|
@@ -166,9 +166,9 @@
|
|
|
166
166
|
@include step(4);
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
&:nth-last-child(3) {
|
|
170
|
-
color: color('petrol', 'step-1');
|
|
171
|
-
}
|
|
169
|
+
// &:nth-last-child(3) {
|
|
170
|
+
// color: color('petrol', 'step-1');
|
|
171
|
+
// }
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
}
|
|
@@ -253,7 +253,10 @@
|
|
|
253
253
|
width: 100%;
|
|
254
254
|
left: 0;
|
|
255
255
|
top: 0;
|
|
256
|
-
transition:
|
|
256
|
+
transition:
|
|
257
|
+
padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
258
|
+
background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
259
|
+
resize: both;
|
|
257
260
|
|
|
258
261
|
@media only screen and (min-width: 600px) {
|
|
259
262
|
position: absolute;
|
|
@@ -579,7 +582,7 @@
|
|
|
579
582
|
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
|
|
580
583
|
gap:var(--gutter);
|
|
581
584
|
|
|
582
|
-
& :nth-child(odd):nth-last-child(
|
|
585
|
+
& :nth-child(odd):nth-last-child(5) {
|
|
583
586
|
grid-column: 1/-1;
|
|
584
587
|
}
|
|
585
588
|
}
|
|
@@ -1,42 +1,28 @@
|
|
|
1
1
|
// Cutoff corner effect
|
|
2
|
+
@mixin cutoff($corner:"bottom-right", $size:var(--gutter)) {
|
|
3
|
+
|
|
4
|
+
$offset : calc(100% - $size);
|
|
2
5
|
|
|
3
|
-
|
|
4
|
-
$
|
|
6
|
+
// Co-ordinates for the polygon
|
|
7
|
+
$co1: "0 0";
|
|
8
|
+
$co2: "100% 0";
|
|
9
|
+
$co3: "100% 100%";
|
|
10
|
+
$co4: "0 100%";
|
|
5
11
|
|
|
6
|
-
|
|
12
|
+
// Override the basic co-ordinates
|
|
7
13
|
@if $corner == "top-left" {
|
|
8
|
-
|
|
9
|
-
$g 0,
|
|
10
|
-
100% 0,
|
|
11
|
-
100% 100%,
|
|
12
|
-
0 100%,
|
|
13
|
-
0 $g
|
|
14
|
-
);
|
|
14
|
+
$co1: "0 #{$size}, #{$size} 0";
|
|
15
15
|
} @else if $corner == "top-right" {
|
|
16
|
-
|
|
17
|
-
0 0,
|
|
18
|
-
$og 0,
|
|
19
|
-
100% $g,
|
|
20
|
-
100% 100%,
|
|
21
|
-
0 100%
|
|
22
|
-
);
|
|
16
|
+
$co2: "#{$offset} 0, 100% #{$size}";
|
|
23
17
|
} @else if $corner == "bottom-left" {
|
|
24
|
-
|
|
25
|
-
0 0,
|
|
26
|
-
100% 0,
|
|
27
|
-
100% 100%,
|
|
28
|
-
$g 100%,
|
|
29
|
-
0 $og
|
|
30
|
-
);
|
|
18
|
+
$co4: "#{$size} 100%, 0 #{$offset}";
|
|
31
19
|
} @else {
|
|
32
|
-
|
|
33
|
-
0 0,
|
|
34
|
-
100% 0,
|
|
35
|
-
100% $og,
|
|
36
|
-
$og 100%,
|
|
37
|
-
0 100%
|
|
38
|
-
);
|
|
20
|
+
$co3: "100% #{$offset}, #{$offset} 100%";
|
|
39
21
|
}
|
|
22
|
+
|
|
23
|
+
clip-path: polygon(
|
|
24
|
+
#{$co1}, #{$co2}, #{$co3}, #{$co4}
|
|
25
|
+
);
|
|
40
26
|
}
|
|
41
27
|
|
|
42
28
|
.u-cutoff {
|
|
@@ -53,4 +39,8 @@ $og : calc(100% - var(--gutter));
|
|
|
53
39
|
|
|
54
40
|
.u-cutoff--bottom-left {
|
|
55
41
|
@include cutoff("bottom-left")
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.u-cutoff--xl {
|
|
45
|
+
@include cutoff($size: var(--space-xl))
|
|
56
46
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity="0.075"><g clip-path="url(#a)"><path stroke="#3D7B87" d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path stroke="#3D7B87" d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path stroke="#3D7B87" d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path stroke="#3D7B87" d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path stroke="#3D7B87" d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path stroke="#3D7B87" d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path stroke="#3D7B87" d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path stroke="#3D7B87" d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path stroke="#3D7B87" d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path stroke="#3D7B87" d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path stroke="#3D7B87" d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/><circle cx="545.73" cy="65.7" r="6.7" fill="#3D7B87" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" fill="#3D7B87" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" fill="#3D7B87" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" fill="#3D7B87" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" fill="#3D7B87" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" fill="#3D7B87" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" fill="#3D7B87" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" fill="#3D7B87" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" fill="#3D7B87" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" fill="#3D7B87" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" fill="#3D7B87" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" fill="#3D7B87" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" fill="#3D7B87" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" fill="#3D7B87" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" fill="#3D7B87" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" fill="#3D7B87" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" fill="#3D7B87" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" fill="#3D7B87" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5.02" cy="6.18" fill="#3D7B87" rx="5.02" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" fill="#3D7B87" rx="5.02" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" fill="#3D7B87" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" fill="#3D7B87" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" fill="#3D7B87" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" fill="#3D7B87" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" fill="#3D7B87" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" fill="#3D7B87" rx="5.02" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" fill="#3D7B87" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" fill="#3D7B87" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" fill="#3D7B87" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" fill="#3D7B87" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" fill="#3D7B87" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" fill="#3D7B87" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" fill="#3D7B87" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" fill="#3D7B87" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" fill="#3D7B87" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" fill="#3D7B87" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" fill="#3D7B87" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity="0.075" ><g clip-path="url(#a)"><path stroke="#3D7B87" d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path stroke="#3D7B87" d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path stroke="#3D7B87" d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path stroke="#3D7B87" d="m521 406 20 77-62 61-82-14"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 205 131)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 263 359)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 268 68)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 327 295)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 306 221)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 364 449)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 324 585)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 181 631)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 60 179)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 121 405)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 125 115)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 183 343)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 39 390)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 161 269)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 19 315)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 223 494)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 80 541)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 347 84)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 407 311)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 410 22)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 470 249)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 449 175)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 508 401)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 465 539)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 493 36)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 225 205)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 284 433)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 241 571)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 98 618)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 81 253)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 141 481)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 369 158)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 428 385)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 385 523)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 511 113)"/><path stroke="#3D7B87" d="m41 177 23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#004157" opacity=".
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#004157" opacity=".1"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>
|
package/src/brand/basics.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: The basics of our digital brand
|
|
3
|
+
description: A simple style guide for getting started with Malvern Panalytical's Franklin design system
|
|
3
4
|
layout: content-page
|
|
4
5
|
sidebar: brand
|
|
5
6
|
tags: brand
|
|
@@ -14,9 +15,9 @@ status: 'Development'
|
|
|
14
15
|
- We write in American English using [sentence case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).
|
|
15
16
|
|
|
16
17
|
## Buttons
|
|
17
|
-
{% button 'Primary button' %}
|
|
18
|
-
{% button 'Secondary button' '' 'c-button--blue' %}
|
|
19
|
-
{% button 'Tertiary button' '' 'c-button--outline-green' %}
|
|
18
|
+
{% button 'Primary button' '#' %}
|
|
19
|
+
{% button 'Secondary button' '#' 'c-button--blue' %}
|
|
20
|
+
{% button 'Tertiary button' '#' 'c-button--outline-green' %}
|
|
20
21
|
- Primary buttons are always colored MP Green (#13AA13). Please use this color sparingly, for the most important elements on the page.
|
|
21
22
|
- Secondary buttons may be colored MP Blue (#00A2C2), or outlined.
|
|
22
23
|
- The font is Inter Bold, 18px.
|
|
@@ -19,7 +19,7 @@ Our illustration style is still a work-in-progress; currently it follows a few s
|
|
|
19
19
|
- White background
|
|
20
20
|
|
|
21
21
|
## Resources
|
|
22
|
-
We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make
|
|
22
|
+
We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make them available on this site in future.
|
|
23
23
|
|
|
24
24
|
## Examples
|
|
25
25
|
|
|
@@ -35,10 +35,16 @@ We have a library of pre-made characters which can be adapted for new designs, a
|
|
|
35
35
|
|
|
36
36
|
![alt text][opt-in]
|
|
37
37
|
|
|
38
|
+
![alt text][404]
|
|
39
|
+
|
|
40
|
+
![alt text][500]
|
|
41
|
+
|
|
38
42
|
</div>
|
|
39
43
|
|
|
40
44
|
[login]: https://www.malvernpanalytical.com/resource/svg/login3.svg
|
|
41
45
|
[thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
|
|
42
46
|
[support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
|
|
43
47
|
[opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg
|
|
44
|
-
[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg
|
|
48
|
+
[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg
|
|
49
|
+
[404]: https://p3.aprimocdn.net/malvernpanalytical/d88d7c64-76b2-4fa4-8ce0-af7300ce1dd2/error-404_Original%20file.svg
|
|
50
|
+
[500]: https://p3.aprimocdn.net/malvernpanalytical/7d24fb59-5c5f-463a-9bb2-af7300d05c5a/error-500_Original%20file.svg
|
package/src/brand/index.njk
CHANGED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Patterns
|
|
3
|
+
layout: content-page
|
|
4
|
+
sidebar: brand
|
|
5
|
+
tags: brand
|
|
6
|
+
version: 1.0.0
|
|
7
|
+
status: 'Ready'
|
|
8
|
+
---
|
|
9
|
+
{% from "components/header/macro.njk" import header %}
|
|
10
|
+
|
|
11
|
+
<p>We can make our digital designs a bit more visually appealing by adding background patterns and decorative gradients.</p>
|
|
12
|
+
|
|
13
|
+
<div class="o-grid xo-grid--of-two">
|
|
14
|
+
<div class="c-slat c-slat--concentric vh50 u-bg-blue-step-3">
|
|
15
|
+
<div class="o-prose u-flow--prose u-pad-x-s">
|
|
16
|
+
<p>This section has the <strong>concentric rings</strong> background pattern.</p>
|
|
17
|
+
<p>See the <a href="/components/slat-concentric">Slat</a> component for more details.</p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="c-slat c-slat--dots vh50 u-bg-green-step-3">
|
|
21
|
+
<div class="o-prose u-pad-x-s">
|
|
22
|
+
<p>This section has the <strong>dots</strong> background pattern.</p>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="c-slat c-slat--crystal vh50 u-bg-utility-blue-step-3">
|
|
26
|
+
<div class="o-prose u-pad-x-s">
|
|
27
|
+
<p>This section has the <strong>crystal</strong> background pattern.</p>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="c-slat c-slat--arc vh50 u-bg-petrol-step-3">
|
|
31
|
+
<div class="o-prose u-pad-x-s">
|
|
32
|
+
<p>This section has the <strong>arc</strong> background pattern.</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<style>
|
|
38
|
+
.vh50 {
|
|
39
|
+
height: 20em;
|
|
40
|
+
height: clamp(10em, 50vh, 30em);
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
43
|
+
|
package/src/brand/typography.md
CHANGED
|
@@ -7,7 +7,7 @@ version: 1.0.2
|
|
|
7
7
|
status: 'Ready'
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
##
|
|
10
|
+
## Inter
|
|
11
11
|
|
|
12
12
|
Our brand font is [Inter](https://rsms.me/inter). This typeface has been selected for its;
|
|
13
13
|
- Excellent clarity and legibility
|
|
@@ -19,10 +19,15 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
|
|
|
19
19
|
|
|
20
20
|
{% button 'Download Inter font' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
Inter is also available from [Google Fonts](https://fonts.google.com/specimen/Inter).
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
## Calibri
|
|
25
|
+
|
|
26
|
+
We use Calibri for office documents (e.g. Powerpoint, Word). Calibri is available on all Windows computers by default.
|
|
27
|
+
|
|
28
|
+
## Noto
|
|
29
|
+
|
|
30
|
+
For languages which don't use the Latin alphabet (such as Arabic or Chinese languages), we use the [Noto](https://fonts.google.com/noto) font family, which aims to cover the majority of the world's written scripts. N.B. Inter and Calibri both include Greek and Cyrillic characters.
|
|
26
31
|
|
|
27
32
|
---
|
|
28
33
|
|
|
@@ -31,7 +36,9 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
|
|
|
31
36
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
|
|
32
37
|
abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
|
|
33
38
|
|
|
34
|
-
- Inter Light for printed materials
|
|
39
|
+
- Inter Light for printed materials
|
|
40
|
+
- Inter Regular for web/software
|
|
41
|
+
- Arial for office (e.g. Powerpoint)
|
|
35
42
|
- Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
|
|
36
43
|
- <span class="c-library__semi">Inter Semi Bold</span> for emphasis
|
|
37
44
|
- Recommended font sizes for body text:
|
|
@@ -73,7 +73,7 @@ This `c` component takes two parameters:
|
|
|
73
73
|
|
|
74
74
|
This `SCSS` file has access to all the mixins, functions and foundational elements documented in {{ config.name }}. To add it to the main bundle, head to `src/assets/scss/components/index.scss` and add a new line pointing to your file:
|
|
75
75
|
|
|
76
|
-
```
|
|
76
|
+
```scss
|
|
77
77
|
@import '~comp/filter-bar/filter-bar.scss';
|
|
78
78
|
```
|
|
79
79
|
|
package/src/components/flow.njk
CHANGED
|
@@ -10,14 +10,15 @@ sidebar: components
|
|
|
10
10
|
<div class="u-flow--m">
|
|
11
11
|
{% set content %}
|
|
12
12
|
Add the class `u-flow` to any container, to space its contents.
|
|
13
|
-
```
|
|
13
|
+
```html
|
|
14
14
|
<div class="u-flow">
|
|
15
15
|
<h1>Flow</h1>
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
<
|
|
16
|
+
<p>Example</p>
|
|
17
|
+
<img src="example.jpg" />
|
|
18
|
+
<div>Example</div>
|
|
19
19
|
</div>
|
|
20
20
|
```
|
|
21
|
+
|
|
21
22
|
Spacing content effectively is imperative to good component composition. Taking learnings from broader CSS spacing paradigms, rather than dictate spacing at a child-level, we set the rules at a parent-level, overriding at a child-level where appropriate.
|
|
22
23
|
|
|
23
24
|
With this approach, we can add any number of new children to a parent without breaking this existing variants. This mindset is crucial to extending the design system over time.
|
|
@@ -25,7 +26,7 @@ sidebar: components
|
|
|
25
26
|
To achieve this, we use the **flow** concept. The [lobotomised owl selector](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/) `* + *` does the heavy lifting here. Rather than every element 'pushing down', any children that follow another child 'push up'.
|
|
26
27
|
|
|
27
28
|
{% set dont %}
|
|
28
|
-
```
|
|
29
|
+
```scss
|
|
29
30
|
.parent > * {
|
|
30
31
|
margin-bottom: 1rem;
|
|
31
32
|
|
|
@@ -41,7 +42,7 @@ sidebar: components
|
|
|
41
42
|
}) }}
|
|
42
43
|
|
|
43
44
|
{% set do %}
|
|
44
|
-
```
|
|
45
|
+
```scss
|
|
45
46
|
.parent > * + * {
|
|
46
47
|
margin-top: 1rem;
|
|
47
48
|
}
|
|
@@ -61,7 +62,7 @@ sidebar: components
|
|
|
61
62
|
`.u-flow` will produce a 'small' space, and `.u-flow--l` a 'large' one.
|
|
62
63
|
|
|
63
64
|
{% set dont %}
|
|
64
|
-
```
|
|
65
|
+
```html
|
|
65
66
|
<div class="c-component">
|
|
66
67
|
<h2 class="c-component__title u-margin-top-m">...</h2>
|
|
67
68
|
</div>
|
|
@@ -73,7 +74,7 @@ sidebar: components
|
|
|
73
74
|
}) }}
|
|
74
75
|
|
|
75
76
|
{% set do %}
|
|
76
|
-
```
|
|
77
|
+
```html
|
|
77
78
|
<div class="c-component u-flow--m">
|
|
78
79
|
<h2 class="c-component__title">...</h2>
|
|
79
80
|
</div>
|
|
@@ -100,16 +101,28 @@ sidebar: components
|
|
|
100
101
|
</thead>
|
|
101
102
|
<tbody>
|
|
102
103
|
<tr>
|
|
103
|
-
<td
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
<td>
|
|
105
|
+
|
|
106
|
+
```scss
|
|
107
|
+
.c-component {
|
|
108
|
+
@include flow('l');
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
</td>
|
|
113
|
+
<td>
|
|
114
|
+
|
|
115
|
+
```scss
|
|
116
|
+
.c-component > * + * {
|
|
117
|
+
margin-top: 36px;
|
|
118
|
+
margin-top: var(--space-l);
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
</td>
|
|
123
|
+
</tr>
|
|
124
|
+
</tbody>
|
|
125
|
+
</table>
|
|
113
126
|
{% endset %}
|
|
114
127
|
{{ markdown({
|
|
115
128
|
content: content
|
|
@@ -44,7 +44,7 @@ Adding new icons to the SVG sprite is a manual process.
|
|
|
44
44
|
|
|
45
45
|
1. Create (or copy-paste) your new icon on a 24px × 24px artboard in Illustrator
|
|
46
46
|
2. Export as an SVG
|
|
47
|
-
3. Copy into https://jakearchibald.github.io/svgomg/
|
|
47
|
+
3. Copy into <a href="https://jakearchibald.github.io/svgomg/" target="_blank" rel="external noopener noreferrer nofollow">https://jakearchibald.github.io/svgomg/</a>
|
|
48
48
|
- Adjust the options to best reduce the file size
|
|
49
49
|
- Export from SVGOMG as code
|
|
50
50
|
5. Paste into Franklin's /src/static/svg/sprite.svg
|
package/src/components/index.njk
CHANGED
|
@@ -14,7 +14,9 @@ The simplest way to consume the design system is with a `<link>` & `<script>` ta
|
|
|
14
14
|
<script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system.
|
|
17
|
+
The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system. That version may not have been tested thoroughly - on the main website we stay a few versions behind the latest, and we specify a precise version of each asset by replacing "@latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.9.5/dist/build/scss/main.css`.
|
|
18
|
+
|
|
19
|
+
N.B. the `<script>` tag needs to be placed near the closing `</body>` tag of your page; it won't run correctly if placed in the head.
|
|
18
20
|
|
|
19
21
|
## Consuming the design system via NPM
|
|
20
22
|
|