Design Component System - uikit
-
Design Component System
-
λ°λ³΅λ μ»΄ν¬λνΈλ€μ μΉ΄ν κ³ λ¦¬ν νκ³ , λμμΈνμ¬ μ»΄ν¬λνΈλ₯Ό ν΅ν΄ μ¬μ¬μ©μ± λμ
-
νκ·Έκ° λͺ μνκ° λμ΄, μ½λκ° μ§κ΄μ μ΄λ©΄μ, μ¬μ©νλ λͺ©μ μ μ κΈ°κ° νΈν΄μ§
- Switch(Toggle), Input, Button, Tab, Select, Radio....
<input type="checkbox"> => Checkbox Component Design => <CheckBox> <input type="radio"> => Radio Component Design => <Radio>
storybook
npm i
npm run storybook
build
npm run build
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
The primary way to style elements with emotion is the css
prop. It provides a concise and flexible API to style your components.
- Change the rendered tag using
withComponent
- Targeting another emotion component
- Customizing prop forwarding
- Composing dynamic styles
as
prop- Nesting components:
&
Composition is one of the most powerful and useful patterns in Emotion. You can compose styles together by interpolating value returned from css
in another style block.
Twin blends the magic of Tailwind with the flexibility of css-in-js
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties.
To use Styled System, install a CSS-in-JS library such as Styled Components or Emotion.
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.