Best CSS Frameworks 2022(바로 적용)
- 별도 수정없이 바로 적용되어 html 페이지를 예쁘게 꾸며주는 CSS 라이브러리
* Skeleton
https://github.com/dhg/Skeleton - 18.7k
- 2014-12, v2.0.4
- 용량 : 2.1k
- 바로 적용,
- 단점 : 폼에서 줄바꿈 됨, 업데이트 오래됨(개발중단?)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
* Milligram <===
https://github.com/milligram/milligram - 9.7k
- 2020.06 , v1.4.1
- 용량 : 3.1k
- 바로 적용
- 단점 : 폼에서 줄바꿈 됨,
- Skeleton 과 거의 유사 , 색이 들어감
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/milligram@1.4.1/dist/milligram.min.css">
//
추가 css
label {
width: auto !important;
display: inline-block !important;
padding-right: 10px !important;
}
input, button, label {
width: auto !important;
max-width: auto !important;
}//
* Pico
https://github.com/picocss/pico - 5.4k
- 2022-06 , v1.5.3
- 용량 : 11.1k
- 바로 적용
- 단점 : 너무 크게 표시, 버튼 넓이 100%
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.3/css/pico.min.css">
//-------------------------------------
// 참고
https://2021.stateofcss.com/en-US/technologies/css-frameworks/
//
* Bootstrap
https://github.com/twbs/bootstrap - 159k
- 2022-07 , v5.2.0
- js 필요
- 용량 : 29.8k
https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
* Tailwind CSS
https://github.com/tailwindlabs/tailwindcss - 59.2k
- 2022-08 , v3.1.8
- js 필요
- 용량 : 1.2k
- 바로 설정 안됨
https://cdn.jsdelivr.net/npm/tailwind@4.0.0/dist/tailwind.min.js">
* Bulma CSS Framework
https://github.com/jgthms/bulma - 45.8k
- 2022-05 , v0.9.4
- sass
based on Flexbox
- 용량 : 29.2k
- 바로 적용되는데 작음
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
//-----------------------------------------------------------------------------
* Semantic UI
https://github.com/semantic-org/semantic-ui - 50.1k
- js 필요
* Materialize CSS
https://github.com/Dogfalo/materialize - 38.7k
- 용량 : 18.2k
- js 필요
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
* Pure
https://github.com/pure-css/pure/ - 22.5k
https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css">
- 용량 : 4.6k
- 바로 설정 안됨, 거의 변화 없음
//-----------------------------------------------------------------------------
* Foundation
https://github.com/foundation/foundation-sites - 29.3k
- js 필요
- 용량 : 18.8k
- 바로 설정 안됨
* UI Kit
https://github.com/uikit/uikit - 17.6k
- js 필요
- 용량 : 30.5k
- 바로 설정 안됨
* primer /css
https://github.com/primer/css - 11.3k
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
- 용량 : 62.6k
- 바로 적용되는데 작음
//-----------------------------------------------------------------------------
* spectre
https://github.com/picturepan2/spectre - 11k
- 용량 : 10.4k
- 바로 적용되는데 작음
* tacit
https://github.com/yegor256/tacit - 1.5k - 5/10
https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css" />
- 용량 : 2.1k
- 바로 적용
- 스페이싱 문제 있음
//-----------------------------------------------------------------------------
Ant Design
https://github.com/ant-design/ant-design - 81.3k
- React UI library