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
- 바로 적용
- 색이 들어감
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/milligram@1.4.1/dist/milligram.min.css">



* 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/

CSS Framework 사용 만족도

// 
* 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