From 1ab9d839ecf65b62d8aa2fefb9c48752b57f25e7 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 28 Sep 2025 17:07:43 +0900 Subject: [PATCH 1/2] ui components docs --- ui-components.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 ui-components.md diff --git a/ui-components.md b/ui-components.md new file mode 100644 index 00000000..810f1360 --- /dev/null +++ b/ui-components.md @@ -0,0 +1,61 @@ +# Devup UI Components + +If you want to use Devup UI Components, you need to install it. + +``` +npm install @devup-ui/components +// or +yarn add @devup-ui/components +// or +pnpm add @devup-ui/components +``` + +You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. + +## using Vite + +``` +//vite.config.js +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { DevupUI } from "@devup-ui/vite-plugin"; + +export default defineConfig({ + plugins: [ + DevupUI({ + include: ["@devup-ui/components"], + }), + react(), + ], +}); +``` + +## using Next.js + +``` +// next.config.js +import { DevupUI } from '@devup-ui/next-plugin' + +export default DevupUI({ include: ["@devup-ui/components"]}) +``` + +## using Rsbuild + +``` +// rsbuild.config.mjs +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; +import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'; + +export default defineConfig({ +plugins: [pluginReact(), DevupUIRsbuildPlugin({ + include: ["@devup-ui/components"], + })], +}); +``` + +Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. + +## Examples + +// Form,Layout,theme etc. From fe2bdca9d9c203219c4c53c140501597c99fc633 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 28 Sep 2025 17:11:49 +0900 Subject: [PATCH 2/2] rewrite responsive docs --- responsive.md | 100 +++++++++++++++++++++++++++++++++++++++++++++++ ui-components.md | 61 ----------------------------- 2 files changed, 100 insertions(+), 61 deletions(-) create mode 100644 responsive.md delete mode 100644 ui-components.md diff --git a/responsive.md b/responsive.md new file mode 100644 index 00000000..85865346 --- /dev/null +++ b/responsive.md @@ -0,0 +1,100 @@ +# Responsive + +Devup UI supports responsive design. + +# Breakpoints + +Devup UI provides flexible responsive design capabilities through breakpoints. You can use either the default breakpoint system or customize your own breakpoints to match your design requirements. + +## Default Breakpoints + +By default, Devup UI uses a 5-breakpoint system with the following viewport ranges: + +| Index | Viewport Range | Description | +| ----- | -------------- | --------------- | +| 1st | ~ 479px | Mobile (small) | +| 2nd | 480px ~ 767px | Mobile (large) | +| 3rd | 768px ~ 991px | Tablet | +| 4th | 992px ~ 1279px | Desktop (small) | +| 5th | 1280px ~ | Desktop (large) | + +## Using Responsive Arrays + +You can add responsive design by using an array of maximum 5 elements for any style property: + +```jsx +const box = ( + + Hello + +); +``` + +### Null Values + +If any of the five elements are set to `null`, Devup UI uses the previous value for responsive design: + +```jsx +// Background will be: +// - red from 0px to 767px (1st and 2nd breakpoints) +// - green from 768px to 1279px (3rd and 4th breakpoints) +// - purple from 1280px and above (5th breakpoint) + +``` + +### Partial Arrays + +If the length of the array is less than 5, Devup UI makes responsive design according to the index of the element: + +```jsx +// Only specify mobile and desktop values + // red for mobile, blue for larger screens + +// Specify mobile, tablet, and desktop + +``` + +## Custom Breakpoints + +You can customize breakpoints by adding a `breakpoints` configuration to your `devup.json` file: + +### Configuration + +```json +{ + "theme": { + "breakpoints": [0, 460, 768, 1024] + } +} +``` + +### How Custom Breakpoints Work + +When you define custom breakpoints, the array values correspond to minimum viewport widths: + +- **1st element**: From 0px to the first breakpoint value +- **2nd element**: From first breakpoint to second breakpoint +- **3rd element**: From second breakpoint to third breakpoint +- **And so on...** + +### Example with Custom Breakpoints + +```json +// create devup.json +{ + "theme": { + "breakpoints": [0, 460, 1024] + } +} +``` + +```jsx +// With the custom breakpoints above: + +``` + +This would create the following responsive behavior: + +- `red` background from 0px to 459px +- `blue` background from 460px to 1023px +- `green` background from 1024px and above diff --git a/ui-components.md b/ui-components.md deleted file mode 100644 index 810f1360..00000000 --- a/ui-components.md +++ /dev/null @@ -1,61 +0,0 @@ -# Devup UI Components - -If you want to use Devup UI Components, you need to install it. - -``` -npm install @devup-ui/components -// or -yarn add @devup-ui/components -// or -pnpm add @devup-ui/components -``` - -You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. - -## using Vite - -``` -//vite.config.js -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import { DevupUI } from "@devup-ui/vite-plugin"; - -export default defineConfig({ - plugins: [ - DevupUI({ - include: ["@devup-ui/components"], - }), - react(), - ], -}); -``` - -## using Next.js - -``` -// next.config.js -import { DevupUI } from '@devup-ui/next-plugin' - -export default DevupUI({ include: ["@devup-ui/components"]}) -``` - -## using Rsbuild - -``` -// rsbuild.config.mjs -import { defineConfig } from '@rsbuild/core'; -import { pluginReact } from '@rsbuild/plugin-react'; -import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'; - -export default defineConfig({ -plugins: [pluginReact(), DevupUIRsbuildPlugin({ - include: ["@devup-ui/components"], - })], -}); -``` - -Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. - -## Examples - -// Form,Layout,theme etc.