From 9498c5e16d4147feb919e366289dc3c1c15e4387 Mon Sep 17 00:00:00 2001 From: Aron Date: Thu, 20 Jun 2024 23:18:10 +0800 Subject: [PATCH] Update routes --- .../[locale]/guide/configuration/content.mdx | 2 +- .../introduction/components/Comparisons.mdx | 6 +-- .../guide/migration/tailwindcss/content.mdx | 2 +- .../responsive-design/components/Default.tsx | 50 ------------------- .../guide/responsive-design/content.mdx | 8 +-- .../style-declarations/components/Tokens.mdx | 2 +- site/app/[locale]/guide/variables/content.mdx | 6 +-- .../[locale]/reference/content/content.mdx | 2 +- .../reference/font-family/content.mdx | 2 +- .../[locale]/reference/screens/content.mdx | 8 +-- 10 files changed, 16 insertions(+), 72 deletions(-) delete mode 100644 site/app/[locale]/guide/responsive-design/components/Default.tsx diff --git a/site/app/[locale]/guide/configuration/content.mdx b/site/app/[locale]/guide/configuration/content.mdx index f8a719bdf..cbaa84e0c 100644 --- a/site/app/[locale]/guide/configuration/content.mdx +++ b/site/app/[locale]/guide/configuration/content.mdx @@ -46,7 +46,7 @@ Customizing abstract [styles](/guide/styles) for your design system. ### `.variables` -Customizing [variables](/reference/variables) for your design tokens. +Customizing [variables](/guide/variables) for your design tokens. ### `.extends` diff --git a/site/app/[locale]/guide/introduction/components/Comparisons.mdx b/site/app/[locale]/guide/introduction/components/Comparisons.mdx index 3667997d0..3b359567e 100644 --- a/site/app/[locale]/guide/introduction/components/Comparisons.mdx +++ b/site/app/[locale]/guide/introduction/components/Comparisons.mdx @@ -132,7 +132,7 @@ export const bootstrap = brands.find(({ name }) => name === 'Bootstrap') The ability to customize tokens - [Breakpoints](/guide/responsive-design) and [Screens](/reference/variables#screens-and-breakpoints) + [Breakpoints](/guide/responsive-design) and [Screens](/reference/screens) 11 5 5 @@ -144,13 +144,13 @@ export const bootstrap = brands.find(({ name }) => name === 'Bootstrap') ~100 - [Variables with Modes](/reference/variables-with-modes) + [Variables with Modes](/guide/variables-with-modes) - [Selectors](/reference/variables-with-modes) + [Selectors](/guide/variables-with-modes) diff --git a/site/app/[locale]/guide/migration/tailwindcss/content.mdx b/site/app/[locale]/guide/migration/tailwindcss/content.mdx index 806464e20..3c197b429 100644 --- a/site/app/[locale]/guide/migration/tailwindcss/content.mdx +++ b/site/app/[locale]/guide/migration/tailwindcss/content.mdx @@ -116,7 +116,7 @@ Not just media queries but feature queries and [more](/reference/syntaxes). ## Configuration ### Add screens -Define responsive breakpoints using variable [screens](/reference/variables#add-a-screen-size). +Define responsive breakpoints using variable [screens](/guide/variables#add-a-screen-size). ```js name=master.css.js -/** @type {import('tailwindcss').Config} */ -module.exports = { diff --git a/site/app/[locale]/guide/responsive-design/components/Default.tsx b/site/app/[locale]/guide/responsive-design/components/Default.tsx deleted file mode 100644 index cdbe31238..000000000 --- a/site/app/[locale]/guide/responsive-design/components/Default.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { variables } from '@master/css' -import DocTable from 'internal/components/DocTable' - -const descriptions = { - '4xs': 'iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…', - '3xs': 'Blackberry Passport / Amazon Kindle Fire HD 7…', - '2xs': 'LG G Pad 8.3 / Amazon Kindle Fire …', - 'xs': 'Microsoft Surface / iPad Pro 9.7 / iPad Mini …', - 'sm': 'iPad Air 10.5 / iPad Pro 11 …', - 'md': 'iPad Pro 12.9 / Microsoft Surface Pro 3 …', - 'lg': 'Google Chromebook Pixel / Samsung Chromebook …', - 'xl': 'Macbook Air 2020 M1 / MacBook Pro 15 …', - '2xl': 'Dell Inspiron 14 series …', - '3xl': 'Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …', - '4xl': 'Dell UltraSharp U2711 / Apple iMac 27-inch …' -} - -export default () => - - - - Token - Size - Devices - - - - { - [ - ...Object.keys(variables.screen) - .filter((eachBreakpointName) => typeof variables.screen[eachBreakpointName as keyof typeof variables.screen] === 'number') - .map((eachBreakpointName) => { - // @ts-ignore - const eachBreakpoint = variables.screen[eachBreakpointName] - return ( - - {eachBreakpointName} - - {eachBreakpoint}px - - - {descriptions[eachBreakpointName as keyof typeof descriptions]} - - - ) - }) - ] - } - - \ No newline at end of file diff --git a/site/app/[locale]/guide/responsive-design/content.mdx b/site/app/[locale]/guide/responsive-design/content.mdx index 7af3dc463..9ddb6424c 100644 --- a/site/app/[locale]/guide/responsive-design/content.mdx +++ b/site/app/[locale]/guide/responsive-design/content.mdx @@ -5,11 +5,11 @@ ```html
…
``` -The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to [11 predefined screen sizes](/reference/variables#screens-and-breakpoints) available. +The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to [11 predefined screen sizes](/reference/screens) available, from `4xs` ~ `4xl`. This comprehensive coverage caters to the modern web layout scenario. -This comprehensive coverage caters to the modern web layout scenario. - -To customize responsive breakpoints, see the [custom theme](/reference/variables#screens-and-breakpoints) documentation. +To customize responsive breakpoints, see the [variables](/guide/variables#screens-and-breakpoints) documentation. + +--- ## Strategies When it comes to designing and developing responsive web pages, [mobile-first](#mobile-first) and [desktop-first](#desktop-first) are two common development strategies. The decision between these two strategies depends on your project requirements, target audience, and operational decisions. diff --git a/site/app/[locale]/guide/style-declarations/components/Tokens.mdx b/site/app/[locale]/guide/style-declarations/components/Tokens.mdx index 27c65802d..132073f2e 100644 --- a/site/app/[locale]/guide/style-declarations/components/Tokens.mdx +++ b/site/app/[locale]/guide/style-declarations/components/Tokens.mdx @@ -13,5 +13,5 @@ Applying certain property values ​​is often not so concise in class attribut import VariablesOverview from '~/site/app/[locale]/guide/variables/components/Overview.mdx' -By default, Master CSS uses predefined variables to simplify native values. You can customize [variables](/reference/variables) to implement your design system, for example: +By default, Master CSS uses predefined variables to simplify native values. You can customize [variables](/guide/variables) to implement your design system, for example: \ No newline at end of file diff --git a/site/app/[locale]/guide/variables/content.mdx b/site/app/[locale]/guide/variables/content.mdx index a7946ba54..c361fdab0 100644 --- a/site/app/[locale]/guide/variables/content.mdx +++ b/site/app/[locale]/guide/variables/content.mdx @@ -9,7 +9,7 @@ Design tokens are a fundamental part of design systems and are crucial for maint By default, Master provides three [font family](/reference/font-family) variables, `sans`, `serif`, and `mono`, to facilitate your use as fallbacks when adding custom fonts. ### Add fonts -Customize your font tokens by defining [variables](/reference/variables). For example, add `Inter` as the general font and `Fira Code` as the code font. +Customize your font tokens by defining [variables](/guide/variables). For example, add `Inter` as the general font and `Fira Code` as the code font. ```js name=master.css.js import { variables } from '@master/css' @@ -179,7 +179,7 @@ Conditionally apply styles using default screen variables as responsive breakpoi The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation. ### Add a screen size -Add your screen size by defining [variables](/reference/variables). +Add your screen size by defining [variables](/guide/variables). {require('!!raw-loader!./tests/add-a-screen-size/master.css.js').default} Apply the defined screen variables anywhere: {require('!!raw-loader!./tests/add-a-screen-size/template.html').default} @@ -230,7 +230,7 @@ For other intermediate values, `0`, `1`, `2`, ..., we tend to use unitless token ``` ### Add a spacing -Customize your spacing [variables](/reference/variables), in `xs~xl`. +Customize your spacing [variables](/guide/variables), in `xs~xl`. ```js name=master.css.js export default { variables: { diff --git a/site/app/[locale]/reference/content/content.mdx b/site/app/[locale]/reference/content/content.mdx index 83655871e..7b0984c46 100644 --- a/site/app/[locale]/reference/content/content.mdx +++ b/site/app/[locale]/reference/content/content.mdx @@ -22,7 +22,7 @@ Whitespace is used in the class attribute of the template to separate different ``` Is it not very kind to use `\00a0` in markup? -(o) Predefine your content [variables](/reference/variables) without `\00a0`. +(o) Predefine your content [variables](/guide/variables) without `\00a0`. ```js name=master.css.js /** @type {import('@master/css').Config} */ export default { diff --git a/site/app/[locale]/reference/font-family/content.mdx b/site/app/[locale]/reference/font-family/content.mdx index 158111051..9004fb5ff 100644 --- a/site/app/[locale]/reference/font-family/content.mdx +++ b/site/app/[locale]/reference/font-family/content.mdx @@ -17,7 +17,7 @@ -Using shorthand with predefined [variables](/reference/variables) to simplify the native syntax. +Using shorthand with predefined [variables](/guide/variables) to simplify the native syntax. ```html
+
Recommanded diff --git a/site/app/[locale]/reference/screens/content.mdx b/site/app/[locale]/reference/screens/content.mdx index cc06b989c..660c5f19c 100644 --- a/site/app/[locale]/reference/screens/content.mdx +++ b/site/app/[locale]/reference/screens/content.mdx @@ -16,10 +16,4 @@ Conditionally apply styles using default screen variables as responsive breakpoi ```html
…
``` -The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation. - -### Create a responsive container -Fixed element width to a screen size as a responsive container. -```html -
…
-``` \ No newline at end of file +The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation. \ No newline at end of file