@terrahq/wysiwyg 1.0.0 → 1.0.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.
- package/README.md +666 -746
- package/content/wordpress-content.html +193 -152
- package/dist/content/wordpress-content.html +185 -154
- package/dist/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
- package/package.json +1 -1
- package/public/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
- package/readme/blocks/Button.md +33 -13
- package/readme/blocks/Columns.md +28 -13
- package/readme/blocks/Links.md +2 -0
- package/readme/blocks/Quote.md +12 -0
- package/readme/blocks/Separator.md +25 -0
- package/readme/blocks/Table.md +96 -103
- package/readme/blocks/Video.md +80 -11
- package/readme/properties/Background.md +74 -0
- package/readme/properties/Font.md +15 -0
- package/readme/properties/Media.md +33 -0
- package/src/assets/icons/ArrowRight.svg +3 -0
- package/src/scss/_paths.scss +2 -1
- package/src/scss/framework/_var/_vars.scss +1 -1
- package/src/scss/framework/components/btn/_c--btn-a.scss +1 -0
- package/src/scss/framework/components/content/_c--content-a.scss +405 -455
- package/src/scss/framework/components/link/_c--link-a.scss +38 -7
- package/src/scss/global-content/_global-mixins/blocks/_content-block-btn.scss +25 -6
- package/src/scss/global-content/_global-mixins/blocks/_content-block-columns.scss +11 -0
- package/src/scss/global-content/_global-mixins/blocks/_content-block-quote.scss +23 -6
- package/src/scss/global-content/_global-mixins/blocks/_content-block-separator.scss +49 -3
- package/src/scss/global-content/_global-mixins/blocks/_content-block-table.scss +79 -7
- package/src/scss/global-content/_global-mixins/blocks/_content-links.scss +9 -2
- package/src/scss/global-content/_global-mixins/properties/_background.scss +50 -0
- package/src/scss/global-content/_global-mixins/properties/_font.scss +18 -6
- package/src/scss/global-content/_global-mixins/properties/_properties.scss +1 -0
- package/src/scss/sanity.scss +17 -1
- package/src/scss/wp.scss +441 -256
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Wordpress content</title>
|
|
8
8
|
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" />
|
|
9
12
|
</head>
|
|
10
13
|
<body>
|
|
11
14
|
<main>
|
|
@@ -19,248 +22,286 @@
|
|
|
19
22
|
</div>
|
|
20
23
|
</div>
|
|
21
24
|
</section>
|
|
25
|
+
|
|
22
26
|
<section class="u--pt-15 u--pb-15 f--background-b">
|
|
23
27
|
<div class="f--container">
|
|
24
28
|
<div class="f--row">
|
|
25
29
|
<div class="f--col-12">
|
|
26
30
|
<div class="c--content-a--wp">
|
|
31
|
+
|
|
32
|
+
<!-- ============================ INTRO ============================ -->
|
|
27
33
|
<!-- wp:heading -->
|
|
28
|
-
<h2>
|
|
34
|
+
<h2>A Practical Guide to <strong>Sustainable</strong> <b>Web Design</b></h2>
|
|
29
35
|
<!-- /wp:heading -->
|
|
30
|
-
|
|
31
|
-
<!-- wp:acf/highlighted-block-->
|
|
32
|
-
<p class="highlighted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt lobortis feugiat vivamus at. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Interdum consectetur libero id faucibus nisl tincidunt eget.</p>
|
|
33
|
-
<!-- /wp:acf/highlighted-block-->
|
|
34
|
-
<ol start="3" class="wp-block-list">
|
|
35
|
-
<li>From predictive analytics to personalized customer experiences, organizations are using AI to streamline operations, uncover deeper insights, and fuel innovation across industries.</li>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<li>However, harnessing this potential successfully requires a clear roadmap and a thoughtful strategy. Without a structured approach, businesses risk overinvesting in tools that don’t deliver or underestimating the cultural and operational shifts implementing AI demands.</li>
|
|
40
|
-
</ol>
|
|
36
|
+
|
|
41
37
|
<!-- wp:paragraph -->
|
|
42
|
-
<p>
|
|
38
|
+
<p>Every page we ship has a footprint. In this guide we look at how thoughtful design choices reduce that cost while making interfaces faster and easier to use. For the full background, read the <a href="https://terrahq.com">original research</a> — most of the ideas here build directly on it, and the <strong>core principle</strong> is surprisingly simple: <b>send less, render sooner</b>.</p>
|
|
43
39
|
<!-- /wp:paragraph -->
|
|
44
|
-
|
|
40
|
+
|
|
41
|
+
<!-- wp:acf/highlighted-block-->
|
|
42
|
+
<p class="highlighted">Sustainable design is <strong>not about doing less</strong> — it is about doing <b>exactly what the user needs</b>, and nothing more.</p>
|
|
43
|
+
<!-- /wp:acf/highlighted-block-->
|
|
44
|
+
|
|
45
45
|
<!-- wp:image {"sizeSlug":"large"} -->
|
|
46
|
-
<figure class="wp-block-image size-large"><img src="https://picsum.photos/2000/750" alt=""/><figcaption class="wp-element-caption">
|
|
46
|
+
<figure class="wp-block-image size-large"><img src="https://picsum.photos/2000/750" alt=""/><figcaption class="wp-element-caption">A calm, content-first layout sets the tone for the whole <b>experience.</b></figcaption></figure>
|
|
47
47
|
<!-- /wp:image -->
|
|
48
|
-
|
|
49
|
-
<!--
|
|
50
|
-
<p>Elementum facilisis leo vel fringilla est. Pellentesque elit eget gravida cum sociis natoque. Cursus euismod quis viverra nibh cras. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Sed nisi lacus sed viverra tellus. Quis auctor elit sed vulputate mi.</p>
|
|
51
|
-
<!-- /wp:paragraph -->
|
|
52
|
-
|
|
48
|
+
|
|
49
|
+
<!-- ====================== WHY IT MATTERS ====================== -->
|
|
53
50
|
<!-- wp:heading {"level":3} -->
|
|
54
|
-
<h3>
|
|
51
|
+
<h3>Why it <b>matters</b></h3>
|
|
55
52
|
<!-- /wp:heading -->
|
|
56
|
-
|
|
57
|
-
<!-- wp:paragraph -->
|
|
58
|
-
<p>Sem fringilla ut morbi tincidunt augue interdum velit. Fermentum leo vel orci porta non pulvinar neque laoreet. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Quisque id diam vel quam elementum pulvinar etiam non. Cras tincidunt lobortis feugiat vivamus at. Imperdiet proin fermentum leo vel orci.</p>
|
|
59
|
-
<!-- /wp:paragraph -->
|
|
60
|
-
|
|
61
|
-
<!-- wp:image {"sizeSlug":"large"} -->
|
|
62
|
-
<figure class="wp-block-image size-large"><img src="https://picsum.photos/500/200" alt=""/><figcaption class="wp-element-caption">This is footnote lorem ipsum dolor sit amet</figcaption></figure>
|
|
63
|
-
<!-- /wp:image -->
|
|
64
|
-
|
|
53
|
+
|
|
65
54
|
<!-- wp:paragraph -->
|
|
66
|
-
<p>
|
|
55
|
+
<p>The web is the largest connected machine ever built, and most of its energy goes into moving and rendering bytes. <strong>Trimming the obvious waste</strong> — oversized images, unused scripts, redundant fonts — usually delivers the biggest wins before you ever touch the harder trade-offs.</p>
|
|
67
56
|
<!-- /wp:paragraph -->
|
|
68
|
-
|
|
57
|
+
|
|
69
58
|
<!-- wp:list -->
|
|
70
59
|
<ul><!-- wp:list-item -->
|
|
71
|
-
<li>
|
|
60
|
+
<li><strong>Measure first</strong>: you cannot improve what you have not profiled.</li>
|
|
72
61
|
<!-- /wp:list-item -->
|
|
73
|
-
|
|
74
62
|
<!-- wp:list-item -->
|
|
75
|
-
<li>
|
|
63
|
+
<li>Ship critical content as plain, <b>semantic HTML</b>.</li>
|
|
76
64
|
<!-- /wp:list-item -->
|
|
77
|
-
|
|
78
65
|
<!-- wp:list-item -->
|
|
79
|
-
<li>
|
|
66
|
+
<li>Defer everything that is not needed for the first interaction.<!-- wp:list -->
|
|
80
67
|
<ul><!-- wp:list-item -->
|
|
81
|
-
<li>
|
|
68
|
+
<li>Lazy-load <b>below-the-fold</b> media.</li>
|
|
82
69
|
<!-- /wp:list-item -->
|
|
83
|
-
|
|
84
70
|
<!-- wp:list-item -->
|
|
85
|
-
<li>
|
|
71
|
+
<li>Split bundles so each route loads only its own code.<!-- wp:list -->
|
|
86
72
|
<ul><!-- wp:list-item -->
|
|
87
|
-
<li>
|
|
88
|
-
<!-- /wp:list-item -->
|
|
89
|
-
|
|
90
|
-
<!-- wp:list-item -->
|
|
91
|
-
<li>Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.</li>
|
|
73
|
+
<li>Prefer native elements over heavy widgets.</li>
|
|
92
74
|
<!-- /wp:list-item --></ul>
|
|
93
75
|
<!-- /wp:list --></li>
|
|
94
76
|
<!-- /wp:list-item --></ul>
|
|
95
77
|
<!-- /wp:list --></li>
|
|
96
78
|
<!-- /wp:list-item --></ul>
|
|
97
79
|
<!-- /wp:list -->
|
|
98
|
-
|
|
99
|
-
<!-- wp:paragraph -->
|
|
100
|
-
<p>Volutpat est velit egestas dui. Pulvinar etiam non quam lacus suspendisse faucibus. Etiam non quam lacus suspendisse faucibus interdum. Posuere morbi leo urna molestie at elementum eu facilisis. Erat velit scelerisque in dictum non consectetur a.</p>
|
|
101
|
-
<!-- /wp:paragraph -->
|
|
102
|
-
|
|
80
|
+
|
|
103
81
|
<!-- wp:quote -->
|
|
104
82
|
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
|
|
105
|
-
<p>
|
|
106
|
-
<!-- /wp:paragraph --><cite>
|
|
83
|
+
<p>The fastest request is the one you <strong>never make</strong>. Before optimising a resource, ask whether it <b>needs to exist at all</b>.</p>
|
|
84
|
+
<!-- /wp:paragraph --><cite>Performance folklore, repeated often because it is <b>true</b>.</cite></blockquote>
|
|
107
85
|
<!-- /wp:quote -->
|
|
108
|
-
|
|
109
|
-
<!--
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<!-- wp:heading {"level":4} -->
|
|
114
|
-
<h4>This is the H4</h4>
|
|
86
|
+
|
|
87
|
+
<!-- ====================== CORE PRINCIPLES ====================== -->
|
|
88
|
+
<!-- wp:heading {"level":3} -->
|
|
89
|
+
<h3><strong>Core principles</strong>, step by step</h3>
|
|
115
90
|
<!-- /wp:heading -->
|
|
116
|
-
|
|
91
|
+
|
|
117
92
|
<!-- wp:paragraph -->
|
|
118
|
-
<p>
|
|
93
|
+
<p>A repeatable process beats heroics. The four steps below scale from a landing page to an entire platform.</p>
|
|
119
94
|
<!-- /wp:paragraph -->
|
|
120
|
-
|
|
95
|
+
|
|
121
96
|
<!-- wp:list {"ordered":true} -->
|
|
122
97
|
<ol><!-- wp:list-item -->
|
|
123
|
-
<li>
|
|
98
|
+
<li>Audit the current page weight and <strong>set a budget</strong>.</li>
|
|
124
99
|
<!-- /wp:list-item -->
|
|
125
|
-
|
|
126
100
|
<!-- wp:list-item -->
|
|
127
|
-
<li>
|
|
101
|
+
<li>Cut the <strong>heaviest offenders</strong>, then re-measure.<!-- wp:list {"ordered":true} -->
|
|
128
102
|
<ol><!-- wp:list-item -->
|
|
129
|
-
<li>
|
|
103
|
+
<li>Compress and resize images to their display size.</li>
|
|
130
104
|
<!-- /wp:list-item -->
|
|
131
|
-
|
|
132
105
|
<!-- wp:list-item -->
|
|
133
|
-
<li>
|
|
106
|
+
<li>Subset fonts and load only the weights you use.<!-- wp:list {"ordered":true} -->
|
|
134
107
|
<ol><!-- wp:list-item -->
|
|
135
|
-
<li>
|
|
136
|
-
<!-- /wp:list-item -->
|
|
137
|
-
|
|
138
|
-
<!-- wp:list-item -->
|
|
139
|
-
<li>Viverra suspendisse potenti nullam ac.</li>
|
|
108
|
+
<li>Drop icon fonts in favour of <b>inline SVG</b>.</li>
|
|
140
109
|
<!-- /wp:list-item --></ol>
|
|
141
110
|
<!-- /wp:list --></li>
|
|
142
111
|
<!-- /wp:list-item --></ol>
|
|
143
112
|
<!-- /wp:list --></li>
|
|
113
|
+
<!-- /wp:list-item -->
|
|
114
|
+
<!-- wp:list-item -->
|
|
115
|
+
<li>Automate the budget in CI so regressions never ship.</li>
|
|
144
116
|
<!-- /wp:list-item --></ol>
|
|
145
117
|
<!-- /wp:list -->
|
|
146
|
-
|
|
118
|
+
|
|
119
|
+
<!-- wp:heading {"level":4} -->
|
|
120
|
+
<h4>Comparing the <b>options</b></h4>
|
|
121
|
+
<!-- /wp:heading -->
|
|
122
|
+
|
|
147
123
|
<!-- wp:paragraph -->
|
|
148
|
-
<p>
|
|
124
|
+
<p>The table below summarises three common image strategies and how they trade off quality, weight and effort.</p>
|
|
149
125
|
<!-- /wp:paragraph -->
|
|
150
|
-
|
|
126
|
+
|
|
151
127
|
<!-- wp:table -->
|
|
152
|
-
<figure class="wp-block-table"><table><
|
|
128
|
+
<figure class="wp-block-table is-style-regular"><table><thead><tr><th>Strategy</th><th>Typical weight</th><th>Best for</th></tr></thead><tbody><tr><td><strong>Responsive JPEG/PNG</strong></td><td>Medium</td><td>Photos with broad browser support</td></tr><tr><td><strong>WebP / AVIF</strong></td><td>Low</td><td>Photos where modern formats are safe</td></tr><tr><td><strong>Inline SVG</strong></td><td>Very low</td><td>Logos, icons and simple illustrations</td></tr></tbody></table><figcaption class="wp-element-caption">Image formats compared by <b>weight</b> and ideal use case.</figcaption></figure>
|
|
153
129
|
<!-- /wp:table -->
|
|
154
|
-
|
|
130
|
+
|
|
155
131
|
<!-- wp:paragraph -->
|
|
156
|
-
<p>
|
|
132
|
+
<p>You can tap any photograph in this article to open it at full size — a small enhancement that keeps the layout calm while still giving curious readers the detail they want.</p>
|
|
157
133
|
<!-- /wp:paragraph -->
|
|
158
|
-
|
|
159
|
-
<!-- wp:
|
|
160
|
-
<figure
|
|
161
|
-
|
|
162
|
-
|
|
134
|
+
|
|
135
|
+
<!-- wp:image {"lightbox":{"enabled":true},"sizeSlug":"large"} -->
|
|
136
|
+
<figure data-wp-context="{"imageId":"zoom-example-01"}" data-wp-interactive="core/image" data-wp-key="zoom-example-01" class="wp-block-image size-large wp-lightbox-container">
|
|
137
|
+
<img decoding="async" src="https://picsum.photos/2000/750" alt="" data-wp-init="callbacks.setButtonStyles" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles"/>
|
|
138
|
+
<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge image" data-wp-init="callbacks.initTriggerButton" data-wp-on--click="actions.showLightbox">
|
|
139
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
|
140
|
+
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
|
|
141
|
+
</svg>
|
|
142
|
+
</button>
|
|
143
|
+
<figcaption class="wp-element-caption">Tap to zoom — the lightbox trigger appears on hover.</figcaption>
|
|
144
|
+
</figure>
|
|
145
|
+
<!-- /wp:image -->
|
|
146
|
+
|
|
163
147
|
<!-- wp:paragraph -->
|
|
164
|
-
<p>
|
|
148
|
+
<p>The same zoom behaviour also works on its own, without a caption — useful when the image speaks for itself.</p>
|
|
165
149
|
<!-- /wp:paragraph -->
|
|
166
|
-
|
|
167
|
-
<!-- wp:
|
|
168
|
-
<figure
|
|
169
|
-
|
|
170
|
-
|
|
150
|
+
|
|
151
|
+
<!-- wp:image {"lightbox":{"enabled":true},"sizeSlug":"large"} -->
|
|
152
|
+
<figure data-wp-context="{"imageId":"zoom-example-02"}" data-wp-interactive="core/image" data-wp-key="zoom-example-02" class="wp-block-image size-large wp-lightbox-container">
|
|
153
|
+
<img decoding="async" src="https://picsum.photos/2000/900" alt="" data-wp-init="callbacks.setButtonStyles" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles"/>
|
|
154
|
+
<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge image" data-wp-init="callbacks.initTriggerButton" data-wp-on--click="actions.showLightbox">
|
|
155
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
|
156
|
+
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
|
|
157
|
+
</svg>
|
|
158
|
+
</button>
|
|
159
|
+
</figure>
|
|
160
|
+
<!-- /wp:image -->
|
|
161
|
+
|
|
162
|
+
<!-- ======================== IN PRACTICE ======================== -->
|
|
163
|
+
<!-- wp:heading {"level":3} -->
|
|
164
|
+
<h3>Putting it into <strong>practice</strong></h3>
|
|
165
|
+
<!-- /wp:heading -->
|
|
166
|
+
|
|
171
167
|
<!-- wp:paragraph -->
|
|
172
|
-
<p>
|
|
168
|
+
<p>Side-by-side layouts help readers scan trade-offs quickly without scrolling back and forth.</p>
|
|
173
169
|
<!-- /wp:paragraph -->
|
|
174
|
-
|
|
175
|
-
<!-- wp:
|
|
176
|
-
<
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
<!-- wp:heading {"level":5} -->
|
|
180
|
-
<h5>This is the H5</h5>
|
|
170
|
+
|
|
171
|
+
<!-- wp:columns -->
|
|
172
|
+
<div class="wp-block-columns"><!-- wp:column -->
|
|
173
|
+
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
|
|
174
|
+
<h4><b>Before</b></h4>
|
|
181
175
|
<!-- /wp:heading -->
|
|
182
|
-
|
|
183
176
|
<!-- wp:paragraph -->
|
|
184
|
-
<p>
|
|
185
|
-
<!-- /wp:paragraph
|
|
186
|
-
|
|
187
|
-
<!-- wp:
|
|
188
|
-
<div class="wp-block-
|
|
189
|
-
<
|
|
190
|
-
<!-- /wp:
|
|
191
|
-
<!-- /wp:buttons -->
|
|
192
|
-
|
|
177
|
+
<p><strong>Three render-blocking scripts</strong>, an uncompressed hero image and <b>four font weights</b> loaded on every page.</p>
|
|
178
|
+
<!-- /wp:paragraph --></div>
|
|
179
|
+
<!-- /wp:column -->
|
|
180
|
+
<!-- wp:column -->
|
|
181
|
+
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
|
|
182
|
+
<h4><strong>After</strong></h4>
|
|
183
|
+
<!-- /wp:heading -->
|
|
193
184
|
<!-- wp:paragraph -->
|
|
194
|
-
<p>
|
|
195
|
-
<!-- /wp:paragraph
|
|
196
|
-
|
|
197
|
-
<!-- wp:
|
|
198
|
-
|
|
199
|
-
<!--
|
|
200
|
-
|
|
185
|
+
<p>One deferred script, an <b>AVIF hero</b> and two subsetted weights — roughly <strong>a third</strong> of the original weight.</p>
|
|
186
|
+
<!-- /wp:paragraph --></div>
|
|
187
|
+
<!-- /wp:column --></div>
|
|
188
|
+
<!-- /wp:columns -->
|
|
189
|
+
|
|
190
|
+
<!-- wp:media-text {"mediaType":"image"} -->
|
|
191
|
+
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://picsum.photos/600/400" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":4} -->
|
|
192
|
+
<h4>Design and engineering, <b>together</b></h4>
|
|
193
|
+
<!-- /wp:heading -->
|
|
201
194
|
<!-- wp:paragraph -->
|
|
202
|
-
<p>
|
|
203
|
-
<!-- /wp:paragraph
|
|
204
|
-
|
|
195
|
+
<p>The best results come when <strong>designers set the budget</strong> and <strong>engineers protect it</strong>. Pair the two early and <b>revisit the numbers at every review</b>.</p>
|
|
196
|
+
<!-- /wp:paragraph --></div></div>
|
|
197
|
+
<!-- /wp:media-text -->
|
|
198
|
+
|
|
205
199
|
<!-- wp:image {"align":"left","sizeSlug":"large"} -->
|
|
206
|
-
<figure class="wp-block-image alignleft size-large"><img src="https://picsum.photos/300/300" alt=""
|
|
200
|
+
<figure class="wp-block-image alignleft size-large"><img src="https://picsum.photos/300/300" alt=""/><figcaption class="wp-element-caption">Left-aligned figure</figcaption></figure>
|
|
207
201
|
<!-- /wp:image -->
|
|
208
|
-
|
|
202
|
+
|
|
209
203
|
<!-- wp:paragraph -->
|
|
210
|
-
<p>
|
|
204
|
+
<p>Text flows naturally around a left-aligned image, which is ideal for portraits or supporting visuals that should not interrupt the reading rhythm. Notice how the paragraph keeps its measure while the figure sits to the side. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt lobortis feugiat vivamus at.</p>
|
|
211
205
|
<!-- /wp:paragraph -->
|
|
212
|
-
|
|
206
|
+
|
|
213
207
|
<!-- wp:image {"align":"right","sizeSlug":"large"} -->
|
|
214
208
|
<figure class="wp-block-image alignright size-large"><img src="https://picsum.photos/300/200" alt=""/></figure>
|
|
215
209
|
<!-- /wp:image -->
|
|
216
|
-
|
|
210
|
+
|
|
217
211
|
<!-- wp:paragraph -->
|
|
218
|
-
<p>
|
|
212
|
+
<p>A right-aligned image mirrors the effect on the opposite side. Use the two sparingly and in alternation so the page keeps a steady left edge for the body copy. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Interdum consectetur libero id faucibus nisl tincidunt eget. Ultrices vitae auctor eu augue.</p>
|
|
219
213
|
<!-- /wp:paragraph -->
|
|
220
|
-
|
|
221
|
-
<!-- wp:
|
|
222
|
-
<
|
|
223
|
-
<!-- /wp:
|
|
224
|
-
|
|
214
|
+
|
|
215
|
+
<!-- wp:image {"linkDestination":"custom","sizeSlug":"large"} -->
|
|
216
|
+
<figure class="wp-block-image aligncenter size-large"><a href="https://terrahq.com"><img src="https://picsum.photos/1200/600" alt=""/></a><figcaption class="wp-element-caption">A centred, linked image — the wrapping anchor does not inherit link styles.</figcaption></figure>
|
|
217
|
+
<!-- /wp:image -->
|
|
218
|
+
|
|
225
219
|
<!-- wp:paragraph -->
|
|
226
|
-
<p>
|
|
220
|
+
<p>Key facts read best as a compact two-column reference rather than buried in prose:</p>
|
|
227
221
|
<!-- /wp:paragraph -->
|
|
228
|
-
|
|
229
|
-
<!-- wp:
|
|
230
|
-
<figure class="wp-block-
|
|
231
|
-
<!-- /wp:
|
|
232
|
-
|
|
222
|
+
|
|
223
|
+
<!-- wp:table -->
|
|
224
|
+
<figure class="wp-block-table"><table><tbody><tr><td><strong>Performance budget</strong></td><td>Set a hard limit (e.g. 150 KB of JS) and <b>fail the build</b> when it is exceeded.</td></tr><tr><td><strong>Image policy</strong></td><td>Modern formats, responsive sizes and <b>lazy-loading</b> by default.</td></tr><tr><td><strong>Fonts</strong></td><td>Self-host, subset, and cap the number of weights.</td></tr></tbody></table><figcaption class="wp-element-caption">A <strong>starter checklist</strong> you can adapt per project.</figcaption></figure>
|
|
225
|
+
<!-- /wp:table -->
|
|
226
|
+
|
|
227
|
+
<!-- ========================= MEDIA ========================= -->
|
|
228
|
+
<!-- wp:heading {"level":4} -->
|
|
229
|
+
<h4>Watch it in <strong>action</strong></h4>
|
|
230
|
+
<!-- /wp:heading -->
|
|
231
|
+
|
|
233
232
|
<!-- wp:paragraph -->
|
|
234
|
-
<p>
|
|
233
|
+
<p>Embedded media is convenient, but it is also heavy — load it on demand and always provide a caption for context.</p>
|
|
235
234
|
<!-- /wp:paragraph -->
|
|
236
|
-
|
|
237
|
-
<!-- wp:
|
|
238
|
-
<figure class="wp-block-
|
|
239
|
-
|
|
240
|
-
|
|
235
|
+
|
|
236
|
+
<!-- wp:embed {"url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
|
|
237
|
+
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
|
|
238
|
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
239
|
+
</div></figure>
|
|
240
|
+
<!-- /wp:embed -->
|
|
241
|
+
|
|
241
242
|
<!-- wp:paragraph -->
|
|
242
|
-
<p>
|
|
243
|
+
<p>When you control the source file, a <strong>native video</strong> avoids the third-party player entirely. It is the <b>lightest</b> option for short, muted loops and product demos.</p>
|
|
243
244
|
<!-- /wp:paragraph -->
|
|
244
|
-
|
|
245
|
-
<!-- wp:
|
|
246
|
-
<figure class="wp-block-
|
|
247
|
-
<!-- /wp:
|
|
248
|
-
|
|
245
|
+
|
|
246
|
+
<!-- wp:video -->
|
|
247
|
+
<figure class="wp-block-video"><video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video><figcaption class="wp-element-caption">A short, <b>self-hosted</b> clip — lighter than most third-party players.</figcaption></figure>
|
|
248
|
+
<!-- /wp:video -->
|
|
249
|
+
|
|
250
|
+
<!-- ========================= WRAP UP ========================= -->
|
|
251
|
+
<!-- wp:heading {"level":5} -->
|
|
252
|
+
<h5>Where to go <b>next</b></h5>
|
|
253
|
+
<!-- /wp:heading -->
|
|
254
|
+
|
|
255
|
+
<!-- wp:paragraph -->
|
|
256
|
+
<p>Start small: pick <strong>one page</strong>, set a budget, and ship a <b>measurable improvement</b> this week. Momentum compounds.</p>
|
|
257
|
+
<!-- /wp:paragraph -->
|
|
258
|
+
|
|
259
|
+
<!-- wp:buttons -->
|
|
260
|
+
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"><!-- wp:button -->
|
|
261
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Read the docs</a></div>
|
|
262
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">See the checklist</a></div>
|
|
263
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Browse examples</a></div>
|
|
264
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Join the newsletter</a></div>
|
|
265
|
+
<!-- /wp:button --></div>
|
|
266
|
+
<!-- /wp:buttons -->
|
|
267
|
+
|
|
268
|
+
<!-- wp:separator -->
|
|
269
|
+
<hr class="wp-block-separator has-alpha-channel-opacity"/>
|
|
270
|
+
<!-- /wp:separator -->
|
|
271
|
+
|
|
272
|
+
<!-- wp:separator {"className":"is-style-wide"} -->
|
|
273
|
+
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
|
|
274
|
+
<!-- /wp:separator -->
|
|
275
|
+
|
|
276
|
+
<!-- wp:separator {"className":"is-style-dots"} -->
|
|
277
|
+
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dots"/>
|
|
278
|
+
<!-- /wp:separator -->
|
|
279
|
+
|
|
280
|
+
<!-- wp:heading {"level":6} -->
|
|
281
|
+
<h6>A note on <strong>tooling</strong></h6>
|
|
282
|
+
<!-- /wp:heading -->
|
|
283
|
+
|
|
249
284
|
<!-- wp:paragraph -->
|
|
250
|
-
<p>
|
|
285
|
+
<p>The techniques here are framework-agnostic. Whether you build with WordPress, a static site generator or a custom stack, the budget and the measurements are what keep you honest.</p>
|
|
251
286
|
<!-- /wp:paragraph -->
|
|
252
|
-
|
|
287
|
+
|
|
288
|
+
<!-- wp:buttons -->
|
|
289
|
+
<div class="wp-block-buttons"><!-- wp:button -->
|
|
290
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Get started</a></div>
|
|
291
|
+
<!-- /wp:button --></div>
|
|
292
|
+
<!-- /wp:buttons -->
|
|
293
|
+
|
|
253
294
|
<!-- wp:footnote -->
|
|
254
|
-
<p class="footnote">
|
|
295
|
+
<p class="footnote">Figures in this article are illustrative. Methodology and sources are available on request, and <strong>all benchmarks</strong> were taken on a mid-range device over a throttled 4G connection to reflect real-world conditions rather than ideal ones.</p>
|
|
255
296
|
<!-- /wp:footnote -->
|
|
297
|
+
|
|
256
298
|
</div>
|
|
257
299
|
</div>
|
|
258
300
|
</div>
|
|
259
301
|
</div>
|
|
260
302
|
</section>
|
|
261
|
-
|
|
262
303
|
|
|
263
304
|
</main>
|
|
264
305
|
<script type="module" src="../src/js/main.ts"></script>
|
|
265
306
|
</body>
|
|
266
|
-
</html>
|
|
307
|
+
</html>
|