24 |
25 | {#if $minSize > $maxSize}
26 |
27 | Fluid snippet doesn't have any effect. Minimum size is larger than maximum size.
28 |
29 | {/if}
30 |
31 |
32 |
33 |
34 | {#if $minSize > $maxSize}
35 |
36 | Fluid snippet doesn't have any effect. Minimum size is larger than maximum size.
37 |
38 | {/if}
39 |
40 |
41 |
42 |
43 | {#if $fluidSize === 0}
44 | Fluid snippet doesn't have any effect. Fluid size should be above 0
47 | {/if}
48 |
49 |
50 |
51 |
60 | {#if $relativeSize > -1 && $relativeSize < 1}
61 | Value should be -1 and less or 1 and more to support user font size settings.
64 | {/if}
65 |
66 |
100 |
101 |
102 |
223 |
--------------------------------------------------------------------------------
/src/styles/normalize.pcss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input {
178 | /* 1 */
179 | overflow: visible;
180 | }
181 |
182 | /**
183 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 | * 1. Remove the inheritance of text transform in Firefox.
185 | */
186 |
187 | button,
188 | select {
189 | /* 1 */
190 | text-transform: none;
191 | }
192 |
193 | /**
194 | * Correct the inability to style clickable types in iOS and Safari.
195 | */
196 |
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 | -webkit-appearance: button;
202 | }
203 |
204 | /**
205 | * Remove the inner border and padding in Firefox.
206 | */
207 |
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 | border-style: none;
213 | padding: 0;
214 | }
215 |
216 | /**
217 | * Restore the focus styles unset by the previous rule.
218 | */
219 |
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 | outline: 1px dotted ButtonText;
225 | }
226 |
227 | /**
228 | * Correct the padding in Firefox.
229 | */
230 |
231 | fieldset {
232 | padding: 0.35em 0.75em 0.625em;
233 | }
234 |
235 | /**
236 | * 1. Correct the text wrapping in Edge and IE.
237 | * 2. Correct the color inheritance from `fieldset` elements in IE.
238 | * 3. Remove the padding so developers are not caught out when they zero out
239 | * `fieldset` elements in all browsers.
240 | */
241 |
242 | legend {
243 | box-sizing: border-box; /* 1 */
244 | color: inherit; /* 2 */
245 | display: table; /* 1 */
246 | max-width: 100%; /* 1 */
247 | padding: 0; /* 3 */
248 | white-space: normal; /* 1 */
249 | }
250 |
251 | /**
252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 | */
254 |
255 | progress {
256 | vertical-align: baseline;
257 | }
258 |
259 | /**
260 | * Remove the default vertical scrollbar in IE 10+.
261 | */
262 |
263 | textarea {
264 | overflow: auto;
265 | }
266 |
267 | /**
268 | * 1. Add the correct box sizing in IE 10.
269 | * 2. Remove the padding in IE 10.
270 | */
271 |
272 | [type='checkbox'],
273 | [type='radio'] {
274 | box-sizing: border-box; /* 1 */
275 | padding: 0; /* 2 */
276 | }
277 |
278 | /**
279 | * Correct the cursor style of increment and decrement buttons in Chrome.
280 | */
281 |
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 | height: auto;
285 | }
286 |
287 | /**
288 | * 1. Correct the odd appearance in Chrome and Safari.
289 | * 2. Correct the outline style in Safari.
290 | */
291 |
292 | [type='search'] {
293 | -webkit-appearance: textfield; /* 1 */
294 | outline-offset: -2px; /* 2 */
295 | }
296 |
297 | /**
298 | * Remove the inner padding in Chrome and Safari on macOS.
299 | */
300 |
301 | [type='search']::-webkit-search-decoration {
302 | -webkit-appearance: none;
303 | }
304 |
305 | /**
306 | * 1. Correct the inability to style clickable types in iOS and Safari.
307 | * 2. Change font properties to `inherit` in Safari.
308 | */
309 |
310 | ::-webkit-file-upload-button {
311 | -webkit-appearance: button; /* 1 */
312 | font: inherit; /* 2 */
313 | }
314 |
315 | /* Interactive
316 | ========================================================================== */
317 |
318 | /*
319 | * Add the correct display in Edge, IE 10+, and Firefox.
320 | */
321 |
322 | details {
323 | display: block;
324 | }
325 |
326 | /*
327 | * Add the correct display in all browsers.
328 | */
329 |
330 | summary {
331 | display: list-item;
332 | }
333 |
334 | /* Misc
335 | ========================================================================== */
336 |
337 | /**
338 | * Add the correct display in IE 10+.
339 | */
340 |
341 | template {
342 | display: none;
343 | }
344 |
345 | /**
346 | * Add the correct display in IE 10.
347 | */
348 |
349 | [hidden] {
350 | display: none;
351 | }
352 |
--------------------------------------------------------------------------------
/src/routes/about.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
About the project & user guide
8 |
9 |
10 |
11 |
12 | I was going through Josh Comeau's
17 | CSS for JS devs
18 | course which is one of the best courses on CSS in general and I recommend checking it out.
19 | In one of the lessions, Josh implemented a simple fluid typography editor, mainly for
20 | demonstration purposes to showcase how fluid typography changes depending on the screen size.
21 |
22 |
23 | I saw an opportunity for doing a really fun and useful project. I set out to
24 | build upon Josh's concept and developed a fully-fledged tool that developers could use on a
25 | day-to-day basis to fine-tune and keep track of their fluid typography and help to keep fluid
26 | typography behavior consistent across the significant breakpoints.
27 |
28 |
29 |
30 |
31 |
Fluid typography
32 |
33 | Fluid typography is a modern way of approaching responsive typography. Instead of setting
34 | fixed typography values for individual screen sizes, we can set a single fluid value and let
35 | the CSS render the appropriate values for a specific screen size constrained by minimum and
36 | maximum values.
37 |
38 |
39 |
40 | Try resizing the screen and notice how the "About the project & user guide" adapts to screen
41 | size, but is constrained at some specific minimum and maximum value. Cool, isn't it?
42 |
43 |
44 |
45 |
46 |
CSS clamp and browser support
47 |
48 | This editor relies heavily on CSS clamp
53 | and generates code using this property. Although this property has a solid browser support
54 | (above 90% of globally used browsers), you might want to use a polyfill or a fallback value if
55 | you need to support legacy browsers like Internet Explorer.
56 |
73 | Change speed (rate). If a value is positive, the final value will increase from minimum
74 | value to maximum value as screen width increases. If this value is negative, the final value
75 | will decrease from maximum value to minimal value as screen width increases.
76 |
77 |
relative-size
78 |
79 | Browser default root font size is 16px. This value can be changed by users in their browser
80 | settings, usually for accessibility purposes. Positive or negative "rem" values should be
81 | included to avoid locking font size to px value and to support user font size preferences.
82 |
83 |
84 |
85 |
86 |
87 |
Features
88 |
Here is a short overview of some of the features of this editor:
89 |
90 |
Adjust size constraints, rate, and relative size
91 |
Adapts to any root font size
92 |
Graphical overview of the final fluid values
93 |
Table view for keeping track of values on fixed screen width sizes.
94 |
95 |
Adjusting fluid settings
96 |
97 | Fluid typography settings can be easily adjusted either by using numerical inputs for more
98 | precise inputs or using range inputs for fine-tuning and smaller changes to easily track
99 | changes on the graph or table.
100 |
101 |
102 |
103 |
104 | Use editor to configure min and max constraints, change rate and direction and relative
105 | sizing for user font preferences
106 |
107 |
108 |
Code snippet
109 |
110 | Based on the configured fluid settings, a CSS clamp code is generated. You can easily
111 | copy the value by clicking the button on the left side or by selecting the value and copying it
112 | manually.
113 |
114 |
115 |
119 |
120 | The code snippet can be copied by clicking the button or by selecting the text and copying
121 | manually
122 |
123 |
124 |
Graph view
125 |
126 | Graph view can give you a general overview of fluid typography behavior. By hovering over the
127 | graph you can inspect individual values on specific screen sizes.
128 |
129 |
130 |
134 |
135 | A high-level overview of fluid typography behavior. Fluid value starts increasing from
136 | min-size to max size at around 400px of the viewport width and it stops at a maximum value
137 | at around 1000px,
138 |
139 |
140 |
141 | For a more detailed overview or tracking specific screen sizes, you can use the table view.
142 |
143 |
Table view
144 |
145 |
146 | A table view can give you a more detailed overview of fluid font sizes for specific viewport
147 | sizes. Viewport sizes can be easily added using the adjacent input. Likewise, individual
148 | values can be removed from the list by clicking the remove button for a specific value.
149 |
150 |
151 |
152 |
156 |
157 | Minimum, maximum, and fluid values are indicated in the table and values can be sorted by
158 | screen size in ascending or descending order.
159 |
160 |
161 |
162 |
163 |
164 |
176 | Feel free to contribute code to the project by
177 |
182 | forking the source code
183 | . Please consult the "Issues" tab or contact me directly as unsolicited code contributions
184 | may be rejected if they're not necessary or if they harm code quality, performance or
185 | functionality.
186 |
5 |