가장 인기 있는 10가지 오픈 소스 프런트 엔드 웹 UI 키트

프론트엔드 UI 키트로 작업하여 개발 시간을 많이 절약할 수 있습니다. 가장 인기 있는 것은 부트스트랩이지만 너무 많은 동종 사이트가 해당 프레임워크에 의존합니다.

다양성을 제공하기 위해 제가 선택한 최고의 최신 오픈 소스 UI 프레임워크를 선별했습니다.

이들은 모두 고유한 스타일과 동적 구성 요소에 대한 다양한 지원 수준을 가지고 있습니다. 그러나 이러한 프레임워크를 일부 JavaScript 플러그인과 함께 사용하면 거의 모든 것을 구축할 수 있습니다.

또한 다음을 좋아할 수도 있습니다. 빠른 시작을 위한 20개의 반응형 및 경량 CSS 프레임워크.

1. UI킷

UIKit 프레임워크는 가볍고 사용자 정의하기 쉽고 추가하기 쉽습니다. 재사용 가능한 클래스로 페이지 요소를 빌드하는 모듈식 구조를 따릅니다.

자체 그리드를 코딩하거나 자체 글꼴 스택을 롤링할 필요 없이 새 페이지를 구성하는 데 적합합니다. 이 프레임워크에는 웹 글꼴을 사용하여 페이지에 추가할 수 있는 고유한 아이콘 세트도 함께 제공됩니다.

UIKit을 사용하면 모든 패키지 관리자(보통 npm)와 함께 Sass 이하를 실행할 수 있습니다.

또한 방대한 구성 요소 목록을 통해 업로드 필드에서 이동 경로 등에 이르기까지 무엇이든 포함할 수 있습니다.

2. 재단

Zurb의 Foundation 라이브러리는 Twitter의 Bootstrap과 함께 바로 거기에 있습니다. 그러나 재단은 덜 스타일화된 인터페이스로 인해 덜 주목받는 것 같습니다.

Foundation을 사용하면 사용자 정의 인터페이스 요소, 구성 요소 및 기본 그리드에 액세스할 수 있습니다. 멋진 프론트엔드를 구축하는 데 필요한 모든 것은 Foundation 라이브러리에서 찾을 수 있습니다.

더 자세히 알고 싶다면 쇼케이스 페이지를 살펴보세요. 기본적으로 새로운 웹 프로젝트에 필요한 모든 것, 사용자 정의 그리드, 반응형 기능을 갖춘 Foundation을 실행하는 거대한 사이트를 제공합니다.

3. 밀리그램

프론트엔드 개발에 대한 최소한의 접근 방식은 Milligram을 확인하십시오. 이 오픈 소스 CSS 라이브러리는 매우 작고 정말 간단한 인터페이스 기능을 제공합니다.

Bower, Yarn 및 npm을 통해 작동하므로 모든 패키지 관리 워크플로에 적합합니다.

문제는 Milligram이 Normalize 라이브러리를 필요로 하므로 이를 페이지에 추가해야 한다는 것입니다. 그러나 CSS 축소 도구가 있다면 두 라이브러리를 쉽게 결합하여 HTTP 요청을 줄일 수 있습니다.

4. 원넥서스

다음은 실제로 꽤 미친 모듈을 제공하는 새로운 프론트엔드 라이브러리입니다.

One-Nexus 프레임워크는 방대합니다. 반응형 디자인 및 터치 장치를 지원하고 Sass에서 실행되며 자동화된 빌드 도구와 함께 작동합니다. 그러나 이것이 시작하기에 더 복잡한 프레임워크 중 하나라고 생각합니다.

프레임워크와 명령줄에 이미 익숙하다면 One-Nexus가 정말 좋습니다. 너무 많은 모듈이 있어 머리가 멍해질 것입니다!

그러나 설정에 익숙해지고 초기 레이아웃을 올바르게 구성하는 데 시간이 걸릴 수 있습니다.

5. 시맨틱 UI

테스트된 프레임워크를 찾고 있다면 Semantic UI를 확인하십시오. 이것은 현재 v2.2에 수많은 기능이 있는 아름다운 프론트엔드 라이브러리입니다.

나는 Semantic을 프론트엔드 개발을 위한 알려지지 않은 Bootstrap과 같이 생각합니다. 주류 코더에게는 인기가 없지만 Bootstrap과 동일한 이점이 있습니다.

시맨틱 라이브러리에는 버튼, 탭, 드롭다운, 필요한 모든 것이 포함되어 있습니다. Plus는 간단한 디버깅과 다양한 멋진 테마를 제공하므로 처음부터 레이아웃을 사용자 정의할 수 있습니다.

6. 순수 CSS

저는 몇 가지 소규모 프로젝트에서 Pure CSS를 사용했고 정말 즐깁니다. 이것은 필요한 기능을 포함하도록 파일을 사용자 정의할 수 있기 때문에 가장 멋진 프레임워크 중 하나입니다.

다운로드 링크와 일부 설정 가이드가 포함된 시작 페이지에서 자세한 정보를 찾을 수 있습니다.

Pure의 미학은 매우 미니멀하지만 너무 단순하지 않은 느낌을 줍니다. 그들은 Google의 머티리얼 디자인의 일부 포인터와 함께 약간의 Bootstrap을 모방합니다. 개인 및 상업 프로젝트에 사용할 수 있는 재미있는 라이브러리입니다.

7. 잉크 인터페이스 키트

잉크 인터페이스 키트를 사용하면 놀라운 반응형 페이지를 만들 수 있습니다. 그것들은 단순해 보이고 매우 단순한 코드 형식을 따르지만 일반적으로 프론트엔드 프레임워크에서 원하는 것입니다.

Ink는 바닐라 JS 위에서 실행할 수 있는 자체 JS 라이브러리와 함께 제공됩니다. 이전에 Ink를 사용한 적이 없다면 조정이 필요할 것입니다. 그러나 구문 면에서 jQuery에 필적하는 방대한 라이브러리입니다.

이것은 Sass에서 실행되고 시맨틱 HTML과 함께 작동하며 훌륭한 프론트엔드 프레임워크처럼 느껴집니다.

8. 기초 CSS

나는 아직 GroundworkCSS에 대해 많은 테스트를 해보지 않았지만 이것은 응답성이 뛰어난 프레임워크 중 하나입니다.

현재 버전 2.x에서는 기본 HTML/CSS/JS 또는 Ruby on Rails용 템플릿의 두 가지 스타일로 전체 Groundwork 라이브러리를 다운로드할 수 있습니다.

둘 다 동일하게 작동하며 사용 가능한 페이지를 코딩하기 위한 강력한 프론트엔드 시스템을 제공합니다.

이것이 귀하의 사이트에서 어떻게 보일지 알아보려면 데모 레이아웃을 확인하십시오.

9. Materialise.css

Google이 머티리얼 디자인으로의 전환을 발표한 이후로 Google은 가장 큰 UI 디자인 언어 중 하나가 되었습니다. 그리고 원래 Android용으로 제작되었지만 Materialise와 같은 많은 프레임워크가 스타일을 복제하여 웹에 등장했습니다.

전체 프레임워크는 예상대로 실행됩니다. 완벽하게 반응하고 표준을 준수하며 모든 브라우저에 대한 사용자 지정 재설정을 지원합니다.

유일한 차이점은 기본 요소가 머티리얼 디자인 스타일을 취한다는 것입니다.

그리고 이것이 내가 가장 좋아하는 머티리얼 프레임워크일 수도 있지만, 다른 프레임워크를 탐색하여 눈에 띄는 다른 프레임워크를 볼 수 있습니다.

10. 탑코트

성능과 관련하여 코드의 품질을 간과할 수 없습니다. Topcoat는 성능을 염두에 둔 프레임워크로 이것을 마음에 새깁니다.

완전히 테마 가능하고 읽기 쉬운 HTML 및 CSS로 사용자 정의하기가 매우 쉽습니다. 모든 편집은 CSS에 대한 BEM 명명 규칙을 사용하여 명확한 구조를 따릅니다.

Topcoat의 진정한 이점은 부하 테스트와 성능에 중점을 둡니다. 빠르게 로드되는 맞춤형 레이아웃이 필요한 사람은 Topcoat를 살펴보아야 합니다.

11. 꽃잎

Petal은 시장에 출시된 최신 CSS 프레임워크 중 하나입니다. 다시 말하지만 이것은 완전히 반응하고 100% 오픈 소스이며 이 목록의 다른 주요 프레임워크를 유지할 수 있습니다.

그러나 그것은 꽤 작고 그 상태를 유지하기 위한 것입니다. Less CSS 전처리기를 기반으로 하며 Normalize도 필요합니다.

궁극적으로 이것은 Less CSS 개발자에게 어필해야 하는 초소형 프레임워크입니다. 코드 조각과 페이지 요소의 라이브 예제에 대한 온라인 문서를 살펴볼 수도 있습니다.