프런트엔드 개발 프로그래머로서 좋은 웹 프론트엔드 프레임워크를 사용하는 방법을 배우는 것은 매우 중요합니다. 좋은 웹 프론트엔드 프레임워크는 작업 효율성을 크게 높이고 개발을 더욱 원활하게 만들어줍니다. 이 기사에서는 2017년에 가장 주목할 만한 프런트 엔드 개발 프레임워크를 소개합니다. 각 프레임워크에는 그리드 레이아웃, 버튼, 양식 또는 기타 페이지 요소를 만드는 데 도움이 되는 고유한 스타일이 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.
Bootstrap
거의 모든 개발자는 Twitter의 개발 프레임워크인 부트스트랩을 알고 있습니다. 아마도 가장 오래된 프런트엔드 UI 프레임워크 중 하나일 것이며, 가장 초기 버전은 2011년에 출시되었습니다. 여기에는 UI 및 JS 구성 요소를 사용자 정의하고 다양한 탐색, 진행률, 버튼, 이동 경로 탐색 등을 편리하게 개발하는 데 도움이 되는 완전한 SASS 클래스 라이브러리 세트가 포함되어 있습니다.
최신 버전인 Bootstrap 4는 현재 개발 중입니다. 곧 출시되어야 합니다. 이는 bootstrap3에 큰 변화가 될 것입니다.
Foundation6
Foundation 클래스 라이브러리는 몇 년 동안 존재해 왔으며 최근 대규모 버전 업데이트가 있을 예정이며 클래스 라이브러리는 웹 사이트 개발 클래스 라이브러리와 이메일 개발 클래스 라이브러리의 두 가지 주요 클래스 라이브러리로 분할됩니다. 모든 레이아웃 유형을 개발하고 반응형 메뉴, 입력 상자, 탭 등과 같은 다양한 페이지의 관련 구성 요소를 완전히 제어하는 데 사용할 수 있는 최소한의 UI 프레임워크를 제공합니다.
또한 편리한 웹 사이트 탐색 기능을 제공합니다. UI 구성 요소. 그리고 Grunt/Gulp, npm 및 SASS/compass 등과 같은 주류 웹 개발 도구를 지원합니다.
PetalLESS를 기반으로 하는 최신 CSS 관련 웹 개발 프레임워크입니다.
이 클래스 라이브러리는 매우 간단하며 현재 버전은 0.6입니다. 하지만 실제 개발에 적용할 수 있는 프레임워크입니다. 그리드, 글꼴, 버튼, 입력 등과 같은 매우 명확한 문서가 포함되어 있습니다.
Petal의 개발 팀은 규모가 크지 않지만 성과가 매우 높습니다. 2017년 중반쯤에는 잘 알려진 프레임워크가 될 거라 믿습니다
Pure CSSPure 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 CSSSASS를 지원하고 배우기 매우 쉬운 또 다른 미니멀리스트 UI 프레임워크
구성 요소 페이지에서 필요한 것을 소개합니다. 그것에 관한 모든 것. 새 프로젝트를 개발하기 위해 매우 간단한 CSS 프레임워크가 필요한 경우, 이는 확실히 귀하의 요구를 충족할 수 있습니다. 더 자세히 알아보려면 Vital CSS 개발 팀
Skeleton응답 스타일, 울트라의 이 블로그를 참조하세요. - 가볍고 매우 간단한 프레임워크. 새로운 웹사이트 개발에 필요한 인프라를 제공합니다
몇 가지 기본 스타일이 포함되어 있지만 너무 화려하지는 않습니다. 실제로 자신의 필요에 맞게 프레임워크를 빠르고 쉽게 수정할 수 있습니다.
스켈레톤은 가장 안정적이고 작은 프레임워크입니다. 여기에 데모 페이지가 있습니다.
UI Kit기능이 풍부한 프런트 엔드 클래스 라이브러리입니다. 많은 선택적 파일과 폴더가 있습니다. CSS는 스타일, 이미지는 아이콘, js는 javascript
페이지에 삽입한 후 각 js는 DOM 요소 및 구성 요소와 연결될 수 있으므로 다른 클래스 라이브러리와 쉽게 통합할 수 있습니다. 예를 들어 vue 또는 React
는 이 클래스 라이브러리를 사용하여 UI 구성 요소를 설정하고 생성할 수도 있습니다. 문서 페이지에는 웹사이트
Materialize를 시작하는 데 도움이 되는 많은 예제가 포함되어 있습니다. Google의 머티리얼 디자인은 Google 제품의 표준이 되었습니다. Materialise와 같은 웹 디자인 세계에 천천히 영향을 미치고 있습니다 이 무료 오픈 소스 프레임워크는 머티리얼 디자인을 한 단계 더 발전시킵니다. 직접 코딩하지 않고도 순수한 머티리얼 스타일 페이지를 만드는 가장 쉬운 방법입니다. 순수한 CSS 클래스 정의, JavaScript 클래스 라이브러리 및 구성 요소를 제공합니다. . 여기에서 몇 가지 실제 사례를 볼 수 있습니다. 이러한 웹 프런트 엔드 프레임워크는 각각 고유한 장점을 가지고 있으며 항상 모든 사람에게 적합한 프레임워크가 있습니다. 이 기사가 귀하의 작업을 더욱 효율적으로 만드는 데 도움이 되기를 바랍니다. 관련 추천:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
