관리자 페이지나 사이트 제작을 위해 혹은 다양한 CSS/HTML 스타일을 공부하기 위해
다양한 CSS 프레임워크를 배워두면 좋다.
1. 부트스트랩
부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.
프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, 보통의 HTML 요소들
bootstrapk.com
- 배우기 쉽다.
- 다양한 템플릿이 있다.
- 문서화가 잘 되어있다.
- 커스텀이 어렵다
- 너무 많은 클래스로 인해 사용자 정의 스타일이 어렵다.
- 복잡하다.
2. Materialise CSS
Documentation - Materialize
materializecss.com
- 배우기 쉽다.
- 간단한 그리드 시스템.
- 구성 요소 및 효과가 다양하다.
- 흔하다.
3. Semantic UI Semantic UI
Semantic UI
Shipping Choose your shipping options
semantic-ui.com
- 직관적인 클래스 네임
- 기본이 잘만들어져 있어서 커스텀이 용이하다.
- 배우기 어렵다.
4. material-ui
Material-UI: A popular React UI framework
React components for faster and easier web development. Build your own design system, or start with Material Design.
material-ui.com
- 유연한 디자인.
- materize CSS의 구글과 같은 디자인과 Bootstrap의 테이블과 같은 디자인을 가지고 있다.
- 배우기 어렵다.
- React.js 및 JavaScript에 대한 지식이 필요하다.
5. UIKit
UIkit
UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.
getuikit.com
- 현대적인 디자인.
- 다양한 구성 요소.
- 구성 요소는 스타일에 영향을 미치지 않는다.
- iOS 애플리케이션의 사용자 인터페이스를 구현하고 이벤트를 관리한다.
- flexbox 기반 레이아웃 사용.
- 배우기 어렵다.
- less 또는 sass로 제공된다.
6. foundation
The most advanced responsive front-end framework in the world. | Foundation
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any d
foundation.zurb.com
- rem 단위 사용
- 반응형, 모바일 친화적이다.
- eBay, Disney, Cisco, Mozilla 등의 대기업에서 사용된다.
- 배우기 어렵다.
- sass를 기반으로 한다.
7. element ui
https://element.eleme.io/#/en-US
Element - The world's most popular Vue UI framework
element.eleme.io
- 심플한 ui 참고에 좋다.
8. pure css
Layouts – Pure
Responsive Horizontal-to-Scrollable Menu Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed. View Download
purecss.io
- 레이아웃 참조에 좋다.
9. material design Lite
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience t
getmdl.io
- 레이아웃 참조에 좋다.
10. bulma
Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
bulma.io
- flexbox에 의존한다.
- 모바일 친화적이다.
11. Tailwind
Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
Documentation for the Tailwind CSS framework.
tailwindcss.com
- 단일 목적 유틸리티 클래스 사용
- 공부가 필요하다.
12. Picnic CSS
Picnic CSS
It's alive! Get the best experience for your users with many subtle and carefully crafted CSS transitions. Fun fact: there's not a single line of JavaScript for controlling the multi-step form on the right ⇒ Tests
picnicss.com
- HTML 클래스 이름을 추가하지 않아도 사전 스타일이 지정된다.
- 순수 CSS 구성 요소가 있다(모달, 탭, 파일 업로드, 툴팁)
13. PaperCSS
https://www.getpapercss.com/docs/
PaperCSS
The less formal CSS framework
www.getpapercss.com
- 손그림 스타일
14. NES.css
https://nostalgic-css.github.io/NES.css/
NES.css
NES-style CSS Framework | ファミコン風CSSフレームワーク
nostalgic-css.github.io
- 8비트 복고풍의 손그림 스타일
15. Animate css
https://daneden.github.io/animate.css/
Animate.css
daneden.github.io
- 다양한 CSS 애니메이션 효과를 사용할 수 있다.
CSS 프레임워크가 필요한 이유
- HTML/CSS를 모르는 사람들도 쉽게 접근할 수 있다.
- 해당 프레임워크만 쓸 수 있으면 누구나 다 확장과 유지 관리가 가능하다.
- 짧은 시간 내에 유지 관리 가능한 UI를 만들 수 있다.
참고 :
https://www.creativebloq.com/features/best-css-frameworks
https://www.skysilk.com/blog/2018/6-best-css-frameworks-2019/
'Web > Styles' 카테고리의 다른 글
| [CSS] footer 하단에 고정 시키기 (0) | 2020.05.13 |
|---|---|
| [CSS] display:flex 속성 (0) | 2020.03.05 |
| [CSS3] display: flex 정리 (0) | 2019.11.26 |
| [CSS] 기기별 미디어쿼리 (0) | 2019.09.10 |
| [CSS] background-attachment:fixed; parallax에 최적화 (0) | 2019.06.12 |