● 최종 작업 : 2024-09-05 갱신 완료
● 검색되는 CSS 프레임워크의 기능/장점/단점을 퍼플렉시티로 요약중
● 지원 기능에 대한 개인리뷰 종합 : 변경중
1. BootStrap
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
Bootstrap은 웹 개발을 위한 인기 있는 CSS 프레임워크로, 반응형 디자인을 쉽게 구현할 수 있도록 도와줍니다. Twitter에서 개발하였으며, HTML, CSS, JavaScript로 구성되어 있습니다.
- 기능
반응형 그리드 시스템 : 다양한 화면 크기에 맞춰 레이아웃을 자동으로 조정합니다.
UI 컴포넌트 : 버튼, 네비게이션 바, 모달 등 다양한 UI 요소를 제공합니다.
JavaScript 플러그인 : 인터랙티브한 기능을 추가할 수 있는 다양한 플러그인을 포함합니다.
커스터마이징 : Sass를 이용해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
빠른 개발 : 미리 정의된 스타일과 컴포넌트를 사용해 개발 속도를 높일 수 있습니다.
일관성 : 다양한 브라우저와 기기에서 일관된 디자인을 유지합니다.
커뮤니티 지원 : 방대한 문서와 활발한 커뮤니티로 문제 해결이 용이합니다
- 단점
무거운 파일 크기 : 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 커질 수 있습니다.
학습 곡선 : 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2024.02 v5.3.3
- 파일 사이즈
bootstrap.css : 약 150kb
bootstrap.min.css : 약 50kb
- 웹사이트
- 깃허브
https://github.com/twbs/bootstrap
2. Foundation
The most advanced responsive front-end framework in the world. | Foundation
Foundation Download Foundation 6 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
get.foundation
Foundation은 ZURB에서 개발한 강력한 CSS 프레임워크로, 반응형 웹 디자인을 지원하며 유연성과 커스터마이징이 뛰어납니다. 다양한 UI 컴포넌트와 JavaScript 플러그인을 제공합니다
- 기능
반응형 그리드 시스템: 다양한 화면 크기에 맞춰 자동으로 조정되는 그리드 레이아웃을 제공합니다.
UI 컴포넌트: 버튼, 카드, 모달 등 다양한 UI 요소를 쉽게 사용할 수 있습니다.
모듈화: 필요한 기능만 선택적으로 사용할 수 있어 경량화가 가능합니다.
Sass 지원: Sass를 통해 스타일을 쉽게 커스터마이징할 수 있습니다.
- 장점
유연성 : 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
접근성 : 웹 접근성을 고려한 컴포넌트를 제공합니다.
커뮤니티 지원 : 활발한 커뮤니티와 문서로 문제 해결이 용이합니다.
- 단점
학습 곡선 : 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
파일 크기 : 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 커질 수 있습니다.
- 최근 릴리즈
2023.08 v6.8.1
- 파일 사이즈
foundation.css : 약 200kb
foundation.min.css : 약 100kb
- 웹사이트
- 깃허브
https://github.com/foundation/foundation-sites
3. 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
Bulma는 현대적인 CSS 프레임워크로, Flexbox 기반의 반응형 디자인을 지원합니다. 간결하고 직관적인 문법으로 빠른 개발을 가능하게 하며, 커스터마이징이 용이합니다.
- 기능
Flexbox 기반 : 레이아웃을 쉽게 구성할 수 있는 Flexbox 시스템을 제공합니다.
모듈화 : 필요한 컴포넌트만 선택적으로 사용할 수 있어 경량화가 가능합니다.
UI 컴포넌트 : 버튼, 카드, 네비게이션 바 등 다양한 UI 요소를 제공합니다.
Sass 지원 : Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
간결한 문법 : 직관적인 클래스 이름으로 사용이 쉽습니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정됩니다.
커스터마이징 : 기본 스타일을 쉽게 수정할 수 있어 유연한 디자인이 가능합니다.
- 단점
제한된 JavaScript 기능 : 기본적으로 JavaScript 플러그인을 제공하지 않아 추가적인 기능 구현이 필요할 수 있습니다.
문서화 부족 : 다른 프레임워크에 비해 문서화가 상대적으로 부족할 수 있습니다.
- 최근 릴리즈
2024.07 v1.0.2
- 파일 사이즈
bulma.css : 240kb
bluma.min.css : 203kb
- 웹사이트
https://bulma.io/
- 깃허브
https://github.com/jgthms/bulma
4. Pure.CSS
Pure
Pure is a ridiculously tiny CSS library you can use to start any web project.
purecss.io
Pure.css는 Yahoo에서 개발한 경량 CSS 프레임워크로, 최소한의 스타일을 제공하여 빠르고 간결한 웹 개발을 지원합니다. 기본적인 UI 컴포넌트를 제공하며, 다른 스타일과 쉽게 통합할 수 있습니다.
- 기능
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
모듈화 : 필요한 컴포넌트만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인 : 모바일 및 데스크톱 환경에 적합한 반응형 레이아웃을 지원합니다.
기본 UI 컴포넌트 : 버튼, 폼, 테이블 등 기본적인 UI 요소를 제공합니다.
- 장점
간단한 사용법 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 로딩 : 경량화된 구조로 인해 페이지 로딩 속도가 빠릅니다.
다른 프레임워크와의 호환성 : 다른 CSS 프레임워크와 쉽게 통합할 수 있습니다.
- 단점
제한된 스타일 : 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
- 최근 릴리즈
2022-10 v3.0.0
- 파일 사이즈
pure.css : 26kb
pure.min.css : 16kb
- 웹사이트
https://purecss.io/
- 깃허브
https://github.com/pure-css/pure
5. Semantic UI
Semantic UI
Shipping Choose your shipping options
semantic-ui.com
Semantic UI는 자연어와 유사한 클래스 이름을 사용하여 직관적인 웹 개발을 지원하는 CSS 프레임워크입니다. 다양한 UI 컴포넌트와 모듈을 제공하여 개발자가 쉽게 사용할 수 있도록 설계되었습니다.
- 기능
자연어 클래스 : 클래스 이름이 의미를 명확히 전달하여 코드 가독성이 높습니다.
모듈화 : 필요한 컴포넌트만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
UI 컴포넌트 : 버튼, 카드, 모달, 드롭다운 등 다양한 UI 요소를 제공합니다.
- 장점
가독성 : 자연어와 유사한 클래스 이름으로 코드 이해가 쉽습니다.
풍부한 컴포넌트 : 다양한 UI 요소와 플러그인을 제공하여 개발 속도를 높입니다.
커스터마이징 : 테마와 스타일을 쉽게 수정할 수 있어 유연한 디자인이 가능합니다.
- 단점
파일 크기 : 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선 : 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2022-10 v2.5.0
- 파일 사이즈
semantic.css : 약 70kb
semantic.min.css : 약 30kb
- 웹사이트
https://semantic-ui.com/
- 깃허브
https://github.com/Semantic-Org/Semantic-UI
6. Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
Tailwind CSS는 유틸리티-퍼스트 CSS 프레임워크로, 클래스 기반의 스타일링을 통해 빠르고 효율적인 웹 개발을 지원합니다. 개발자는 미리 정의된 유틸리티 클래스를 조합하여 원하는 디자인을 쉽게 구현할 수 있습니다.
- 기능
유틸리티 클래스 : 다양한 스타일을 적용할 수 있는 작은 클래스들이 제공되어, 조합하여 사용할 수 있습니다.
반응형 디자인 : 미디어 쿼리를 쉽게 적용할 수 있는 유틸리티 클래스를 제공합니다.
커스터마이징 : Tailwind의 설정 파일을 통해 색상, 폰트, 간격 등을 쉽게 수정할 수 있습니다.
플러그인 시스템 : 추가 기능을 쉽게 확장할 수 있는 플러그인 시스템을 지원합니다.
- 장점
빠른 개발 : 유틸리티 클래스를 사용하여 빠르게 스타일을 적용할 수 있습니다.
일관성 : 미리 정의된 스타일을 사용하여 일관된 디자인을 유지할 수 있습니다.
커스터마이징 용이 : 설정 파일을 통해 쉽게 스타일을 수정하고 확장할 수 있습니다.
- 단점
HTML 코드의 복잡성: 많은 유틸리티 클래스를 사용하게 되어 HTML 코드가 복잡해질 수 있습니다.
학습 곡선: 유틸리티-퍼스트 접근 방식에 익숙하지 않은 개발자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2024.08 v3.4.10
- 파일 사이즈
tailwind.css : 약 3.5MB (개발 모드)
tailwind.min.css : 약 1.2MB (프로덕션 모드)
- 웹사이트
https://tailwindcss.com/
- 깃허브
https://github.com/tailwindlabs/tailwindcss
- 개인리뷰
CSS 속성 + 속성값을 한 단어로 모두 정의해 놓은듯.
border-color : white → border-white
color : black → text-black
모두 표현할수 있지만 태그에 붙어나는 class 가 엄청 늘어나는 느낌. 간결한 느낌은 사라짐
7. UI Kit
UIkit
UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.
getuikit.com
UIkit은 모던 웹 애플리케이션을 위한 경량 CSS 프레임워크로, 반응형 디자인과 다양한 UI 컴포넌트를 제공합니다. 직관적인 클래스와 모듈화된 구조로 빠르고 효율적인 개발을 지원합니다.
- 기능
모듈화 : 필요한 컴포넌트만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
UI 컴포넌트 : 버튼, 카드, 모달, 드롭다운 등 다양한 UI 요소를 제공합니다.
JavaScript 플러그인 : 인터랙티브한 기능을 추가할 수 있는 다양한 플러그인을 포함합니
- 장점
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
커스터마이징 : Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
일관성 : 다양한 브라우저와 기기에서 일관된 디자인을 유지합니다.
- 단점
학습 곡선 : 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
문서화 부족 : 다른 프레임워크에 비해 문서화가 상대적으로 부족할 수 있습니다.
- 최근 릴리즈
2024.08 v3.21.11
- 파일크기
uikit.css : 367kb / uikit.js : 302kb
uikit.min.css : 257kb / uikit.min.js : 137kb
- 웹사이트
https://getuikit.com/
- 깃허브
https://github.com/uikit/uikit
8. Materialize
Documentation - Materialize
materializecss.com
Materialize는 Google의 Material Design 가이드라인을 기반으로 한 CSS 프레임워크로, 현대적이고 직관적인 웹 디자인을 지원합니다. 다양한 UI 컴포넌트와 반응형 그리드 시스템을 제공하여 개발자가 쉽게 사용할 수 있도록 설계되었습니다.
- 장점:
Google의 Material Design을 기반으로 하기 때문에, 모바일 친화적이며 시각적으로 매력적인 UI를 구현할 수 있습니다.
Sass를 사용하여 유연한 커스터마이징이 가능합니다.
CDN 지원
- 기능
반응형 그리드 시스템 : 다양한 화면 크기에 맞춰 자동으로 조정되는 그리드 레이아웃을 제공합니다.
UI 컴포넌트 : 버튼, 카드, 모달, 드롭다운 등 다양한 UI 요소를 제공합니다.
JavaScript 플러그인 : 인터랙티브한 기능을 추가할 수 있는 다양한 플러그인을 포함합니다.
Material Design 스타일 : Google의 Material Design 원칙을 따르는 디자인 요소를 제공합니다.
- 장점
일관된 디자인 : Material Design 가이드라인을 따르므로 일관된 사용자 경험을 제공합니다.
사용 용이성 : 직관적인 클래스 이름과 구조로 사용이 쉽습니다.
풍부한 컴포넌트 : 다양한 UI 요소와 플러그인을 제공하여 개발 속도를 높입니다.
- 단점
파일 크기 : 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
커스터마이징 제한 : 기본 스타일이 고정되어 있어, 독창적인 디자인을 구현하기 어려울 수 있습니다.
- 최근릴리즈
2018.09 v1.0.0
- 파일 사이즈
materialize.css : 약 150kb
materialize.min.css : 약 50kb
- 웹사이트
https://materializecss.com/
- 깃허브
https://github.com/Dogfalo/materialize
9. skeleton
Skeleton: Responsive CSS Boilerplate
Heading Heading Heading Heading Heading Heading The base type is 15px over 1.6 line height (24px) Bolded Italicized Colored Underlined
getskeleton.com
Skeleton은 간단하고 경량화된 CSS 프레임워크로, 빠른 프로토타입 제작과 기본적인 반응형 웹 디자인을 지원합니다. 최소한의 스타일과 구조를 제공하여 개발자가 쉽게 사용할 수 있도록 설계되었습니다.
- 기능
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
반응형 그리드 시스템 : 12컬럼 그리드 시스템을 제공하여 다양한 화면 크기에 맞춰 자동으로 조정됩니다.
기본 UI 컴포넌트 : 버튼, 폼, 테이블 등 기본적인 UI 요소를 제공합니다.
간단한 사용법 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
- 장점
빠른 개발 : 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
가벼운 파일 크기 : 불필요한 스타일이 적어 페이지 로딩 속도가 빠릅니다.
사용 용이성 : 직관적인 클래스 이름으로 사용이 쉽습니다.
- 단점
제한된 스타일 : 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족 : 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2014-12 v2.0.4
- 파일 사이즈
skeleton.css : 12kb
- 웹사이트
http://getskeleton.com/
- 깃허브
https://github.com/dhg/Skeleton
10. Milligram
Milligram - A minimalist CSS framework
Milligram - A minimalist CSS framework
milligram.io
Milligram은 경량화된 CSS 프레임워크로, 기본적인 스타일을 제공하여 빠르고 간편한 웹 개발을 지원합니다. 최소한의 CSS로 깔끔하고 현대적인 디자인을 구현할 수 있도록 설계되었습니다.
- 기능
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트 : 버튼, 폼, 테이블 등 기본적인 UI 요소를 제공합니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화 : 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
빠른 개발 : 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
가벼운 파일 크기 : 불필요한 스타일이 적어 페이지 로딩 속도가 빠릅니다.
사용 용이성 : 직관적인 클래스 이름으로 사용이 쉽습니다.
- 단점
제한된 스타일 : 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족 : 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2020.01 v1.4.1
- 파일 사이즈
milligram.css : 11kb
normalize.css : 6kb
- 웹사이트
https://milligram.io/
- 깃허브
https://github.com/milligram/milligram
11. animate CSS
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
Animate.css는 CSS 애니메이션을 쉽게 적용할 수 있도록 도와주는 라이브러리입니다. 다양한 애니메이션 효과를 미리 정의하여, 웹 페이지에 생동감을 추가할 수 있습니다.
- 기능
다양한 애니메이션 : 수십 가지의 애니메이션 효과를 제공하여 다양한 상황에 적용할 수 있습니다.
간편한 사용법 : 클래스 이름을 추가하는 것만으로 애니메이션을 적용할 수 있어 사용이 쉽습니다.
반응형 지원 : 모든 애니메이션이 반응형으로 설계되어 다양한 화면 크기에서 잘 작동합니다.
커스터마이징 : 애니메이션의 지속 시간, 지연 시간 등을 쉽게 조정할 수 있습니다.
- 장점
빠른 구현 : 복잡한 JavaScript 코드 없이 간단하게 애니메이션을 추가할 수 있습니다.
풍부한 선택지 : 다양한 애니메이션 효과를 제공하여 디자인에 다양성을 더할 수 있습니다.
커뮤니티 지원 : 활발한 커뮤니티와 문서로 문제 해결이 용이합니다.
- 단점
퍼포먼스 문제 : 많은 애니메이션을 동시에 사용하면 성능에 영향을 줄 수 있습니다.
제한된 커스터마이징 : 기본 애니메이션 외에 복잡한 애니메이션을 구현하기 위해서는 추가적인 CSS 작업이 필요할 수 있습니다.
- 최근 릴리즈
2020.09 v4.1.1
- 파일 사이즈
animate.css : 94kb
animate.min.css : 71kb
- 웹사이트
https://animate.style/
- 깃허브
https://github.com/animate-css/animate.css
12. Paper CSS
PaperCSS
The less formal CSS framework
www.getpapercss.com
Paper CSS는 종이와 같은 질감을 가진 디자인을 구현하기 위한 CSS 프레임워크입니다. 간단하고 직관적인 스타일을 제공하여, 웹 페이지에 아날로그적인 느낌을 추가할 수 있도록 설계되었습니다.
- 기능
종이 스타일 : 종이 질감을 모방한 디자인 요소를 제공하여 독특한 시각적 효과를 줍니다.
모듈화 : 필요한 컴포넌트만 선택적으로 사용할 수 있어 효율적입니다.
기본 UI 컴포넌트 : 버튼, 카드, 폼 등 기본적인 UI 요소를 제공합니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
- 장점
독특한 디자인 : 종이 질감을 활용하여 다른 프레임워크와 차별화된 디자인을 제공합니다.
사용 용이성 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
- 단점
제한된 스타일 : 종이 스타일에 특화되어 있어, 다양한 디자인 요구에 맞추기 어려울 수 있습니다.
기능 부족 : 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2023.05 v1.9.2
- 파일 사이즈
paper.css : 67kb
paper.min.css : 53kb
- 웹사이트
https://www.getpapercss.com/
- 깃허브
https://github.com/papercss/papercss
- 개인리뷰
손으로 그린것같은 CSS 효과
13. nes CSS
https://nostalgic-css.github.io/NES.css/
NES.css
NES-style CSS Framework | ファミコン風CSSフレームワーク
nostalgic-css.github.io
NES.css는 1980년대의 NES(닌텐도 엔터테인먼트 시스템) 스타일을 기반으로 한 CSS 프레임워크입니다. 레트로 게임의 비주얼을 웹 디자인에 적용할 수 있도록 설계되어, 독특하고 재미있는 사용자 인터페이스를 제공합니다.
- 기능
레트로 디자인 : NES 스타일의 UI 요소를 제공하여 복고풍의 느낌을 구현할 수 있습니다.
기본 UI 컴포넌트 : 버튼, 폼, 카드 등 다양한 UI 요소를 제공합니다.
모듈화 : 필요한 컴포넌트만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
- 장점
독특한 스타일 : 레트로 게임의 느낌을 살린 디자인으로, 다른 프레임워크와 차별화된 사용자 경험을 제공합니다.
사용 용이성 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
- 단점
제한된 스타일 : 레트로 디자인에 특화되어 있어, 현대적인 디자인 요구에 맞추기 어려울 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2019.09 v2.3.0
- 파일 사이즈
nes.css : 302kb
nes.min.css : 282kb
- 웹사이트
https://nostalgic-css.github.io/NES.css/
- 깃허브
https://github.com/nostalgic-css/NES.css
- 개인리뷰
8bit 컴퓨터 느낌의 CSS
13. Tent CSS ( 지금은 없어진듯 )
Tent CSS
A CSS survival kit. Includes only the essentials to make camp.
css.sitetent.com
Tent CSS는 간단하고 직관적인 스타일을 제공하는 경량 CSS 프레임워크로, 빠른 웹 개발을 지원합니다. 기본적인 UI 요소와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트 : 버튼, 폼, 카드 등 기본적인 UI 요소를 제공합니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화 : 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
빠른 개발 : 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
사용 용이성 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
가벼운 파일 크기 : 불필요한 스타일이 적어 페이지 로딩 속도가 빠릅니다
- 단점
제한된 스타일 : 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족 : 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다
- 최근 릴리즈
- 파일 사이즈
tent.css : 약 10kb
- 웹사이트
https://css.sitetent.com/ ( 지금은 없어진듯 )
- 깃허브
https://github.com/tentcss/tentcss ( 지금은 없어진듯 )
14. simplegrid
Simple Grid
A responsive, lightweight, simple CSS grid.
simplegrid.io
SimpleGrid는 간단하고 직관적인 CSS 그리드 시스템으로, 빠르고 효율적인 레이아웃 구성을 지원합니다. 최소한의 코드로 반응형 그리드를 쉽게 구현할 수 있도록 설계되었습니다.
- 기능
그리드 시스템 : 12컬럼 그리드 시스템을 제공하여 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인 : 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
간단한 사용법 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
모듈화 : 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
빠른 개발 : 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
가벼운 파일 크기 : 전체 파일 크기가 작아 페이지 로딩 속도가 빠릅니다.
사용 용이성 : 직관적인 클래스 이름으로 사용이 쉽습니다.
- 단점
제한된 스타일 : 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족 : 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근릴리즈
- 웹사이트
https://simplegrid.io/
- 깃허브
https://github.com/zachacole/Simple-Grid
* 개인리뷰
12 컬럼의 GRID 만들기만을 지원하기 위한 CSS
15. SPECTRE CSS
Spectre.css CSS Framework
Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with
picturepan2.github.io
Spectre.css는 경량화된 CSS 프레임워크로, 현대적인 웹 디자인을 위한 기본적인 스타일과 컴포넌트를 제공합니다. 간단하고 직관적인 구조로 빠른 개발을 지원하며, 반응형 디자인을 기본으로 합니다.
- 기능
경량화 : 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
반응형 그리드 시스템 : 12컬럼 그리드 시스템을 제공하여 다양한 화면 크기에 맞춰 자동으로 조정됩니다.
기본 UI 컴포넌트 : 버튼, 카드, 모달, 폼 등 다양한 UI 요소를 제공합니다.
모듈화 : 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
빠른 개발 : 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
사용 용이성 : 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
가벼운 파일 크기 : 불필요한 스타일이 적어 페이지 로딩 속도가 빠릅니다.
- 단점
제한된 스타일 : 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족 : 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2020.07 v0.5.9
- 파일 사이즈
spectre.css : 약 10kb
spectre.min.css : 약 5kb
- 웹사이트
https://picturepan2.github.io/spectre/
- 깃허브
https://github.com/picturepan2/spectre
16. Mustard UI
Mustard UI · A CSS framework that actually looks good.
Mustard UI is a complete CSS framework that is production ready out of the box. There is no need to customize the CSS if you don’t want to because it is head and shoulders above others in terms of the way that it looks. We think it looks great and hope y
kylelogue.github.io
Mustard UI는 간단하고 직관적인 디자인을 제공하는 CSS 프레임워크로, 빠른 웹 개발을 지원합니다. 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
가벼운 파일 크기: 불필요한 스타일이 적어 페이지 로딩 속도가 빠릅니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2020.02 v1.0.2
- 파일 사이즈
mustard-ui.css : 약 12kb
- 웹사이트
https://kylelogue.github.io/mustard-ui/
- 깃허브
https://github.com/kylelogue/mustard-ui
17. picni 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
Picnic CSS는 간단하고 경량화된 CSS 프레임워크로, 빠르고 아름다운 웹 디자인을 지원합니다. 기본적인 UI 컴포넌트와 반응형 디자인을 제공하여 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
picnic.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/franciscop/picnic
18. mini.css (없어진듯 )
mini.css - Minimal, responsive, style-agnostic CSS framework
mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.
minicss.org
mini.css는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
- 웹사이트
- 깃허브
19. tachyons CSS
TACHYONS / Docs
tachyons.io
Tachyons는 유틸리티-퍼스트 CSS 프레임워크로, 빠르고 효율적인 웹 개발을 지원합니다. 작은 클래스들을 조합하여 복잡한 디자인을 쉽게 구현할 수 있도록 설계되었습니다. 이 프레임워크는 성능과 접근성을 고려하여 만들어졌습니다.
- 기능
유틸리티 클래스: 다양한 스타일을 적용할 수 있는 작은 클래스들이 제공되어, 조합하여 사용할 수 있습니다.
반응형 디자인: 미디어 쿼리를 쉽게 적용할 수 있는 유틸리티 클래스를 제공합니다.
모듈화: 필요한 기능만 선택적으로 사용할 수 있어 경량화가 가능합니다.
커스터마이징: 설정 파일을 통해 색상, 폰트, 간격 등을 쉽게 수정할 수 있습니다.
- 장점
빠른 개발: 유틸리티 클래스를 사용하여 빠르게 스타일을 적용할 수 있습니다.
일관성: 미리 정의된 스타일을 사용하여 일관된 디자인을 유지합니다.
커스터마이징 용이: 설정 파일을 통해 쉽게 스타일을 수정하고 확장할 수 있습니다.
- 단점
HTML 코드의 복잡성: 많은 유틸리티 클래스를 사용하게 되어 HTML 코드가 복잡해질 수 있습니다.
학습 곡선: 유틸리티-퍼스트 접근 방식에 익숙하지 않은 개발자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2018.01 v4.9.1
- 파일 사이즈
tachyons.css : 약 14kb
tachyons.min.css : 약 8kb
- 웹사이트
- 깃허브
https://github.com/tachyons-css/tachyons
20. vanilla framework
Vanilla documentation
vanillaframework.io
Vanilla Framework는 간단하고 경량화된 CSS 프레임워크로, 기본적인 스타일과 컴포넌트를 제공하여 빠르고 효율적인 웹 개발을 지원합니다. "Vanilla"라는 이름은 복잡한 기능이나 의존성 없이 순수한 CSS만을 사용하여 웹 페이지를 구축할 수 있도록 설계되었음을 의미합니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
디자인의 유사성 : 많은 사이트에서 사용되기 때문에 비슷한 디자인이 많아질 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2024.09 v4.15.0
- 파일 사이즈
vanilla.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/canonical/vanilla-framework
21. topcoat
Topcoat
CSS for clean and fast web apps.
topcoat.io
Topcoat는 빠르고 경량화된 CSS 프레임워크로, 모바일 및 데스크톱 웹 애플리케이션을 위한 UI 컴포넌트를 제공합니다. 사용자 경험을 최우선으로 고려하여 설계되었으며, 간단하고 직관적인 스타일을 제공합니다.
- 기능
모바일 우선 디자인: 모바일 환경에서 최적화된 UI 요소를 제공합니다.
기본 UI 컴포넌트: 버튼, 폼, 리스트 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
모바일 최적화: 모바일 환경에서의 사용자 경험을 고려하여 설계되었습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
디자인의 유사성 : 많은 사이트에서 사용되기 때문에 비슷한 디자인이 많아질 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
최근 릴리즈
- 최근 릴리즈
2013.10 V0.8.0
- 파일 사이즈
topcoat.css : 약 20kb
- 웹사이트
http://topcoat.io/
- 깃허브
https://github.com/Topcoat/topcoat
22. Jeet
Jeet Grid | Smart CSS preprocessor grids
CSS preprocessor grid built with fractions and ratios to make columns flexible and your workflow fast.
jeet.gs
Jeet는 CSS 그리드 시스템을 위한 프레임워크로, 유연하고 강력한 레이아웃을 쉽게 구현할 수 있도록 설계되었습니다. CSS의 복잡성을 줄이고, 직관적인 문법을 통해 빠른 개발을 지원합니다.
- 기능
그리드 시스템: 12컬럼 그리드 시스템을 제공하여 다양한 레이아웃을 쉽게 구성할 수 있습니다.
모듈화: 필요한 기능만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
Sass 지원: Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
유연성: 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
빠른 개발: 간단한 문법으로 인해 빠르게 프로토타입을 제작할 수 있습니다.
커스터마이징: 설정 파일을 통해 색상, 폰트, 간격 등을 쉽게 수정할 수 있습니다.
- 단점
학습 곡선: 새로운 문법에 익숙해지기 위해 약간의 학습이 필요할 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2017.09 v7.2.0
- 파일 사이즈
jeet.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/mojotech/jeet
23. metroui
Metro 4 Components Library
Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins .
metroui.org.ua
Metro UI CSS는 Microsoft의 Metro 디자인 언어를 기반으로 한 CSS 프레임워크로, 현대적이고 직관적인 사용자 인터페이스를 제공합니다. 이 프레임워크는 웹 애플리케이션과 사이트에 세련된 디자인을 추가할 수 있도록 설계되었습니다.
- 기능
모던 UI 컴포넌트: 버튼, 카드, 모달, 그리드 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
아이콘 세트: Metro 스타일의 아이콘을 포함하여 디자인에 통일성을 제공합니다.
JavaScript 플러그인: 인터랙티브한 기능을 추가할 수 있는 다양한 플러그인을 포함합니다.
- 장점
일관된 디자인: Metro 디자인 언어를 따르므로 일관된 사용자 경험을 제공합니다.
사용 용이성: 직관적인 클래스 이름과 구조로 사용이 쉽습니다.
풍부한 컴포넌트: 다양한 UI 요소와 플러그인을 제공하여 개발 속도를 높입니다.
- 단점
제한된 커스터마이징: 기본 스타일이 고정되어 있어, 독창적인 디자인을 구현하기 어려울 수 있습니다.
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
- 최근 릴리즈
2024.05 v5.0.5
- 파일 사이즈
metro.css : 약 150kb
metro.min.css : 약 50kb
- 웹사이트
- 깃허브
https://github.com/olton/Metro-UI-CSS
- 개인리뷰
PC화면이나 태블릿에서 보았을것 같은 모든 레이아웃이 다 있는 느낌
24. ink
Ink - Interface Kit
Ink is a set of tools for quick development of web interfaces. It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your proj
ink.sapo.pt
Ink CSS는 반응형 웹 디자인을 위한 경량화된 CSS 프레임워크로, 모바일 및 데스크톱 환경에서 모두 잘 작동하는 UI 컴포넌트를 제공합니다. 간단하고 직관적인 구조로 빠른 개발을 지원합니다.
- 기능
반응형 그리드 시스템: 12컬럼 그리드 시스템을 제공하여 다양한 화면 크기에 맞춰 자동으로 조정됩니다.
기본 UI 컴포넌트: 버튼, 폼, 카드, 모달 등 다양한 UI 요소를 제공합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
JavaScript 플러그인: 인터랙티브한 기능을 추가할 수 있는 다양한 플러그인을 포함합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2015.08 v3.1.10
- 파일 사이즈
ink.css : 약 15kb
- 웹사이트
- 깃허브
https://github.com/sapo/Ink/
25. FLUIDABLE ( 없어진듯 )
Fluidable — CSS Grid System
You have five options to adapt the grid to your needs: number of columns, max width of your site, and the gutter width set in ems. The @screen variables define the responsive break points. You can configure Fluidable for any number of columns using the @co
fluidable.com
Fluidable은 반응형 웹 디자인을 위한 CSS 프레임워크로, 유연한 레이아웃과 다양한 UI 컴포넌트를 제공합니다. 이 프레임워크는 사용자가 다양한 화면 크기에서 최적의 사용자 경험을 제공할 수 있도록 설계되었습니다.
- 기능
유연한 그리드 시스템: 다양한 화면 크기에 맞춰 자동으로 조정되는 그리드 레이아웃을 제공합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인: 모바일 및 데스크톱 환경에서 모두 잘 작동합니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
경량화: 전체 파일 크기가 작아 페이지 로딩 속도가 빠릅니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
fluidable.css : 약 12kb
- 웹사이트
https://fluidable.com/
- 깃허브
https://github.com/Fluidable/fluidable
26. Groundwork CSS ( 없어진듯 )
GroundworkCSS ♥ A Responsive HTML5, CSS & Javascript Framework
GroundworkCSS is 100% free and open source. Give a shout out if you have any feedback. Find a bug? Help squash it by filing an issue on Github.
groundworkcss.github.io
Groundwork CSS는 반응형 웹 디자인을 위한 경량화된 CSS 프레임워크로, 기본적인 UI 컴포넌트와 그리드 시스템을 제공합니다. 이 프레임워크는 빠르고 효율적인 웹 개발을 지원하며, 사용자가 다양한 화면 크기에서 최적의 사용자 경험을 제공할 수 있도록 설계되었습니다.
- 기능
그리드 시스템: 12컬럼 그리드 시스템을 제공하여 다양한 레이아웃을 쉽게 구성할 수 있습니다.
기본 UI 컴포넌트: 버튼, 폼, 테이블, 카드 등 다양한 UI 요소를 제공합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인: 모바일 및 데스크톱 환경에서 모두 잘 작동합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
groundwork.css : 약 15kb
- 웹사이트
https://groundworkcss.github.io/
- 깃허브
27. Yui
YUI Library
Home Quick Start Documentation Community Other Projects
clarle.github.io
YUI (Yahoo User Interface) CSS는 Yahoo에서 개발한 CSS 프레임워크로, 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 다양한 스타일과 컴포넌트를 제공합니다. YUI는 JavaScript 라이브러리와 함께 사용되며, 웹 개발자들이 일관된 디자인을 쉽게 구현할 수 있도록 돕습니다.
- 기능
그리드 시스템: 반응형 레이아웃을 지원하는 그리드 시스템을 제공합니다.
UI 컴포넌트: 버튼, 폼, 테이블, 드롭다운 등 다양한 UI 요소를 제공합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
JavaScript 통합: YUI JavaScript 라이브러리와 통합되어 동적인 기능을 쉽게 추가할 수 있습니다.
- 장점
일관된 디자인: 다양한 UI 컴포넌트를 통해 일관된 사용자 경험을 제공합니다.
강력한 커뮤니티: YUI는 오랜 역사를 가지고 있으며, 많은 문서와 커뮤니티 지원이 있습니다.
유연성: 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
- 단점
무거운 파일 크기: 전체 프레임워크가 크기 때문에 성능에 영향을 줄 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2014.10 v3.18.1
- 파일 사이즈
yui.css : 약 100kb
- 웹사이트
https://clarle.github.io/yui3/
- 깃허브
https://clarle.github.io/yui3/
28. Chota
chota - A micro CSS framework
🔝 Back to top • 🐛 Report an issue • 🎗 Donate Want icons for your project too? Checkout Icongr.am 🚀
jenil.github.io
Chota는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2023.01 V0.8.1
- 파일 사이즈
chota.css : 약 10kb
- 웹사이트
https://jenil.github.io/chota/
- 깃허브
https://github.com/jenil/chota
29. Plume CSS
Plume CSS - A Pure CSS Micro-Framework
Plume CSS is a lightweight and highly themeable CSS Micro-Framework meant to be the lowest CSS layer on your app.
felippe-regazio.github.io
Plume CSS는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
plume.css : 약 12kb
- 웹사이트
https://felippe-regazio.github.io/plume-css/
- 깃허브
https://github.com/felippe-regazio/plume-css
30. Primer
Primer CSS
CSS for GitHub's Primer design system
primer.style
Primer는 GitHub에서 개발한 CSS 프레임워크로, GitHub의 디자인 언어를 기반으로 하여 일관된 사용자 경험을 제공합니다. 이 프레임워크는 웹 애플리케이션과 사이트에 필요한 다양한 UI 컴포넌트를 제공하며, 반응형 디자인을 지원합니다.
- 기능
모듈화된 컴포넌트: 버튼, 폼, 카드, 네비게이션 바 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
Sass 지원: Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
일관된 디자인: GitHub의 디자인 언어를 따르므로 일관된 사용자 경험을 제공합니다.
사용 용이성: 직관적인 클래스 이름과 구조로 사용이 쉽습니다.
풍부한 컴포넌트: 다양한 UI 요소와 플러그인을 제공하여 개발 속도를 높입니다.
- 단점
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2024.07 v21.3.6
- 파일 사이즈
primer.css : 약 150kb
primer.min.css : 약 50kb
- 웹사이트
https://primer.style/css/storybook/
- 깃허브
31. chakra
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
chakra-ui.com
Chakra UI는 React 애플리케이션을 위한 모던 UI 프레임워크로, 접근성과 커스터마이징을 중시하여 설계되었습니다. Chakra UI는 컴포넌트 기반의 접근 방식을 통해 개발자가 빠르고 쉽게 사용자 인터페이스를 구축할 수 있도록 돕습니다.
- 기능
컴포넌트 기반: 버튼, 입력 필드, 모달, 카드 등 다양한 UI 컴포넌트를 제공합니다.
접근성: 모든 컴포넌트는 접근성을 고려하여 설계되어, 스크린 리더와 호환됩니다.
테마 커스터마이징: 기본 테마를 쉽게 수정하고, 사용자 정의 테마를 만들 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
- 장점
사용 용이성: 직관적인 API와 문서로 사용이 쉽습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
유연성: 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
- 단점
React 전용: Chakra UI는 React에 특화되어 있어 다른 프레임워크와의 호환성이 없습니다.
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
- 최근 릴리즈
2023.11 v2.6.2 ( v2.8.2 ? )
- 파일 사이즈
chakra-ui.css : 약 50kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/chakra-ui/chakra-ui/
32. TuiCss
GitHub - vinibiavatti1/TuiCss: Text-based user interface CSS library
Text-based user interface CSS library. Contribute to vinibiavatti1/TuiCss development by creating an account on GitHub.
github.com
TuiCSS는 간단하고 직관적인 CSS 프레임워크로, 웹 애플리케이션과 사이트에 필요한 기본적인 스타일과 UI 컴포넌트를 제공합니다. 이 프레임워크는 빠르고 효율적인 웹 개발을 지원하며, 반응형 디자인을 통해 다양한 화면 크기에서 최적의 사용자 경험을 제공합니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2023.07 v2.1.2
- 파일 사이즈
tui.css : 약 10kb
- 웹사이트
https://github.com/vinibiavatti1/TuiCss/wiki
- 깃허브
https://github.com/vinibiavatti1/TuiCss/wiki
- 개인리뷰
MSDOS 시절 스타일
33. Gutenberg
GitHub - BafS/Gutenberg: Modern framework to print the web correctly.
Modern framework to print the web correctly. - GitHub - BafS/Gutenberg: Modern framework to print the web correctly
github.com
Gutenberg는 WordPress의 블록 기반 편집기를 위한 CSS 프레임워크로, 현대적인 웹 디자인을 지원합니다. 이 프레임워크는 사용자에게 직관적이고 유연한 콘텐츠 편집 경험을 제공하며, 다양한 UI 컴포넌트를 통해 웹 페이지를 쉽게 구성할 수 있도록 설계되었습니다.
- 기능
블록 기반 디자인: 콘텐츠를 블록 단위로 구성하여 사용자가 쉽게 레이아웃을 조정할 수 있습니다.
기본 UI 컴포넌트: 버튼, 카드, 이미지, 텍스트 블록 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
커스터마이징: CSS 변수를 사용하여 쉽게 스타일을 수정하고 확장할 수 있습니다.
- 장점
사용 용이성: 직관적인 인터페이스로 사용자가 쉽게 콘텐츠를 편집할 수 있습니다.
유연성: 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
WordPress 통합: WordPress와의 원활한 통합으로 블로그 및 웹사이트 제작에 적합합니다.
- 단점
학습 곡선: 블록 기반 편집 방식에 익숙하지 않은 사용자에게는 다소 복잡할 수 있습니다.
기능 제한: 특정 고급 기능이나 컴포넌트는 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2024.09 v19.1.0
- 파일 사이즈
gutenberg.css : 약 50kb (상황에 따라 다를 수 있음)
- 웹사이트
https://bafs.github.io/Gutenberg/
- 깃허브
https://github.com/WordPress/gutenberg
- 개인리뷰
웹 페이지를 올바르게 인쇄하기 위한 최신 프레임워크
34. HiQ
HiQ. A high-IQ CSS framework.
jonathanharrell.github.io
HiQ CSS는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2024.07 v4.2.11
- 파일 사이즈
hiq.css : 약 10kb
- 웹사이트
https://jonathanharrell.github.io/hiq/
- 깃허브
https://github.com/jonathanharrell/hiq
35. PatternFly
PatternFly 4
Flyer fundamentals Every Flyer is unique, with different ideas and opinions. But there are some things we all agree on. These are our Flyer fundamentals.
www.patternfly.org
PatternFly는 Red Hat에서 개발한 오픈 소스 UI 프레임워크로, 기업용 애플리케이션을 위한 일관된 디자인 시스템을 제공합니다. 이 프레임워크는 다양한 UI 컴포넌트와 스타일 가이드를 통해 개발자와 디자이너가 협력하여 사용자 경험을 향상시킬 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 모달, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
접근성: 모든 컴포넌트는 접근성을 고려하여 설계되어, 스크린 리더와 호환됩니다.
테마 지원: 기본 테마를 쉽게 수정하고, 사용자 정의 테마를 만들 수 있습니다.
- 장점
일관된 디자인: PatternFly는 기업용 애플리케이션에 적합한 일관된 사용자 경험을 제공합니다.
풍부한 문서화: 잘 정리된 문서와 예제를 통해 사용자가 쉽게 이해하고 활용할 수 있습니다.
커뮤니티 지원: 활발한 커뮤니티와 오픈 소스 프로젝트로, 지속적인 업데이트와 개선이 이루어집니다.
- 단점
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
- 최근 릴리즈
2024.09 v5.4.0
- 파일 사이즈
patternfly.css : 약 200kb (상황에 따라 다를 수 있음)
- 웹사이트
https://www.patternfly.org/
- 깃허브
https://github.com/patternfly/patternfly
36. turret css
turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites
Cursors Added utility classes for the cursor property. Cursor right Simple grouping A generic group behaviour to align and space between like items within lists. Groups right Box Shadows Globally set box shadows with size variants to set on any element eas
turretcss.com
Turret CSS는 경량화된 CSS 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있도록 설계되었습니다. 이 프레임워크는 기본적인 UI 컴포넌트와 그리드 시스템을 제공하여 개발자가 빠르고 효율적으로 웹 페이지를 구축할 수 있도록 돕습니다.
- 기능
그리드 시스템: 12컬럼 그리드 시스템을 제공하여 다양한 레이아웃을 쉽게 구성할 수 있습니다.
기본 UI 컴포넌트: 버튼, 폼, 테이블, 카드 등 다양한 UI 요소를 제공합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2019.08 v5.2.1
- 파일 사이즈
turret.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/turretcss/turretcss
- 개인리뷰
tilewind와 같이 모든 속성을 class로 미리 선언
37. Ciruss CSS
Cirrus CSS
The SCSS framework for the modern web. It's component based, customizable, and completely open source.
cirrus-ui.netlify.app
Cirrus CSS는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다
- 최근 릴리즈
2023.12 v0.7.2
- 파일 사이즈
cirrus.css : 약 10kb
- 웹사이트
https://cirrus-ui.com/
- 깃허브
https://github.com/Spiderpig86/Cirrus
38. Blaze UI
Blaze UI - Framework-free open source UI toolkit
#UseThePlatform Our components rely solely on native browser features, not a separate library or framework.
www.blazeui.com
Blaze UI는 웹 애플리케이션을 위한 경량화된 CSS 프레임워크로, 현대적이고 직관적인 디자인을 제공합니다. 이 프레임워크는 다양한 UI 컴포넌트와 반응형 디자인을 통해 개발자가 빠르고 효율적으로 사용자 인터페이스를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 모달, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
Sass 지원: Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
사용 용이성: 직관적인 API와 문서로 사용이 쉽습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
유연성: 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
- 단점
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
디자인의 유사성 : 많은 사이트에서 사용되기 때문에 비슷한 디자인이 많아질 수 있습니다.
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다
- 최근 릴리즈
- 파일 사이즈
blaze.css : 약 50kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/BlazeSoftware/atoms
39. Pico CSS
Pico.css • Minimal CSS Framework for semantic HTML
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped!
picocss.com
* 개인리뷰
- level 2
Pico CSS는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2024.03 v2.0.6
- 파일 사이즈
pico.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/picocss/pico
- 개인리뷰
button / form / table / accordion / card / dropdown / model / nav / progress
40. Fomantic UI
Fomantic-UI
Shipping Choose your shipping options
fomantic-ui.com
Fomantic UI는 Semantic UI의 포크로, 웹 애플리케이션을 위한 현대적이고 직관적인 UI 프레임워크입니다. Fomantic UI는 다양한 UI 컴포넌트와 반응형 디자인을 제공하여 개발자가 쉽게 사용자 인터페이스를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 모달, 드롭다운 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
접근성: 모든 컴포넌트는 접근성을 고려하여 설계되어, 스크린 리더와 호환됩니다.
Sass 지원: Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
일관된 디자인: Semantic UI의 디자인 언어를 따르므로 일관된 사용자 경험을 제공합니다.
사용 용이성: 직관적인 클래스 이름과 구조로 사용이 쉽습니다.
풍부한 문서화: 잘 정리된 문서와 예제를 통해 사용자가 쉽게 이해하고 활용할 수 있습니다.
- 단점
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 파일 릴리즈
2023.09 v2.9.3
- 파일 사이즈
fomantic.css : 약 200kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/fomantic/Fomantic-UI
- 개인리뷰
CSS + script
button / divider / emoji / flag / header / icon / image / input / label / list / loader / palceholder / rail / reveal
/ segment / step / text / breadcrumb / form / grid / menu / message / table / advertisement / card / comment / feed / item / Statistic / Accordion / calendar / checkbox / dimmer / dropdown / embed / modal / nag / popup / progress / rating / search / shape / sidebar / slider / sticky / tab / toast / transition
41. Marx
Home · Marx
Marx The classless CSS reset (perfect for Communists). No JavaScript. No Classes. Just raw CSS. 11.1 kB / 3.7 kB (Gzip) minified. Is Marx for you? Marx is a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heav
mblode.github.io
Marx CSS는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2021.12 v4.0.0
- 파일 사이즈
marx.css : 약 10kb
- 웹사이트
https://mblode.github.io/marx/
- 깃허브
https://github.com/mblode/marx
- 개인리뷰
list / button / form / radio button / checkbox button / dropdown choice / table
42. element
Element - The world's most popular Vue UI framework
element.eleme.io
Element CSS는 Vue.js 및 React와 같은 현대적인 프레임워크와 함께 사용할 수 있는 UI 컴포넌트 라이브러리입니다. 이 라이브러리는 사용자 인터페이스를 구축하기 위한 다양한 컴포넌트를 제공하며, 직관적이고 일관된 디자인을 통해 개발자가 빠르게 애플리케이션을 개발할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 입력 필드, 카드, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
접근성: 모든 컴포넌트는 접근성을 고려하여 설계되어, 스크린 리더와 호환됩니다.
테마 지원: 기본 테마를 쉽게 수정하고, 사용자 정의 테마를 만들 수 있습니다.
- 장점
사용 용이성: 직관적인 API와 문서로 사용이 쉽습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
유연성: 다양한 디자인 요구에 맞춰 쉽게 조정할 수 있습니다.
- 단점
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
202.08 v2.15.14
- 파일 사이즈
element.css : 약 150kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/ElemeFE/element
- 개인리뷰
CSS + script
자체 태그 문법 사용 ( ex. <el-date-picker ... > )
icon / buttomn / link / radio / checkbox / input / select / Cascader / switch / slider / timepicker / datetpicker / datetimepicker / upload / rate / colorpicker / transfer / form / table / progress / tree / pagination / badge / Skeleton / alert / loadging / message / messagebox / Notification / navMenu / tabs / breadcrumb / pageHeader / dropdown / steps / dialog / tooltip / popover /popconfirm / card / carousel / collapsee / timeline / divider / calendar / image / InfiniteScroll / avartar / Drawer
43. siimple
siimple: minimal and responsive CSS Framework for flat and clean designs | siimple
Why siimple? Build responsive, flat and clean web designs with the minimalist and flexible siimple CSS framework. Modular siimple has been built using SASS/SCSS. Just import only what you need! Responsive siimple allows you to design a web page that looks
siimple.xyz
Siimple CSS는 간단하고 경량화된 CSS 프레임워크로, 빠르고 효율적인 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 제공하여 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2022.10 v4.3.1
- 파일 사이즈
siimple.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/jmjuanes/siimple
- 개인리뷰
btn / closre / spinner / tag / tip / alert / breadcrumb / card / list / menu / tabke / tab
/ form / checkbox / input / label / radio button / select / switch / textarea / grid / modal / progress/ step
44. clayui
Clay
A web implementation of Lexicon There's always been a distinction between Lexicon as a design system, and Lexicon as a web implementation. Naming them like this didn't help with the distinction, so the web implementation of Lexicon is now called Clay.
clayui.com
Clay CSS는 Liferay에서 개발한 UI 프레임워크로, 웹 애플리케이션을 위한 현대적이고 일관된 디자인을 제공합니다. 이 프레임워크는 다양한 UI 컴포넌트와 스타일을 통해 개발자가 빠르고 효율적으로 사용자 인터페이스를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 입력 필드, 카드, 모달, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
접근성: 모든 컴포넌트는 접근성을 고려하여 설계되어, 스크린 리더와 호환됩니다.
Sass 지원: Sass를 통해 스타일을 쉽게 수정하고 확장할 수 있습니다.
- 장점
일관된 디자인: Liferay의 디자인 언어를 따르므로 일관된 사용자 경험을 제공합니다.
사용 용이성: 직관적인 클래스 이름과 구조로 사용이 쉽습니다.
풍부한 문서화: 잘 정리된 문서와 예제를 통해 사용자가 쉽게 이해하고 활용할 수 있습니다.
- 단점
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
clay.css : 약 150kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/liferay/clay
- 개인리뷰
기능에 따라 추가 모듈 설치 필요 ( ex. yarn add @clayui/panel )
alert / application bar / aspect ratio / auto complete / badge / breadcrumb / button group / card / chart / color picker / datepicker / dropdown / checkbox / dual list box / radio group / select / select box / toggle switch / icon / label / list / loading indicator / Localized Input / Management Toolbar / modal / multi Select / multio step nav / nav/ navigation bar / overlay mask / pagination / pagination bar / pannel ...
45. concisecss
Concise CSS—Give up the bloat. Stop tripping over your classes. Be Concise.
Using NPM This is the prefered method to install Concise CSS, you will be able to customize and compile the source files with Concise CLI. npm install concise.css npm install -g concise-cli @import "node_modules/concise.css/concise"; concisecss compile sou
concisecss.com
Concise CSS는 간단하고 경량화된 CSS 프레임워크로, 빠르고 효율적인 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 제공하여 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2016.12 v4.1.2
- 파일 사이즈
concise.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/ConciseCSS/concise.css
- 개인리뷰
alert / breadcrumb / button / button group / card / dropdown / progress bar / spinner / tag
46. onsen
Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools
Native look and feel with lots of ready-to-use components and automatic styling A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. Th
onsen.io
Onsen UI는 하이브리드 모바일 애플리케이션을 위한 UI 프레임워크로, HTML5, CSS, JavaScript를 사용하여 아름답고 반응형인 모바일 인터페이스를 쉽게 구축할 수 있도록 설계되었습니다. Onsen UI는 Angular, React, Vue.js와 같은 다양한 프레임워크와 통합하여 사용할 수 있습니다.
- 기능
모바일 최적화: 모바일 환경에 최적화된 UI 컴포넌트를 제공합니다.
다양한 UI 컴포넌트: 버튼, 리스트, 탭, 모달, 내비게이션 바 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
CSS 테마: 기본 테마 외에도 다양한 테마를 제공하여 디자인을 쉽게 커스터마이징할 수 있습니다.
- 장점
사용 용이성: 직관적인 API와 문서로 사용이 쉽습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
다양한 프레임워크 지원: Angular, React, Vue.js 등 다양한 프레임워크와 통합하여 사용할 수 있습니장
- 단점
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2022.12 v2.12.8
- 파일 사이즈
onsenui.css : 약 150kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/OnsenUI/OnsenUI
- 개인리뷰
Dark 테마, Light 테마, Custom 테마
Compont 여러가지 스타일 제안
Mobile UI 인지 Table, Paging 같은 것은 누락
47. asm CSS
Assembler CSS | Modern UI framework
Assembler CSS is a highly performant UI framework that allows you to quickly prototype and build modern websites and UI components without the need to install and maintain complex software.
asmcss.com
asm CSS는 경량화된 CSS 프레임워크로, 간단하고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
기본 UI 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
모듈화: 필요한 스타일만 선택적으로 사용할 수 있어 효율적입니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
아름다운 디자인: 기본적으로 제공되는 스타일이 깔끔하고 현대적입니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
asm.css : 약 10kb
- 웹사이트
https://asmcss.com/
- 깃허브
https://github.com/asmcss/assembler
48. halfmoon
Halfmoon - Highly customizable, drop-in Bootstrap replacement
Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components. Build beautiful and responsive websites and applications.
www.gethalfmoon.com
Halfmoon은 반응형 웹 디자인을 위한 CSS 프레임워크로, 현대적이고 직관적인 사용자 인터페이스를 제공합니다. 이 프레임워크는 다양한 UI 컴포넌트와 유틸리티 클래스를 통해 개발자가 빠르고 효율적으로 웹 페이지를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 모달, 드롭다운, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
다크 모드 지원: 기본적으로 다크 모드를 지원하여 사용자에게 다양한 테마를 제공합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
사용 용이성: 직관적인 API와 문서로 사용이 쉽습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
다양한 테마: 기본 테마 외에도 다양한 테마를 제공하여 디자인을 쉽게 커스터마이징할 수 있습니다.
- 단점
파일 크기: 기본적으로 포함된 CSS와 JS로 인해 파일 크기가 클 수 있습니다.
학습 곡선: 다양한 기능과 옵션이 있어 처음 사용하는 사용자에게는 다소 복잡할 수 있습니다.
- 최근 릴리즈
2024.08 v2.0.2
- 파일 사이즈
halfmoon.css : 약 100kb (상황에 따라 다를 수 있음)
- 웹사이트
- 깃허브
https://github.com/halfmoonui/halfmoon
- 개인리뷰
Dark 테마
CSS + script 혼합 프레임워크
button / image / loink / table / form / input / select / textarea / checkbox / radio / switch / file input / inoput group / alert / badge / breadcrumnb / button group / collapse / dropdown / modal / pagination / progress / sicky alert / tooltip
49. YAML CSS
YAML CSS Framework — for truly flexible, accessible and responsive websites
Where it comes from A brief history When YAML was released in October 2005, it was conceived as a base for developing flexible layouts, with a strong emphasis on meeting the challenges that result from working with flexible (elastic, fluid) containers and
www.yaml.de
YAML (Yet Another Multicolumn Layout) CSS는 웹 개발을 위한 경량화된 CSS 프레임워크로, 주로 그리드 레이아웃을 쉽게 구현할 수 있도록 설계되었습니다. 이 프레임워크는 반응형 디자인을 지원하며, 다양한 UI 컴포넌트를 제공합니다.
- 기능
그리드 시스템: 12컬럼 그리드 시스템을 제공하여 다양한 레이아웃을 쉽게 구성할 수 있습니다.
모듈화된 컴포넌트: 버튼, 폼, 테이블 등 기본적인 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 간단한 구조로 인해 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2013.07 v4.1.2
- 파일 사이즈
- 웹사이트
- 깃허브
https://github.com/yamlcss/yaml
50. Kube ( 서비스로 바뀐듯)
Quick Start
Quick Start As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast — y
kube7.imperavi.com
Kube CSS는 경량화된 CSS 프레임워크로, 현대적인 웹 애플리케이션을 위한 기본적인 스타일과 UI 컴포넌트를 제공합니다. 이 프레임워크는 반응형 디자인을 지원하며, 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 장점
모듈화된 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
그리드 시스템: 12컬럼 그리드 시스템을 통해 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2027.02 v6.5.2
- 파일 사이즈
kube.css : 약 10kb
- 웹사이트
https://imperavi.com/superkube/
- 깃허브
https://github.com/imperavi/kube
- 개인리뷰
CSS + script 조합 프레임워크
alert / breadcrumb / button / dropdown / form / grid / label / navBar / offCanvas ( = side open menu ) / pager ( = pagination ) / sticky / table / toggle / animate ( = transition ) / message / modal / progress / slider / uploiad
51. Axentix
Axentix - Front-end framework based on CSS Grid
Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. The easy layout control and grid system makes it one of the most easy to learn framework.
useaxentix.com
Axentix는 경량화된 CSS 프레임워크로, 현대적인 웹 애플리케이션을 위한 다양한 UI 컴포넌트와 스타일을 제공합니다. 이 프레임워크는 반응형 디자인을 지원하며, 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 모달, 드롭다운, 테이블 등 다양한 UI 요소를 제공합니다.
그리드 시스템: 12컬럼 그리드 시스템을 통해 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2023.07 v2.4.0
- 파일 사이즈
axentix.css : 약 15kb
- 웹사이트
- 깃허브
https://github.com/axentix/axentix
- 개인리뷰
CSS + script 조합 프레임워크
alert / button / button group / card / Caroulix / Collapsible / dropDown / fab / footer / lightBox / loading / progressBar / modal / navBar / pagination / Scrollspy / sideNav / table / tab / toast / tooltip / waves / checkbox / radio / files / input / textarea / select / switch /
52. webui
WebUI mobile-first CSS
Whether you just want to knock out a quick demo or a public website, WebUI has what you need. If WebUI doesn't have a component out of the box, you will find it easy to build your own custom components, such as menus, tabs, form controls, and cards. There'
asyncdesign.github.io
WebUI CSS는 웹 애플리케이션을 위한 경량화된 CSS 프레임워크로, 현대적이고 직관적인 사용자 인터페이스를 제공합니다. 이 프레임워크는 다양한 UI 컴포넌트와 반응형 디자인을 통해 개발자가 빠르고 효율적으로 웹 페이지를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 모달, 드롭다운, 테이블 등 다양한 UI 요소를 제공합니다.
그리드 시스템: 12컬럼 그리드 시스템을 통해 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 웹사이트
https://asyncdesign.github.io/webui/
- 최근 릴리즈
2024.03 v11.5.0
- 파일 사이즈
webui.css : 약 12kb
- 웹사이트
https://asyncdesign.github.io/webui/
- 깃허브
https://github.com/asyncdesign/webui
53. tronic247
Tronic247 Material
The most Modern Material Design Framework With Utilizing the latest technologies and components, we have created a modern Material Design Framework. This framework is built on top of the latest technologies and components. It is easy to use and very lightw
material.tronic247.com
Tronic247 CSS는 웹 개발을 위한 경량화된 CSS 프레임워크로, 현대적이고 직관적인 디자인을 제공합니다. 이 프레임워크는 다양한 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
그리드 시스템: 유연한 그리드 시스템을 통해 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
tronic247.css : 약 10kb
- 웹사이트
https://material.tronic247.com/
- 깃허브
https://github.com/Posandu/tronic247
- 개인리뷰
버튼에 모션 효과가 많다
alert / banner(=message) / breadcumbs / button / button group / card / checkbox / chips / caontainer / dialog / drawer / grid / list / menuy / progressBar / radioButton / selectBox / slider / snackbar / switch ( = toggle switch ) / table / textfield ( = textInput, textarea ) / tooltip
- padding / margin / background / fontColor / borderRound / fontSize 등이 선언되어 있음
54. skeuos css
DяA | Daniel Ruiz de Alegría
Latest posts Kali 2020.3 🐲: terminal changes and lots of new icons!July 28, 2020 Kali 2020.3 is out! 🎉️🎉️ Just like for previous releases, here I want to show a more in-depth view of the visual and aesthetic modifications that come with it. If
drasite.com
* 개인리뷰
Skeuos CSS는 현대적인 웹 애플리케이션을 위한 경량화된 CSS 프레임워크로, 스큐어모픽 디자인을 기반으로 한 UI 컴포넌트를 제공합니다. 이 프레임워크는 사용자에게 친숙한 인터페이스를 제공하며, 다양한 UI 요소와 반응형 디자인을 통해 개발자가 쉽게 웹 페이지를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 입력 필드, 모달 등 다양한 UI 요소를 제공합니다.
스큐어모픽 디자인: 실제 물체의 질감과 느낌을 모방한 디자인 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
독특한 디자인: 스큐어모픽 디자인을 통해 사용자에게 친숙한 인터페이스를 제공합니다.
- 단점
제한된 스타일: 스큐어모픽 디자인에 특화되어 있어, 현대적인 평면 디자인을 선호하는 사용자에게는 적합하지 않을 수 있습니다.
디자인의 유사성 : 많은 사이트에서 사용되기 때문에 비슷한 디자인이 많아질 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
- 파일 사이즈
skeuos.css : 약 12kb
- 웹사이트
https://drasite.com/skeuos-css
- 깃허브
https://github.com/daniruiz/skeuos-css
- 개인리뷰
독특한 스타일
55. karma css
Karma CSS
Karma CSS Karma CSS is a great starting point if you only want a barebones boilerplate. Includes All fixes from Normalize.css for supported browsers, a powerful mobile-first flexbox grid system, all base styles and the ability to customize the defaults for
karmacss.com
Karma CSS는 경량화된 CSS 프레임워크로, 빠르고 효율적인 웹 개발을 지원하기 위해 설계되었습니다. 이 프레임워크는 기본적인 UI 컴포넌트와 반응형 디자인을 제공하여 사용자가 쉽게 웹 페이지를 구축할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
그리드 시스템: 유연한 그리드 시스템을 통해 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2020.04 v2.0.0
- 파잃 사이즈
karma.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/AccentDesign/karma-css
56. ivoryu
IVORY UI
Simple CSS framework makes your UI development faster and easier.
ivoryui.com
* 개인리뷰
Ivory UI CSS는 경량화된 CSS 프레임워크로, 현대적이고 직관적인 디자인을 제공하여 빠른 웹 개발을 지원합니다. 이 프레임워크는 다양한 UI 컴포넌트와 반응형 디자인을 통해 사용자가 쉽게 웹 페이지를 구축할 수 있도록 설계되었습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
그리드 시스템: 유연한 그리드 시스템을 통해 다양한 레이아웃을 쉽게 구성할 수 있습니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 웹사이트
- 깃허브
https://github.com/IVORY-UI/ivory
- 개인리뷰
alert / message / badge / breadcrumb / checkbox / radio / select / input / file / form / grid / list / progressBar / spinner / showMore / tableBox / toggleSwitch / tooltip
57. formir
Formir - open source, pure CSS Framework
Formir is open-source, pure CSS Framework for responsive web developing. Based on flexbox, complete and modular, fluid design, builded with Less.
formir.io
Formir CSS는 웹 애플리케이션을 위한 경량화된 CSS 프레임워크로, 주로 폼과 관련된 UI 컴포넌트를 중심으로 설계되었습니다. 이 프레임워크는 사용자가 쉽게 폼을 구축하고 스타일링할 수 있도록 돕는 다양한 기능을 제공합니다.
- 기능
모듈화된 컴포넌트: 입력 필드, 버튼, 체크박스, 라디오 버튼 등 다양한 폼 관련 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
기본 스타일: 기본적인 폼 스타일을 제공하여 사용자가 쉽게 시작할 수 있도록 돕습니다.
- 장점
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 폼을 제작할 수 있습니다.
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2023.11 v1.1.2
- 파일 사이즈
formir.css : 약 10kb
- 웹사이트
- 깃허브
https://github.com/formir/formir
58. mvp CSS
MVP.css - Minimalist stylesheet for HTML elements
A decent MVP in no time More building and less designing with "set and forget" styling. "Uber for X" brainstorming session
andybrewer.github.io
MVP CSS는 "Minimum Viable Product"의 약자로, 웹 개발을 위한 경량화된 CSS 프레임워크입니다. 이 프레임워크는 기본적인 스타일과 UI 컴포넌트를 제공하여 빠르고 효율적인 웹 개발을 지원합니다. MVP CSS는 간단한 구조와 직관적인 사용법으로 개발자들이 신속하게 프로토타입을 제작할 수 있도록 돕습니다.
- 기능
모듈화된 컴포넌트: 버튼, 카드, 폼, 테이블 등 다양한 UI 요소를 제공합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 자동으로 조정되는 레이아웃을 지원합니다.
유틸리티 클래스: 빠른 스타일링을 위한 유틸리티 클래스를 제공합니다.
기본 스타일: 기본적인 스타일을 제공하여 사용자가 쉽게 시작할 수 있도록 돕습니다.
- 장점
경량화: 전체 파일 크기가 작아 빠른 로딩 속도를 자랑합니다.
사용 용이성: 직관적인 클래스 이름으로 쉽게 사용할 수 있습니다.
빠른 개발: 미리 정의된 컴포넌트를 사용하여 빠르게 프로토타입을 제작할 수 있습니다.
- 단점
제한된 스타일: 기본 스타일이 단순하여 복잡한 디자인에는 적합하지 않을 수 있습니다.
기능 부족: 고급 UI 컴포넌트나 JavaScript 플러그인이 부족하여 추가적인 개발이 필요할 수 있습니다.
- 최근 릴리즈
2024.04 v1.15
- 파일 사이즈
mvp.css : 약 10kb
- 웹사이트
https://andybrewer.github.io/mvp/
- 깃허브
https://github.com/andybrewer/mvp/
