Recap
• 본 디자인 가이드는 24년 2월 VAIV KMS 고도화 작업 때 추가한 가이드입니다.
• 해당 프로젝트는 Bootstrap을 사용해서 작업했습니다.
색상 등 커스텀이 필요한 속성들은 부트스트랩 변수를 재정의해서 사용했고,
컴포넌트에서 별도 타입의 스타일이 필요한 경우 function을 가져와서 추가해줬습니다. (예: 연한 색상의 badge컴포넌트가 필요한 경우)
• 아래에는 이런 경우로 추가된 컴포넌트들을 추가했습니다. 기본 부트스트랩 컴포넌트들은 공식문서에서 확인 후 사용하시면 됩니다.
• 작업 단위는 부트스트랩이 rem을 사용하고 있어서 연동하는 부분은 rem으로 작업, 그 외에는 px단위로 작업 (html 기본 글씨 크기: 16px)
• 사용하는 프레임워크 및 플러그인 리스트
스크롤바 디자인 https://kingsora.github.io/OverlayScrollbars/
스와이프 https://swiperjs.com/
캘린더 https://www.jqueryscript.net/demo/event-calendar-bootstrap/
트리뷰 https://github.com/jonmiles/bootstrap-treeview
필터링(버그가 있는 것 같음..) https://yiotis.net/filterizr/#/tutorials/quickstart
datepicker https://www.daterangepicker.com/
Popover
콘텐츠 이름
Badge
subtle style
primary-lighter
primary-light
primary
primary-dark
primary-darker
info-lighter
info-light
info
info-dark
info-darker
success-lighter
success-light
success
success-dark
success-darker
warning-lighter
warning-light
warning
warning-dark
warning-darker
danger-lighter
danger-light
danger
danger-dark
danger-darker
teal-lighter
teal-light
teal
teal-dark
teal-darker
purple-lighter
purple-light
purple
purple-dark
purple-darker
primary
primary
info
purple
primary-darker
text-danger-emphasis
text-success-emphasis
badge text-bg-blue-subtle badge text-bg-indigo-subtle badge text-bg-purple-subtle badge text-bg-pink-subtle badge text-bg-red-subtle badge text-bg-orange-subtle badge text-bg-yellow-subtle badge text-bg-green-subtle badge text-bg-teal-subtle badge text-bg-cyan-subtlebadge text-bg-primary-subtle
Button
btn-outline-primary btn-outline-secondary btn-outline-success btn-outline-info btn-outline-warning btn-outline-danger
btn has-icon btn has-icon is-stretch