2020 년 최고의 CSS 프레임 워크 10 가지

최고의 CSS 프레임 워크
(이미지 출처 : Future)

최고의 CSS 프레임 워크를 찾고 계십니까? 이 가이드는 도움을 드리기 위해 여기에 있습니다. 이 기능에서는 사용 가능한 가장 흥미롭고 강력한 CSS 프레임 워크에 익숙해 지도록 도와 드리겠습니다. 이들 중 일부는 잘 알려진 반면 다른 일부는 이제 막 시작된 ​​최신 도구입니다. 어느 쪽이든 이러한 유용한 도구에 대해 알아두면 큰 도움이됩니다.

최고의 CSS 프레임 워크 : 빠른 링크

부트 스트랩 | 기초 | UIkit | 시맨틱 UI | 찾기 | 테일 윈드 | 피크닉 CSS | PaperCSS | NES.css | Animate.css

잘 알려진 이름으로 시작하겠습니다. 이러한 CSS 프레임 워크를 사용하면 최소한의 시간 투자로 깨끗하고 유지 관리 가능한 프로젝트를 구축 할 수 있습니다 (더 적은 시간이 소요되는 것을 원한다면 다음 사이트를 웹 사이트 빌더 ). 그러나 때로는 좀 더 구체적인 것이 필요합니다. 따라서 목록 끝 부분에서 매우 구체적인 사용 사례가있는 라이브러리와 프레임 워크를 찾을 수 있습니다.



더 많은 CSS 영감을 얻으려면 top of our roundup을 살펴보세요. CSS 애니메이션 및 코딩 방법 . 또한 항상 최선을 다하고 있는지 확인하는 것이 좋습니다. 웹 호스팅 사이트의 요구에 맞는 옵션이며 클라우드 스토리지 , 너무.

CSS 생성

모피 고양이를 그리는 방법
이미지를 클릭하면 자세한 내용을 확인하고 티켓을 예약 할 수 있습니다.(이미지 출처 : Getty / Future)

01. 부트 스트랩

최고의 CSS 프레임 워크 : 부트 스트랩

(이미지 출처 : Bootstrap)

세계에서 가장 인기있는 프레임 워크부터 시작하겠습니다. Bootstrap은 확실히 CSS 프레임 워크 만있는 것은 아니지만 가장 인기있는 기능은 CSS 기반 기능입니다. 여기에는 강력한 그리드 시스템, 배지, 버튼, 카드 구성 요소, 탐색 모음 등이 포함됩니다. 또한 전체 부하가 있습니다 무료 부트 스트랩 테마 탐구.

Bootstrap과 같은 프레임 워크의 작동 방식에 익숙하지 않은 경우 몇 가지 코드 예제가 도움이 될 것입니다. 따라서 HTML 만 편집하여 유지 관리 가능한 인터페이스를 구축하는 것이 얼마나 쉬운 지 알 수 있습니다.

Bootstrap의 그리드 시스템은 시작하기에 좋은 곳입니다. Bootstrap 그리드는 2011 년 프레임 워크가 처음 공개 된 이래로 귀중한 상품이었습니다. 당연히 사용하기 쉽습니다. Bootstrap의 CSS를 포함하면 모든 브라우저에서 작동하는 반응 형 플렉스 박스 기반 그리드를 만드는 것은 다음과 같이 간단합니다.

Column 1 Column 2 Column 3

언급했듯이 Bootstrap은 포괄적 인 UI 구성 요소 컬렉션을 자랑합니다. 과거에 스타일링하기 어려웠던 일부는 Bootstrap과 같은 프레임 워크를 사용한 플러그 앤 플레이입니다. 여기에는 이동 경로 탐색 구성 요소, 카드 구성 요소 및 페이지 매김 구성 요소가 포함됩니다. 페이지 매김을 구현하는 HTML은 다음과 같습니다.

이러한 모든 구성 요소는 한 줄의 CSS를 작성하지 않고도 구축 할 수 있습니다. 대부분의 경우 프로젝트 브랜딩에 맞게 구성 요소를 테마로 할 것입니다. 어떤 경우이든 모바일 친화적 인 구조가 이미 자리를 잡고있어 기록적인 시간 내에 완제품에 도달하기가 매우 쉽습니다. 부트 스트랩 또한 반응 형 레이아웃, 유틸리티 구성 요소를위한 고급 기능이 포함되어 있으며 Sass를 기반으로하여 매우 유연하고 사용자 정의가 가능합니다.

02. 재단

최고의 CSS 프레임 워크 : Foundation

(이미지 출처 : 재단)

Bootstrap과 같은 Foundation 프레임 워크는 엄청난 인기를 얻었으며 일부 고급이지만 구현하기 쉬운 CSS 구성 요소가있는보다 정교한 프레임 워크로 알려져 있습니다. Foundation은 Sass를 기반으로하므로 Bootstrap처럼 맞춤 설정이 가능합니다. 그 외에도 모바일 친화적 인 디자인을 매우 쉽게 만드는 강력한 반응 형 기능을 자랑합니다.

반응 형 테이블 구성 요소는 우리가 가장 좋아하는 것 중 하나입니다.

또한 수직 타임 라인은 많은 프레임 워크에서 볼 수없는 레이아웃 기능입니다. 이 구성 요소는 .timeline 컨테이너에 대한 클래스입니다. .timeline-item 각 항목에 대한 아이콘 및 콘텐츠가있는 요소 :

2019

Example text for timeline item.

이는 많은 구성 요소 중 일부에 불과합니다. 기초 오늘날 사용 가능한 최고의 CSS 프레임 워크 중 하나입니다.

03. UIkit

최고의 CSS 프레임 워크 : UIkit

(이미지 출처 : UIkit)

UIkit은 또 다른 인기있는 프런트 엔드 프레임 워크이며 CSS 기능 측면에서 다소 과소 평가 될 수 있습니다. 다른 인기있는 프레임 워크에있는 것과 유사한 많은 기능 외에도 몇 가지 유용한 특수 구성 요소가 있습니다.

우선, 여전히 flexbox에 익숙하지 않은 경우 일반 HTML을 사용하여 UIkit으로 복잡한 flexbox 기반 레이아웃을 수행 할 수 있습니다. HTML 클래스에서 flexbox 구문을 사용하는 것이 처음에는 이상하게 보일 수 있지만 이렇게하면 flex 래핑, 열 / 행, flex grow 등에 대한 모든 단점을 알 필요가 없습니다. 예를 들면 다음과 같습니다.

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

UIkit에는 즉시 사용 가능한 매력적인 스타일을 제공하는 수십 개의 구성 요소가 포함되어 있습니다. 다음을 포함한 많은 기능이 특수 유틸리티 클래스입니다.

  • .uk-align-left , .uk-align-right.uk-align-center 정렬 또는 부동 요소 용
  • .uk-column-1-2 까지 .uk-column-1-6 여러 열로 구성된 잡지 스타일의 텍스트 레이아웃 용
  • .uk-radio , .uk- 체크 박스 매력적인 양식 입력과 유사합니다.
  • 다양한 마진 및 패딩 유틸리티 클래스 ( .uk-margin-top , .uk-padding-small 기타.)
  • 컨테이너 내부에 요소를 상대적으로 배치하는 다양한 유틸리티 클래스 ( .uk-position-top , .uk-position-left 기타.)

UIkit 많은 구성 요소 옵션이있는 신선하고 잘 관리 된 CSS 프레임 워크를 원한다면 시도해 볼 가치가 있습니다. Less 및 Sass로 제공되며 오른쪽에서 왼쪽으로 쓰는 언어를 지원하는 스타일 시트도 포함되어 있습니다.

04. 시맨틱 UI

최고의 CSS 프레임 워크 : 시맨틱 UI

(이미지 출처 : 시맨틱 UI)

시맨틱 UI는 다른 인기있는 프레임 워크와 중복되는 기능이 많지만 작동 방식 (이름으로 표시됨)은 구성 요소를 빌드하는 데 사용되는 클래스 이름의 시맨틱 특성을 기반으로합니다. 즉, 클래스 이름은 사람에게 친숙합니다.

예를 들어 4 열 그리드를 작성하는 방법을 살펴보십시오.

클래스 이름이 빌드 된 내용을 정확히 전달하는 방식을 확인하세요. CSS는 나열된 각 클래스에 대해 고유 한 스타일 세트를 반드시 가질 필요는 없지만 대신 클래스가 함께 작동합니다. 따라서 문맥 상 단어가 의미가있는 언어와 마찬가지로 클래스 이름이 함께 작동하여 응집력 있고 모바일 친화적 인 구성 요소를 구축합니다.

다음은 간단한 데이터 테이블을 만드는 또 다른 예입니다.

이것은 어떻게 시맨틱 UI 클래스 이름을 사용하여 빌드중인 구성 요소를 설명합니다. Bootstrap 또는 Foundation과 같은 기존 프레임 워크에 더 익숙하다면이 프레임 워크에 대한 학습 곡선이 더 가파를 수 있습니다. 하지만 일단 익숙해지면 꽤 강력하고 즐겁게 사용할 수 있습니다.

05. 찾기

최고의 CSS 프레임 워크 : Bulma

(이미지 출처 : Bulma)

Bulma는 또 다른 인기있는 CSS 프레임 워크이며 주요 기능은 구성 요소가 flexbox에 크게 의존하여 진정한 최신 프레임 워크가된다는 사실입니다. Bulma가 Bootstrap과 Semantic UI의 하이브리드와 비슷하지만 복잡하지 않다고 생각할 수 있습니다. 클래스 이름과 함께 Semantic UI와 동일한 원칙 중 일부를 사용하고 인기있는 구성 요소를 많이 포함하지만 단순하게 관리합니다. 예를 들어 양식 요소에는 브라우저 간 모양을 유지하기위한 스타일이 거의 또는 전혀 없습니다.

다음 예제는 Bulma 구성 요소를 빌드하고 유지 관리하기 쉬운 방법을 보여줍니다.

Example Heading

Example text goes here

Some example paragraph text here.

포함에 주목 요소는 영웅에게 주어지고 어둡다 클래스. 이는 기본 어두운 테마 (Bulma에 포함 된 7 가지 테마 색상 중 하나이며 Sass 변수를 통해 모두 변경할 수 있음)를 사용하는 영웅 배너를 원한다는 것을 나타냅니다.

또한 is- * 컨테이너 및 기본 제목의 클래스. 그만큼 is-fluid 클래스를 사용하면 어떤 크기의 화면에서도 컨테이너가 유동적 일 수 있습니다. 최대 너비 . 이 값이 없으면 최대 너비 컨테이너의 크기는 뷰포트의 크기에 따라 변경됩니다. 그만큼 is-size-2 class는 1에서 7까지의 크기로 제목의 크기를 정의합니다.



보시다시피 찾기 읽을 수있는 클래스 이름을 통해 모바일 친화적 인 인터페이스를 매우 쉽게 구축 할 수 있습니다.

06. 테일 윈드

최고의 CSS 프레임 워크 : Tailwind

(이미지 출처 : Tailwind)

많은 최신 CSS 프레임 워크는 사용자 인터페이스를 구축하는 최근 추세를 활용하고 있습니다. Atomic CSS라고도하는 단일 목적 유틸리티 클래스를 사용하는 것입니다 (함께 제공되는 상자 참조). Tailwind는 그러한 프레임 워크 중 하나입니다. Tailwind의 기본 아이디어는 미리 스타일이 지정된 쿠키 커터 구성 요소로 시작하는 대신 유틸리티 클래스를 사용하여 처음부터 모든 것을 구축한다는 것입니다.

내 포토샵이 계속 충돌하는 이유

특히 Atomic CSS가 처음 인 경우 학습 곡선이 더 높습니다. 그러나 Tailwind를 사용하면 대형 스타일 시트에서 흔히 볼 수있는 특이성 문제 및 기타 재정의 문제를 방지 할 수 있습니다.

예를 들어 Tailwind에는 '버튼'구성 요소가 포함되어 있지 않습니다. 그러나 다음과 같은 것을 사용하여 자신 만의 버튼을 만들 수 있습니다.

Button

여기에서 생성 한 항목이 재사용 할 수있는 유효한 구성 요소라고 판단되면 Tailwind의 구성 요소 추출 기능을 통해이를 수행 할 수 있습니다. 따라서 이전 코드 블록에 표시된 버튼과 같은 구성 요소를 다음과 같이 포함 할 수 있습니다.

Button .btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; }

보시다시피 학습 곡선은 테일 윈드 꽤 높습니다. 유틸리티 우선 스타일에 익숙해 져야 할뿐만 아니라 Tailwind의 구성 요소 추출을 사용하는 것이 좋습니다. @대다 지시문 – 이는 추출을 수행하는 한 가지 방법 일뿐입니다. 그것의 참조 선적 서류 비치 이상.

07. 피크닉 CSS

최고의 CSS 프레임 워크 : Picnic CSS

(이미지 출처 : Picnic CSS)

마크 업에 프리젠 테이션 클래스를 포함하는 것이 마음에 들지 않는다면 (전부는 아니지만 대부분의 인기 프레임 워크에서 일반적) Picnic CSS가 프레임 워크가 될 수 있습니다. 피크닉은 덜 복잡 할뿐만 아니라 매우 독단적이라는 점에서 여러면에서 Tailwind의 반대입니다.

예를 들어, 일부 HTML 요소는 클래스 이름을 추가 할 필요없이 미리 스타일이 지정됩니다. 여기에는 , ,

, (후자의 두 가지는 멋진 작은 애니메이션 체크 / 체크 해제 액션을 가지고 있습니다).

많은 HTML 요소에 대한 기존 기본 스타일 외에도 피크닉 자바 스크립트가 필요없는 멋지게 디자인 된 인터랙티브 순수 CSS 구성 요소가 있습니다. 여기에는 모달 대화 상자, 탭 전환기, 파일 업 로더 및 도구 설명이 포함됩니다. 이들 중 일부는 스크립팅으로 향상 될 수 있지만 모두 CSS만으로 작동합니다.

08. PaperCSS

최고의 CSS 프레임 워크 : PaperCSS

(이미지 출처 : PaperCSS)

여기에있는 최고의 CSS 프레임 워크 목록에서 더 많은 특수 옵션을 살펴 보겠습니다. CSS 도구는 아니지만 가장 기발한 프레임 워크 중 하나입니다. PaperCSS는 '덜 공식적인 CSS 프레임 워크'로 청구됩니다. 구성 요소는 손으로 그린 ​​만화와 같은 모양입니다. 사용 사례에는 어린 이용 웹 사이트, 블로그, 게임 또는 만화가 포함될 수 있습니다.

PaperCSS 플렉스 박스 그리드, 배지, 버튼, 카드 및 일부 대화 형 순수 CSS 구성 요소를 포함합니다. 첨부 된 이미지는이 고유 한 프레임 워크가 생성하는 것을 맛볼 수 있습니다.

09. NES.css

최고의 CSS 프레임 워크 : NES.css

(이미지 출처 : NES.css)

PaperCSS와 마찬가지로 NES.css에는 좁은 프로젝트 세트에만 적합한 고유 한 스타일 세트가 있습니다. 8 비트 Nintendo Entertainment System 그래픽을 모방하여 복고풍 게임 모습을 만듭니다.

다른 프레임 워크에서 볼 수있는 공통 구성 요소 외에도 NES.css 주석 풍선 스타일, 반응 아이콘, 테두리가있는 고유 한 컨테이너도 포함됩니다. 다음은 몇 가지 주석 풍선에 대한 코드입니다. 첨부 된 이미지는 프레임 워크와 함께 번들로 제공되는 몇 가지 아이콘 (CSS 그림자를 통해 빌드 됨)과 함께 어떻게 보이는지 보여줍니다.

Comment Balloon Example

Another comment balloon example with a little more text.

이게 마음에 들면 체크 아웃 PSone.css .

만화책을 그리는 가장 좋은 방법

10. Animate.css

최고의 CSS 프레임 워크 : Animate.css

(이미지 출처 : Animate.css)

동일한 일을 거의 수행하는 라이브러리가 여러 개 있습니다. 지정된 요소에 하나 이상의 애니메이션을 추가합니다. 최근 몇 년간 인기를 얻은 최초의 도서관은 Dan Eden의 Animate.css . 이 재미있는 라이브러리에는 흔들림, 페이드, 슬라이드, 확대 / 축소 등을 수행하는 사전 제작 된 수십 개의 애니메이션이 포함되어 있습니다.

다음을 포함하여 사용자에게 대체 애니메이션을 제공하는 다른 유사한 라이브러리가 있습니다. Woah.css , 모든 사람의 취향에 맞지 않는 부인할 수없는 색다른 애니메이션이 있습니다. 또한 생생하게 더 많은 고유 한 애니메이션 옵션이 있으며 Animate.css와는 상당히 다릅니다. 탐색 할 수있는 또 다른 좋은 옵션은 CSSFX , 플러그 앤 플레이 스타일 애니메이션에 대한 더 많은 옵션이있는 새 프로젝트입니다.

마지막으로, 애니메이션 로딩 표시기를 찾고 있다면 에픽 스피너 , 일부 고유 한 CSS 전용 애니메이션 그래픽을 제공합니다.

CSS 프레임 워크가 필요합니까?

사람들이 CSS를 강타하는 것을 듣는 것은 드문 일이 아닙니다. 캐스케이드, 글로벌 스타일링 및 레이아웃의 특이성에 중점을 두어 실망한 개발자로부터 상당한 분노를 얻었습니다. 이러한 사람들에게 바닐라 코드를보다 직관적으로 수정하는 CSS 프레임 워크와 라이브러리는 절대적으로 신의 선물입니다. 한편, 일부 CSS 순수 주의자의 경우 프레임 워크는 장식이 필요없는 것에 추상화 계층을 추가합니다.

어느 쪽도 옳고 그름이 아닙니다. 핵심 언어 (특히 flexbox 및 Grid Layout과 같은 일부 새로운 기능)를 이해하는 데 큰 가치가 있지만 확장 가능하고 유지 관리 할 수있는 무언가를 빠르게 구축 할 수 있다는 점에서도 큰 가치가 있습니다. CSS 프레임 워크와 라이브러리가 도움이 될 수 있습니다.

CSS를 처음부터 작성하는 것을 좋아할 수도 있습니다. 그러나이 기능에서 설명한 것과 같은 사용하기 쉽고 유연하며 적응 가능한 프레임 워크와 라이브러리를 사용하면 짧은 시간에 앱을위한 대화 형 및 유지 관리 가능한 UI를 빌드 할 수 있습니다.

우리는 개발자가 계속해서 바닐라 CSS를 배우고 작성하도록 권장합니다. 그것을 대체 할 수 없습니다. 그러나 촉박 한 기한에 새 레이아웃이나 디자인을 빌드하거나 프로토 타입해야하는 경우 최고의 CSS 프레임 워크 중 하나를 사용하면 생산성을 크게 높일 수 있습니다.

경력을 한 단계 끌어 올릴 수있는 최신 창의적이고 실용적인 기술을 배우고 싶다면 웹 디자이너와 개발자를위한 Generate CSS 컨퍼런스에 참여하세요. 자세한 내용은 www.generateconf.com . 특별 제공 코드 사용 웹 디자이너 2 티켓 10 % 할인!

이 기사는 원래 그물 , 웹 디자이너와 개발자를위한 세계 베스트셀러 잡지입니다. 구입 321 호 또는 구독 .

더 읽어보기 :