|
9 | 9 |
|
10 | 10 |
|
11 | 11 |
|
| 12 | + <link rel="prev" href="../01b-frontend-architecture/"> |
| 13 | + |
| 14 | + |
| 15 | + <link rel="next" href="../02-backend-architecture/"> |
12 | 16 |
|
13 | 17 |
|
14 | 18 | <link rel="icon" href="../../assets/favicon.ico"> |
|
235 | 239 |
|
236 | 240 |
|
237 | 241 |
|
| 242 | + |
| 243 | + |
238 | 244 |
|
239 | 245 |
|
240 | 246 |
|
241 | 247 |
|
242 | 248 |
|
243 | 249 |
|
244 | 250 |
|
245 | | - <li class="md-nav__item md-nav__item--nested"> |
| 251 | + <li class="md-nav__item md-nav__item--active md-nav__item--nested"> |
246 | 252 |
|
247 | 253 |
|
248 | 254 |
|
249 | | - <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > |
| 255 | + <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked> |
250 | 256 |
|
251 | 257 |
|
252 | 258 | <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> |
|
262 | 268 | <span class="md-nav__icon md-icon"></span> |
263 | 269 | </label> |
264 | 270 |
|
265 | | - <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> |
| 271 | + <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true"> |
266 | 272 | <label class="md-nav__title" for="__nav_2"> |
267 | 273 | <span class="md-nav__icon md-icon"></span> |
268 | 274 | Foundations |
|
342 | 348 |
|
343 | 349 |
|
344 | 350 |
|
| 351 | + |
345 | 352 |
|
346 | 353 |
|
347 | | - <li class="md-nav__item"> |
348 | | - <a href="../01c-design-systems-overview.md" class="md-nav__link"> |
| 354 | + |
| 355 | + <li class="md-nav__item md-nav__item--active"> |
| 356 | + |
| 357 | + <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc"> |
| 358 | + |
| 359 | + |
| 360 | + |
| 361 | + |
| 362 | + |
| 363 | + <label class="md-nav__link md-nav__link--active" for="__toc"> |
| 364 | + |
| 365 | + |
| 366 | + |
| 367 | + <span class="md-ellipsis"> |
| 368 | + 01 - Frontend Architecture (c) |
| 369 | + |
| 370 | + </span> |
| 371 | + |
| 372 | + |
| 373 | + <span class="md-nav__icon md-icon"></span> |
| 374 | + </label> |
| 375 | + |
| 376 | + <a href="./" class="md-nav__link md-nav__link--active"> |
349 | 377 |
|
350 | 378 |
|
351 | 379 |
|
|
356 | 384 |
|
357 | 385 |
|
358 | 386 | </a> |
| 387 | + |
| 388 | + |
| 389 | + |
| 390 | +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> |
| 391 | + |
| 392 | + |
| 393 | + |
| 394 | + |
| 395 | + |
| 396 | + |
| 397 | + <label class="md-nav__title" for="__toc"> |
| 398 | + <span class="md-nav__icon md-icon"></span> |
| 399 | + Table of contents |
| 400 | + </label> |
| 401 | + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> |
| 402 | + |
| 403 | + <li class="md-nav__item"> |
| 404 | + <a href="#the-moment-every-builder-hits" class="md-nav__link"> |
| 405 | + <span class="md-ellipsis"> |
| 406 | + 🌋 The Moment Every Builder Hits |
| 407 | + </span> |
| 408 | + </a> |
| 409 | + |
| 410 | +</li> |
| 411 | + |
| 412 | + <li class="md-nav__item"> |
| 413 | + <a href="#what-is-a-design-system" class="md-nav__link"> |
| 414 | + <span class="md-ellipsis"> |
| 415 | + 🧠 What Is a Design System? |
| 416 | + </span> |
| 417 | + </a> |
| 418 | + |
| 419 | +</li> |
| 420 | + |
| 421 | + <li class="md-nav__item"> |
| 422 | + <a href="#semantic-visual-tables-vs-token-registries" class="md-nav__link"> |
| 423 | + <span class="md-ellipsis"> |
| 424 | + 🔢 Semantic Visual Tables vs. Token Registries |
| 425 | + </span> |
| 426 | + </a> |
| 427 | + |
| 428 | +</li> |
| 429 | + |
| 430 | + <li class="md-nav__item"> |
| 431 | + <a href="#tool-by-tool-breakdown" class="md-nav__link"> |
| 432 | + <span class="md-ellipsis"> |
| 433 | + 🛠 Tool-by-Tool Breakdown |
| 434 | + </span> |
| 435 | + </a> |
| 436 | + |
| 437 | + <nav class="md-nav" aria-label="🛠 Tool-by-Tool Breakdown"> |
| 438 | + <ul class="md-nav__list"> |
| 439 | + |
| 440 | + <li class="md-nav__item"> |
| 441 | + <a href="#figma" class="md-nav__link"> |
| 442 | + <span class="md-ellipsis"> |
| 443 | + 🎨 Figma |
| 444 | + </span> |
| 445 | + </a> |
| 446 | + |
| 447 | +</li> |
| 448 | + |
| 449 | + <li class="md-nav__item"> |
| 450 | + <a href="#adobe-illustrator" class="md-nav__link"> |
| 451 | + <span class="md-ellipsis"> |
| 452 | + 🧮 Adobe Illustrator |
| 453 | + </span> |
| 454 | + </a> |
| 455 | + |
| 456 | +</li> |
| 457 | + |
| 458 | + <li class="md-nav__item"> |
| 459 | + <a href="#style-dictionary" class="md-nav__link"> |
| 460 | + <span class="md-ellipsis"> |
| 461 | + 🧬 Style Dictionary |
| 462 | + </span> |
| 463 | + </a> |
| 464 | + |
| 465 | +</li> |
| 466 | + |
| 467 | + <li class="md-nav__item"> |
| 468 | + <a href="#zeroheight" class="md-nav__link"> |
| 469 | + <span class="md-ellipsis"> |
| 470 | + 📚 Zeroheight |
| 471 | + </span> |
| 472 | + </a> |
| 473 | + |
| 474 | +</li> |
| 475 | + |
| 476 | + <li class="md-nav__item"> |
| 477 | + <a href="#chainlift" class="md-nav__link"> |
| 478 | + <span class="md-ellipsis"> |
| 479 | + 🔗 ChainLift |
| 480 | + </span> |
| 481 | + </a> |
| 482 | + |
| 483 | +</li> |
| 484 | + |
| 485 | + <li class="md-nav__item"> |
| 486 | + <a href="#notion" class="md-nav__link"> |
| 487 | + <span class="md-ellipsis"> |
| 488 | + 📘 Notion |
| 489 | + </span> |
| 490 | + </a> |
| 491 | + |
| 492 | +</li> |
| 493 | + |
| 494 | + </ul> |
| 495 | + </nav> |
| 496 | + |
| 497 | +</li> |
| 498 | + |
| 499 | + <li class="md-nav__item"> |
| 500 | + <a href="#tool-comparison-table" class="md-nav__link"> |
| 501 | + <span class="md-ellipsis"> |
| 502 | + 📊 Tool Comparison Table |
| 503 | + </span> |
| 504 | + </a> |
| 505 | + |
| 506 | +</li> |
| 507 | + |
| 508 | + <li class="md-nav__item"> |
| 509 | + <a href="#visual-decision-tree-text-style" class="md-nav__link"> |
| 510 | + <span class="md-ellipsis"> |
| 511 | + 🌱 Visual Decision Tree (Text Style) |
| 512 | + </span> |
| 513 | + </a> |
| 514 | + |
| 515 | +</li> |
| 516 | + |
| 517 | + <li class="md-nav__item"> |
| 518 | + <a href="#final-thought" class="md-nav__link"> |
| 519 | + <span class="md-ellipsis"> |
| 520 | + ✍️ Final Thought |
| 521 | + </span> |
| 522 | + </a> |
| 523 | + |
| 524 | +</li> |
| 525 | + |
| 526 | + </ul> |
| 527 | + |
| 528 | +</nav> |
| 529 | + |
359 | 530 | </li> |
360 | 531 |
|
361 | 532 |
|
|
0 commit comments