어느 것이 나에게 적합합니까? 반응 형 CSS 프레임 워크 및 보일러 플레이트
CSS 프레임 워크는 몇 년 전부터 사용되어 왔지만, 반응 형 디자인 방식이 등장함에 따라 기존의 많은 즐겨 찾기가 쓸모 없게되었습니다. 다행스럽게도 차세대 CSS 프레임 워크와 상용구로 그 격차를 메우기 위해 많은 유능한 개발자들이 뛰어 들었습니다.
이미 많은 것들이 떠 다니고 있습니다. 모든 사람이 목록을 가지고 있지만, 실제로 각 프레임 워크와 보일러 플레이트가 다음 프레임 워크와 어떻게 다른지 안내하지 않아 정보에 입각 한 결정을 내릴 수 있습니다. 그것이 오늘 우리의 목표입니다. 22 개의 반응 형 CSS 프레임 워크와 상용구를 고유하게 만드는 이유를 살펴 보겠습니다.
검비
Gumby 프레임 워크는 960 그리드를 사용하여 몇 년 전에 이빨을 잘라 내고 반응 형 터치로 현대적인 웹 디자인 시대에 접어 들었습니다. 또한 폼, 버튼, 토글, 드롭 다운, 탭 등과 같은 것들을 위해 미리 만들어진 스타일을 가지고 있습니다.
시맨틱 그리드 시스템
그리드 시스템과 부풀어 오르고 의미없는 마크 업을 싫어한다면이 것이 당신을위한 것입니다. 시맨틱 그리드 시스템은 CSS 전 처리기 (LESS, Sass 및 Stylus)의 강력한 기능을 활용하여 거터 및 열 너비와 같은 항목에 대해 사용자 정의 가능한 변수를 만듭니다. CSS에 몇 가지 사전 빌드 된 믹스 인을 사용하기 만하면 추가 마크 업이 필요하지 않습니다!
그리드리스
Gridless는 모바일 우선 반응 형 웹 디자인을 사용하여 장치 너비에 맞게 조정되는 강력한 상용구입니다. 또한 CSS 정규화, IE 버그 수정 및 타이포그래피 스타일과 같은 훌륭한 기능이 포함되어 있습니다.
무테
Frameless는 다운로드 할 수있는 실제 파일 세트보다 기술적으로 반응 형 디자인에 접근하는 것이 권장되는 방식이기 때문에 분류하기가 어렵습니다. 세 단계가 있습니다. 먼저, 고정 너비 그리드를 정한 다음 무한 반복하고 뷰포트 중앙에 배치하여 마무리합니다.
이 사이트에는 프레임리스가 프레임 워크가 아니며 다운로드 할 파일이 없다고 명시되어 있지만, 이 주장에도 불구하고 실제로 시작하는 데 도움이되는 몇 가지 기본 템플릿이 있습니다.
비례 그리드
비례 그리드는 반응 형 CSS 레이아웃을 시도 할 때 발생하는 큰 문제, 즉 그리드를 중첩하고 매우 다양한 뷰포트에서 백분율 기반 값으로 레슬링을 처리합니다.
비례 그리드는 CSS 상자 크기 조정을 사용하여 유체 기둥과 혼합 된 고정 거터 (ems / rems)를 허용하는 솔루션을 만듭니다. 열 사이의 거리는 기본 글꼴 크기와 관련하여 모든 중단 점에서 동일하게 유지됩니다. 열은 예를 들어 1/2, 1/3, 2/3의 비율로 정의되며 중첩 된 경우에도 원하는만큼 쉽게 재사용 할 수 있습니다.
골디 락 접근
Goldilocks 접근법은 반응 형 디자인이 특정 장치의 지원에 의존하는 경향을 줄이는 것을 목표로합니다. 대신 어떤 장치에도 의존하지 않는 범용 디자인을 촬영합니다.
Goldilocks 접근 방식은 ems, 최대 너비, 미디어 쿼리 및 패턴 변환을 조합하여 설계가 해상도 독립적 인 세 가지 상태를 고려하도록합니다.
트위터 부트 스트랩
트위터 부트 스트랩은 소개가 필요하지 않습니다. 그것은 웹상에서 가장 크고 최악의 CSS 상용구 중 하나이며 전 세계 개발자들의 수많은 전문 및 개인 사이트의 출발점입니다.
Twitter Bootstrap에는 양식, 버튼, 탐색 메뉴 등과 같은 수많은 사전 스타일 된 요소 외에도 반응 형 그리드 시스템이 포함되어 있습니다. 여기에서 전체 소개를 확인하십시오.
ZURB 재단
두 프로젝트가 매우 유사하기 때문에 Foundation은 Twitter Bootstrap의 가장 중요한 경쟁자입니다. Bootstrap과 마찬가지로 Foundation은 다양한 스타일의 UI 요소뿐만 아니라 반응 형 그리드를 제공합니다.
Foundation 3은 최근에 시작되었으므로 잠시 동안 프로젝트를 보지 않았다면 잠시 시간을내어 확인하십시오. 어디에서나 찾을 수있는 가장 유용하고 철저한 프레임 워크 중 하나입니다.
해골
Skeleton은 외관을 만드는 가장 빠른 반응 형 상용구 중 하나였으며 여전히 최고 중 하나입니다. 개념적으로는 Foundation과 약간 비슷하지만 더 가벼워집니다 (유형, 버튼 및 양식은 유일한 UI 요소입니다).
Skeleton 튜토리얼을 확인하여이 툴을 사용하여 몇 분 안에 반응 형 디자인을 구현하고 실행하는 것이 얼마나 쉬운 지 알아보십시오.
아마존
Amazium은 이전의 960 그리드 기술 위에 구축 된 반응 형 그리드라는 점에서 Gumby와 매우 유사합니다. 최근 프레임 워크가 1, 200px까지 확장되도록 업데이트되었지만 대형 디스플레이를 활용할 수 있습니다. 망막 디스플레이 지원도 포함됩니다!
골든 그리드 시스템
골든 그리드 시스템은 자체를 "폴딩 그리드"라고 부릅니다. 뷰포트가 좁아 질 때 미디어 쿼리를 사용하여 원래 16 개 열 레이아웃을 8 개 및 4 개 열로 축소하는 데 사용됩니다.
지금까지 본 다른 그리드와 마찬가지로 Golden Grid System은 ems를 기반으로 거터를 사용하므로 거 터는 항상 컨텐츠에 비례하여 유지됩니다.
1140px CSS 그리드 시스템
이것은 멋진 것이없는 꽤 표준적인 그리드 시스템입니다. 백분율 기반 거터를 사용하는 12 컬럼 유동 그리드로 시작하여 1, 280 및 1, 140px 모니터에서 잘 작동합니다. 뷰포트가 작아짐에 따라 콘텐츠를 리플 로우하는 데 몇 가지 간단한 미디어 쿼리가 사용됩니다.
스택 레이아웃
StackLayout은 반란군을위한 것이며, 시도한 다른 프레임 워크와는 매우 다릅니다. 사실, 일반적인 CSS 레이아웃 프레임 워크가 싫어졌습니다.
여기서 작동하는 기본 원리는 StackLayout이 인라인 블록을 고유 한 레이아웃 시스템의 초석으로 사용한다는 것입니다. 시스템은 다소 기발하지만 그럼에도 불구하고 꽤 인상적입니다. 여기서 연습을 확인하십시오.
SimpleGrid
SimpleGrid는 나만큼이나 이런 것들을 가지고 노는 것을 좋아할 때 즐기는 또 다른 독특한 레이아웃 시스템입니다. 여기에있는 격자는 네 가지 화면 범위를 기반으로합니다. 720px 미만의 화면, 720px 이상의 화면, 985px 이상의 화면 및 1235px 이상의 화면.
시스템을 구현하기 위해 4 및 6 열 레이아웃의 "슬롯"클래스를 사용합니다. 복잡하게 들리지만 실제로는 그 이름에 충실하고 구현하기가 매우 간단합니다.
유체 기준선 그리드
Fluid Baseline Grid는 Baseline Grid를 준수하는 강력한 타이포그래피를 강조하여 제작되었습니다. 또한 표준을 따르지 않고 유용한 출발점을 제공하기 위해 3 개의 열 접기 그리드가 포함되어 있습니다.
칼럼
Columnal은 다양한 다른 프레임 워크에서 최상의 요소를 차용하는 일종의 하이브리드 그리드 시스템입니다. 1140px CSS 그리드 시스템의 탄성 DNA가 있으며 약 960.gs도 던져졌습니다. 꽤 표준적인 것들이지만 다른 사람들이 잘 맞지 않으면 시도해 볼 수 있습니다.
Inuit.css
Inuit.css는 실제로 확장 성을 염두에두고 구축 된 훌륭한 프레임 워크입니다. 커스텀 그리드 빌더를 사용하여 반응 형 그리드를 만든 다음 이글루 (플러그인)를 다운로드하여 유용한 방식으로 프레임 워크를 확장하십시오.
320 이상
320 이상은 웹 디자인 버즈 단어 모음과 같습니다. 여기에는 부트 스트랩 비주얼 스타일, Font Awesome 아이콘, Modernizr, Selectivizr, LESS 및 Sass와 함께 "모바일 우선"사고 방식을 사용하는 반응 형 레이아웃 시스템이 포함되어 있습니다. 그것은 당신이 즐길 것이라고 생각하는 멋진 작은 도구 상자입니다.
Susy : 나침반에 대한 반응 형 그리드
이것은 Sass와 Compass뿐만 아니라 레이아웃 시스템을 좋아하는 나 같은 슈퍼 머 저드를위한 것입니다. 믹스 인과 변수의 마법으로 몇 분 안에 레이아웃을 만들 수 있습니다.
Compass가 최근 그리드에 대한 기본 지원을 완전히 중단 했으므로 Susy는 그리드를 그리워하는 사람들에게 유용 할 것입니다.
Initializr – 반응 형 HTML5 템플릿
Initializr는 HTML5 보일러 플레이트, 부트 스트랩 또는 새로운 반응 형 상용구를 사용하여 HTML5 프로젝트를 쉽고 빠르게 시작할 수 있도록 도와주는 도구입니다.
반응 형 템플릿을 선택하는 것은 시작에 불과합니다. Modernizr 및 LESS와 같이 일반적으로 원하는 모든 리소스 중에서 선택하여 다운로드를 사용자 정의하십시오.
또 다른 모바일 보일러 플레이트
YAMB는 반응 형 유체 그리드, 작은 화면에서 선택 상자로 자동 전환되는 드롭 다운 탐색 메뉴 및 반응 형 이미지 / 슬라이드 쇼와 같은 몇 가지 주요 기능을 기반으로하는 반응 형 웹 프로젝트를위한 훌륭한 출발점입니다.
나는 웹 사이트가 꽤 추악하다고 생각하지만 툴셋 자체는 매우 편리합니다!
Wirefy
Wirefy는 신속하게 반응하는 와이어 프레이밍 실험을 염두에두고 특별히 제작되었습니다. 16 개의 열 960 그리드의 수정 된 버전과 일부 부트 스트랩과 같은 UI 요소 (메뉴, 양식, 슬라이드 쇼, 버튼, 이미지 등)를 사용합니다.
당신이 가장 좋아하는 것은 무엇입니까?
필연적으로 이러한 유형의 게시물은 웹 디자인을 위해 모든 종류의 템플릿 또는 그리드 시스템을 사용한다는 전체 개념을 불신해야 할 필요가 있다고 생각하는 댓글 작성자를 끌어들일 것입니다. 그들은 단순히 모든 사람을위한 것이 아니며 당신이 그들을 참을 수 없다면 나는 당신의 의견을 존중합니다.
그리드 시스템을 사용하고 있다면 위의 옵션에 대한 의견을 듣고 싶습니다. 당신은 어떤 것들을 시도했고 그것들에 대해 어떻게 생각 했습니까? 당신이 가장 좋아하는 것은 무엇입니까?
