가장 인기 있는 웹 프론트엔드 프레임워크

프런트엔드 개발 프로그래머로서 좋은 웹 프론트엔드 프레임워크를 사용하는 방법을 배우는 것은 매우 중요합니다. 좋은 웹 프론트엔드 프레임워크는 작업 효율성을 크게 높이고 개발을 더욱 원활하게 만들어줍니다. 이 기사에서는 2017년에 가장 주목할 만한 프런트 엔드 개발 프레임워크를 소개합니다. 각 프레임워크에는 그리드 레이아웃, 버튼, 양식 또는 기타 페이지 요소를 만드는 데 도움이 되는 고유한 스타일이 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

Bootstrap

거의 모든 개발자는 Twitter의 개발 프레임워크인 부트스트랩을 알고 있습니다. 아마도 가장 오래된 프런트엔드 UI 프레임워크 중 하나일 것이며, 가장 초기 버전은 2011년에 출시되었습니다. 여기에는 UI 및 JS 구성 요소를 사용자 정의하고 다양한 탐색, 진행률, 버튼, 이동 경로 탐색 등을 편리하게 개발하는 데 도움이 되는 완전한 SASS 클래스 라이브러리 세트가 포함되어 있습니다.

최신 버전인 Bootstrap 4는 현재 개발 중입니다. 곧 출시되어야 합니다. 이는 bootstrap3에 큰 변화가 될 것입니다.

Foundation6

Foundation 클래스 라이브러리는 몇 년 동안 존재해 왔으며 최근 대규모 버전 업데이트가 있을 예정이며 클래스 라이브러리는 웹 사이트 개발 클래스 라이브러리와 이메일 개발 클래스 라이브러리의 두 가지 주요 클래스 라이브러리로 분할됩니다. 모든 레이아웃 유형을 개발하고 반응형 메뉴, 입력 상자, 탭 등과 같은 다양한 페이지의 관련 구성 요소를 완전히 제어하는 ​​데 사용할 수 있는 최소한의 UI 프레임워크를 제공합니다.

또한 편리한 웹 사이트 탐색 기능을 제공합니다. UI 구성 요소. 그리고 Grunt/Gulp, npm 및 SASS/compass 등과 같은 주류 웹 개발 도구를 지원합니다.

Petal

LESS를 기반으로 하는 최신 CSS 관련 웹 개발 프레임워크입니다.

이 클래스 라이브러리는 매우 간단하며 현재 버전은 0.6입니다. 하지만 실제 개발에 적용할 수 있는 프레임워크입니다. 그리드, 글꼴, 버튼, 입력 등과 같은 매우 명확한 문서가 포함되어 있습니다.

Petal의 개발 팀은 규모가 크지 않지만 성과가 매우 높습니다. 2017년 중반쯤에는 잘 알려진 프레임워크가 될 거라 믿습니다

Pure CSS

Pure CSS는 모듈식 디자인을 가지고 있습니다. 양식, 그리드, 차트, 탐색 버튼 등과 같은 다양한 구성 요소에 대한 소규모 클래스 라이브러리가 많이 있습니다.

사용할 클래스 라이브러리 수를 자유롭게 선택할 수 있습니다. 기본 클래스 라이브러리는 표준화 및 기타 간단한 재설정 CSS를 사용하여 통합 UI 인터페이스 효과를 만듭니다. 하지만 사용자 정의 그리드를 추가하여 개발 시간을 절약할 수 있습니다

모든 클래스 라이브러리는 도구를 사용하여 통합하고 최소화할 수 있습니다. 그리고 팀에서는 확장 클래스를 만드는 데 도움이 되는 간단한 가이드를 제공합니다

저는 개인적으로 Pure가 Bootstrap만큼 성공적인 프레임워크가 될 것이라고 생각합니다. 비록 많은 블로그에서 많이 언급되지는 않았지만 최고의 프레임워크 중 하나임은 분명합니다

Semantic UI

이 프레임워크는 현재 버전 2.2이며 그리드, 유형, 색상 및 입력 등과 같은 많은 일반적인 기능을 가지고 있습니다.

3000개 이상의 다양한 테마 유형으로 맞춤형 테마를 제공합니다. 또한 Google, Amazon, Twitter 및 기타 웹사이트의 스타일을 시뮬레이션하는 테마도 제공합니다. 또한 편리하게 복제하고 편집할 수도 있습니다.

기성 레이아웃 중에서 선택하여 나만의 개발 템플릿으로 사용할 수 있습니다. 시맨틱 UI에는 많은 사용자 정의 요소가 있으며 이러한 디자인은 매우 다릅니다

Milligram

초소형 클래스 라이브러리를 찾고 있다면 매우 좋은 선택입니다. 압축 후 크기 2kb

매우 간단하고 아름다운 프로젝트인 현재 버전은 1.3이며 안정적이며 실제 개발 준비가 되어 있습니다. npm, Yarn, Bower 등을 사용해 설치할 수 있지만 Normalize가 필요하므로 이 클래스 라이브러리를 포함해야 합니다

CSS 압축 도구를 사용하면 함께 병합하여 Http 요청 수를 절약할 수 있습니다

The 별로 친절하지 않은 유일한 것은 문서입니다. 물론 문서를 잘 활용할 수 있다면 Milligram을 사용하는 것은 매우 간단할 것입니다

Vital CSS

SASS를 지원하고 배우기 매우 쉬운 또 다른 미니멀리스트 UI 프레임워크

구성 요소 페이지에서 필요한 것을 소개합니다. 그것에 관한 모든 것. 새 프로젝트를 개발하기 위해 매우 간단한 CSS 프레임워크가 필요한 경우, 이는 확실히 귀하의 요구를 충족할 수 있습니다. 더 자세히 알아보려면 Vital CSS 개발 팀

Skeleton

응답 스타일, 울트라의 이 블로그를 참조하세요. - 가볍고 매우 간단한 프레임워크. 새로운 웹사이트 개발에 필요한 인프라를 제공합니다

몇 가지 기본 스타일이 포함되어 있지만 너무 화려하지는 않습니다. 실제로 자신의 필요에 맞게 프레임워크를 빠르고 쉽게 수정할 수 있습니다.

스켈레톤은 가장 안정적이고 작은 프레임워크입니다. 여기에 데모 페이지가 있습니다.

UI Kit

기능이 풍부한 프런트 엔드 클래스 라이브러리입니다. 많은 선택적 파일과 폴더가 있습니다. CSS는 스타일, 이미지는 아이콘, js는 javascript

페이지에 삽입한 후 각 js는 DOM 요소 및 구성 요소와 연결될 수 있으므로 다른 클래스 라이브러리와 쉽게 통합할 수 있습니다. 예를 들어 vue 또는 React

는 이 클래스 라이브러리를 사용하여 UI 구성 요소를 설정하고 생성할 수도 있습니다. 문서 페이지에는 웹사이트

Materialize

를 시작하는 데 도움이 되는 많은 예제가 포함되어 있습니다.

Google의 머티리얼 디자인은 Google 제품의 표준이 되었습니다. Materialise와 같은 웹 디자인 세계에 천천히 영향을 미치고 있습니다

이 무료 오픈 소스 프레임워크는 머티리얼 디자인을 한 단계 더 발전시킵니다. 직접 코딩하지 않고도 순수한 머티리얼 스타일 페이지를 만드는 가장 쉬운 방법입니다.

순수한 CSS 클래스 정의, JavaScript 클래스 라이브러리 및 구성 요소를 제공합니다. . 여기에서 몇 가지 실제 사례를 볼 수 있습니다.

이러한 웹 프런트 엔드 프레임워크는 각각 고유한 장점을 가지고 있으며 항상 모든 사람에게 적합한 프레임워크가 있습니다. 이 기사가 귀하의 작업을 더욱 효율적으로 만드는 데 도움이 되기를 바랍니다.

관련 추천:

20가지 강력한 PHP 프레임워크

글로벌 PHP 개발 프레임워크 순위 목록

실용적인 웹 프론트엔드 JS 및 UI 프레임워크 소개

PHP 개발할 때 다들 사용하시죠 What 프론트엔드 프레임워크?

처음으로 놀라운 프론트엔드 프레임워크인 vue.js를 접했습니다