부트스트랩은 어디에나 있지만 항상 작업에 적합한 도구는 아닙니다. 여기에 몇 가지 훌륭한 대안이 있습니다!
요즘 무작위로 웹사이트 프론트엔드의 소스 코드를 확인하면 아래에 Bootstrap을 찾을 수 있습니다. 우리는 모두 container-fluid, row, col-sm-6 등과 같은 개념에 너무 익숙해져서 다른 스타일의 프론트 엔드 개발이 가능하다는 것을 상상하기조차 어렵습니다. 그래서 우리는 다음 프로젝트를 빌드해야 할 때 무의식적으로 Bootstrap에 도달합니다. 즉, 인기가 Bootstrap을 모든 프로젝트와 요구에 적합하게 만들지는 않습니다.
사실, 정말 린 프론트엔드의 경우 모든 부트스트랩 CSS JS는 큰 팽창을 일으킬 수 있습니다.
이 문서의 목적은 두 가지입니다.
설명 부분은 정말 중요한 것 같아요. 왜냐하면 대부분의 경우 사람들은 자신에게 문제가 있다는 사실조차 깨닫지 못하거나 부트스트랩을 선택하여 일을 더 어렵게 만들고 있다는 사실조차 깨닫지 못하기 때문입니다. 마지막으로, 이것은 어떤 방법으로든 안티 부트스트랩 게시물이 아닙니다. 저는 Bootstrap 4를 좋아하고 가능하면 언제든지 사용합니다. 하지만 저는 가장 인기 있는 솔루션을 사용해야 하는 개인 개발자입니다. 또한 저는 UI 개발자 자체가 아니므로 프런트 엔드를 구축할 때 너무 많은 것에 대해 걱정하지 않습니다.
이를 통해 어떤 대안이 있는지 살펴보겠습니다.
목차
플렉스박스 그리드
잠시 생각해 보십시오. Bootstrap을 사용하기 시작했고 여전히 사용하고 있는 가장 큰 이유는 그리드 시스템 때문입니다. 물론 행, col-md-6 등의 클래스에 익숙해지는 데 시간이 걸렸지만 이제는 행, 열, 오프셋 등의 관점에서 레이아웃을 생각하는 것이 제2의 천성입니다.
그리고 자신에게 정직하다면 Bootstrap의 다른 모든 것이 작업하기 다소 번거롭다는 것을 알게 될 것입니다. 양식, 탐색, 버튼, 테이블 또는 기타 무엇을 하든 기억해야 할 클래스가 많이 있습니다. 저와 같은 경우 아직 모든 클래스와 클래스가 하는 일에 익숙하지 않고 그리드에만 부트스트랩을 사용하고 다른 모든 CSS를 직접 작성하는 경우가 많습니다.
그렇다면 훨씬 더 잘 할 수 있습니다. 플렉스박스 그리드.
Flexbox Grid는 이름에서 알 수 있듯이 CSS를 기반으로 하는 그리드 시스템입니다. 플렉스박스 속성. 그러나 CSS 기술과 달리 모든 복잡성이 멋지게 추상화되어 원하는 방식으로 요소를 배치하는 데만 집중할 수 있습니다. 가장 좋은 점은 모든 코드와 클래스 이름이 부트스트랩 4에서 원하는 것을 모방한다는 것입니다. 즉, 이 두 도구 사이를 전환할 때 정신적 마찰이 전혀 필요하지 않습니다. 예를 들어, Flexbox 그리드에서 “주변 공간”에 대한 코드는 다음과 같습니다.
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
이 그리드 시스템의 축소된 CSS 파일은 최종 다운로드 크기에서 수백 KB를 절약하는 10.7KB에 불과합니다. 요즘 Flexbox Grid는 Bootstrap을 완전히 사용자 정의하기 위해 싸우고 싶지 않기 때문에 내가 가장 좋아하는 것입니다. 나는 바닐라 요소로 시작하여 내가 필요한 곳이면 어디에서나 Flexbox Grid를 사용하여 직접 스타일을 지정하는 것을 좋아합니다.
배우다 여기 Flexbox, 온라인.
순수 CSS
부트스트랩이 모듈로 분할되어 필요한 모듈만 가져올 수 있다면 좋지 않을까요?
잘, 순수 CSS 웹사이트의 다양한 기능 영역을 다루는 모듈 세트입니다. 하나 또는 모두를 다운로드하도록 선택할 수 있지만 다운로드 크기는 3.7KB를 초과하지 않습니다!
네, 잘 읽으셨습니다.
함께 번들로 제공되고 gzip으로 압축된 모든 모듈은 3.7KB이지만 개별적으로는 더 많습니다. 그리드 모듈은 0.8KB이고 기본 모듈은 1.0KB입니다. PureCSS 뒤에 있는 팀은 전적으로 모바일 장치를 염두에 두고 구축되었기 때문에 CSS의 모든 라인이 포함되기 전에 효율성을 위해 주의 깊게 조사되었다고 말합니다.
그리드 및 양식 모듈만 필요하다고 가정해 보겠습니다. 음, 이 두 개(기본 모듈과 함께)를 다운로드하면 3.4KB 미만으로 완료됩니다! 버튼, 테이블 및 메뉴 모듈을 사용하지 않을 경우 CSS를 포함할 필요가 없습니다.
PureCSS에는 클래스가 있으며 결과 코드는 다음 작업에 매우 익숙할 수 있는 Bootstrap을 모방하지 않습니다.
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
더 이상 12열 그리드가 없음을 알 수 있습니다. PureCSS에는 열의 너비를 지정하는 그리드 시스템이 있습니다. 따라서 pure-u-lg-1-4는 이 요소가 큰 화면에서 사용 가능한 너비의 1/4 또는 25%를 차지해야 함을 의미합니다. 1/5의 배수로 너비도 사용할 수 있습니다.
대체로 PureCSS는 필요에 따라 선택하고 선택할 수 있는 자유롭고 놀라운 CSS 도구(프레임워크?)입니다. 즉, 새로운(약간 다른) 작업 방식을 배워야 하기 때문에 상당한 양의 구매 및 학습 곡선이 따라옵니다.
PureCSS도 자체 클래스와 기본 스타일을 가지고 있기 때문에 Bootstrap과 크게 다르지 않습니다.
지밋
그만큼 지밋 프레임워크는 이 목록에서 일종의 이상한 사람입니다. 예, UI 구축을 위한 프레임워크이지만 특정 유형의 UI인 목업을 대상으로 합니다.
제품의 기능을 보여주기 위해 프론트엔드를 개발해야 할 때가 있습니다. 물론 이를 수행하는 이상적인 방법은 UI 디자이너/개발자를 참여시키고 고급 와이어프레임 도구(Moqups, Blasmic 등) 중 하나에서 목업을 만드는 것입니다. 페이지는 픽셀 단위로 완벽하고 색 구성표는 매끄럽고 잘 선택되며 페이지는 참여, 리뷰, 댓글 등을 위해 열려 있습니다.
그러나 실생활은 이상적이지 않으며 종종 당신은 직장에서 유일한 사람이며 모든 모자를 쓰고 일을 끝내야합니다. 그럴 때 다음과 같은 프레임워크가 필요합니다.
- HTML/CSS로 코딩할 수 있습니다.
- 가볍다
- 기본 구성 요소의 광범위한 컬렉션이 있습니다.
- 품위 있고 일관된 스타일 언어가 있습니다.
- 가능하면 와이어프레임 디자인의 “회색” 톤과 유사합니다.
- 배우기 쉽다
- 일부 CSS 전처리기가 내장되어 있습니다.
Zimit은 이 모든 확인란을 선택합니다. 크기가 84KB에 불과하며 다양한 구성 요소 중에서 선택할 수 있습니다. 다음은 제가 직접 코딩하는 데 많은 시간이 걸리기 때문에 제가 정말 매력적으로 생각한 몇 가지 예입니다.
나무보기
빵 부스러기
탭
탐색할 더 많은 맛있는 것들이 있습니다. 한번 봐봐 여기.
코드가 어떻게 생겼는지 봅시다. Zimit에서 그리드 시스템을 사용하는 방법은 다음과 같습니다.
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
여기서 “c”는 “column”을 의미하므로 “c4″는 4개 단위에 걸쳐 있는 열을 의미합니다(Bootstrap과 마찬가지로 그리드는 12 크기임). 내 생각에는 Bootstrap과 매우 유사하고 매우 직관적입니다.
대체로 Zimit은 반응이 빠르고 보기 좋은 UI 프로토타입을 개발하기 위한 완전하고 쉬운 프레임워크입니다. Bootstrap은 다운로드 용량이 훨씬 더 크고 결과 디자인이 촌스럽기 때문에 Bootstrap(프로토타이핑의 경우)보다 낫습니다.
HTML 킥스타트
빌드하는 대부분의 프로젝트에서 속도가 중요합니다. 웹 개발 속도의 가장 큰 장애물은 프론트 엔드 부분이며, 프론트 엔드 개발의 가장 큰 “지연자”는 우아하게 보이는 대화형 구성 요소를 코딩해야 하는 필요성입니다. 구성 요소가 작동하는 방식은 다양하고 관리해야 할 화면 크기도 많기 때문에 구성 요소를 코딩하고 관리하는 것은 개발자에게 악몽이 될 수 있습니다.
HTML 킥스타트 대안을 제시합니다.
간단히 말해서; 프로젝트에 바로 투입하여 개발 시간을 대폭 단축할 수 있는 정말 세련된 구성 요소 모음입니다. 다음은 내가 찾은 몇 가지 멋진 구성 요소입니다.
쓰러지 다
버튼
탭(중앙 및 아이콘 포함)
구체화하다
모든 일반적인 웹 디자인 문제에 대한 기성 솔루션이 있다는 사실 때문에 Bootstrap이 마음에 들지만 머티리얼 디자인 스타일의 팬이라면 시도해 보십시오. 구체화하다.
Materialise는 12포인트 그리드 시스템, 오프셋 및 양식, 카드 등과 같은 친숙한 구성 요소인 Bootstrap과 대부분 비슷합니다. 그러나 많은 사람들에게 어필할 수 있는 특정 장점이 있습니다.
푸시풀
Materialize CSS의 푸시/풀 기능을 사용하면 열을 재정렬할 수 있습니다. 이것은 레이아웃이 요소 순서와 다른 새로운 CSS 그리드 표준을 연상시킵니다.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
결과는 다음과 같습니다.
열의 위치가 바뀌었음을 알 수 있습니다. 이는 기존의 부트스트랩 기반 CSS에서는 달성할 수 없는 것입니다.
자바스크립트
Materialise와 함께 제공되는 몇 가지 JavaScript 기능과 효과가 있습니다. 툴팁, 토스트(Android와 유사한 임시 알림), Parallex, 압정 등이 그 중 일부입니다. 내가 좋아하는 정말 놀라운 효과 중 하나는 FeatureDiscovery입니다. 기본적으로 일부 이벤트(예: 버튼 누름)에서 페이지의 요소를 강조 표시하여 해당 요소에 대한 사용자의 주의를 끌 수 있습니다. 그것을 말로 완전히 설명하기는 어려우므로 https://materializecss.com/feature-discovery.html로 이동하여 내가 의미하는 바를 확인하십시오.
대체로 Materialize는 Bootstrap의 훌륭한 대안이거나 모든 기능을 갖춘 Material CSS 프레임워크를 채택하려는 사람들에게 적합합니다.
결론
부트스트랩은 반응형 디자인과 동의어입니다. “모바일 우선 디자인”이라는 용어를 대중화하고 그것이 어떻게 이루어질 수 있는지 보여준 것은 부트스트랩이었습니다. 그러나 부트스트랩이 대부분의 시간에 작업을 완료하는 동안 작업을 완료하는 것만으로는 항상 충분하지 않습니다. Bootstrap이 당신을 제한하고 있고 당신의 요구가 특별하다고 느낀다면 여기에 나열된 옵션 중 하나가 도움이 될 것입니다. 🙂