코드샌드박스 example

코드 참조시 반드시 출처 표기 부탁드립니다!

1. csd ?

css codes for design systems

emotion 또는 styled-components와 같은 css in js 라이브러리를 활용해 css를 작성할 때 반복되는 코드를 줄여주고 디자인 시스템을 빠르게 적용할 수 있도록 돕는 CSSRules 라이브러리입니다.
bootstrap를 참고하였으며 프로젝트를 진행하며 적용해본 스타일링 방법입니다.
자세한 csd 사용법은 detail에 작성했습니다.

2. csd 라이브러리에서 제공하는 디자인 시스템을 그대로 사용할 경우

csd는 material ui의 컬러 시스템과 airbnb 사이트 클론 프로젝트를 진행하며 구축했던 디자인 시스템을 포함하고 있습니다. 별도의 디자인 시스템을 구축하지 않는 경우라면 1) csd package 설치 후 사용해주시면 됩니다. 만약 새로운 디자인 시스템을 구축하는 경우라면 3. 커스텀한 디자인 시스템을 적용할 경우를 참고해주시기 바랍니다.

1) csd package 설치

npm i csd

2) csd package 사용

// Nav.js

import s from 'csd'

const StyledNav = styled.div`
  ${s.alignChild.rowCenter}
  background-color: ${s.colors.amber[100]}
  color: ${s.colors.purple[100]}
`

const Nav = () => <StyledNav>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</StyledNav>

3. 커스텀한 디자인 시스템을 적용할 경우

새로운 디자인 시스템을 적용할 경우 csd에서 기본적으로 제공하는 디자인 시스템 관련 파일들을 수정한 후 npm run build한 index.js와 index.d.ts 파일을 프로젝트로 옮겨주신 후 webpack alias를 적용해 import s from 'S'문으로 새롭게 구성된 CSSRules를 사용해주시면 됩니다.

1) 레포 클론

git clone https://github.com/ChangHyun2/csd

2) 디자인 시스템 관련 파일 수정

관련 파일/폴더는 아래와 같습니다.

- colors
- CSSRules
  - pad.js
  - round.js
  - spacing.js
  - typo.js
  - zIndex.js
- values.js
- ts files

자동완성을 위해 ts 파일을 작성해주시면 좋습니다.

3) 파일 번들링

npm run build

웹팩 build시, lib 폴더로 index.js 파일이 생성됩니다. 생성된 파일을 프로젝트 폴더로 옮기고 webpack alias를 통해 import s from 'S'의 짧은 구문으로 CSSRules를 import해주시면 됩니다.

4) 프로젝트에서 사용하기

// Nav.js

const StyledNav = styled.div`
  ${s.alignChild.rowCenter}
  background-color: ${s.colors.myDesignSystemColor}
  color: ${s.colors.myDesignSystemColor2}
`

const Nav = () => <StyledNav>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</StyledNav>

보완할 부분

아직 완성도가 높지 않은 라이브러리입니다. contribute 또는 다음 버전을 위한 피드백을 해주신다면 감사하겠습니다! 사용 관련 문의는 [email protected]로 부탁드립니다.

• baseComponent
• pallete
• ts 파일
• README csd API
• 스토리북 추가
• ...