Susy 및 Breakpoint로 유연한 레이아웃을 만드는 방법

반응 형 레이아웃을 만드는 것은 관련된 수학으로 인해 어려울 수 있으므로 디자이너가 프로세스를 단순화하기 위해 프레임 워크 및 / 또는 Sass로 전환하는 것이 일반적입니다. 많은 프레임 워크가 12 열 그리드를 기반으로하지만 반응 형 사이트가 항상이 구조에 맞는 것은 아닙니다. 여기에서는 두 개의 Sass 확장을 사용하여 12 열 그리드를 초월하는 진정으로 유연한 레이아웃을 만드는 방법을 보여 드리겠습니다.



문제

반응 형 레이아웃을 디자인하는 것은 서로 다른 중단 점에서 컨테이너, 행, 열 및 거터의 너비를 계산하는 것과 관련이 있기 때문에 어려울 수 있습니다. 프레임 워크는 공통 중단 점에 대한 사전 설정을 만들어 도움을 줄 수 있습니다. 예를 들어 부트 스트랩 3은 4 개의 미디어 쿼리 중단 점이있는 12 열 그리드를 제공합니다. 그런 다음 콘텐츠가 그리드의 특정 지점을 차지하도록하는 클래스를 사용하고 거 터는 항상 30px를 차지합니다.



XP-Pen 아티스트 15.6 Pro 리뷰

3 개의 중단 점 (위에 표시된 2 개) 만있는 간단한 부트 스트랩 3 레이아웃에는 의미 값을 추가하지 않는 클래스가 있습니다.

3 개의 중단 점 (위에 표시된 2 개) 만있는 간단한 부트 스트랩 3 레이아웃에는 의미 값을 추가하지 않는 클래스가 있습니다.

이것은 대부분의 경우 훌륭하게 작동하지만 두 가지 문제가 있습니다. 첫째, 이러한 클래스를 마크 업에 추가하면 약간의 장황함을 얻을 수 있습니다. 모바일 장치의 모든 열, 소형 장치의 12 개 열 중 6 개, 중간 장치의 4 개 열을 사용하는 레이아웃을 원한다고 가정 해 보겠습니다. 마크 업은 다음과 같이 보일 수 있습니다.



Services

Exotic Pets

We offer specialized care for reptiles, rodents, birds, and other exotic pets.

두 번째 문제는 이러한 클래스가 HTML에 레이아웃 정보를 추가하고 특히 대규모 설치에서 코드를 업데이트하기 어렵게 만든다는 것입니다. 레이아웃이 더 복잡 해짐에 따라 다음과 같은 코드가 생성 될 수 있습니다.

더 큰 문제는 유연성이 거의 없다는 것입니다. 어려운 부분이기 때문에 프레임 워크가 수학을 처리해야하지만 레이아웃의 메트릭을 지시해서는 안됩니다. 누가 이러한 프레임 워크를 당신의 보스로 만들었습니까?



Susy

Susy 의 간단한 약속은 수학을 처리하는 동안 설계에 대해 걱정하게하는 것입니다. 핵심은 완전히 유연한 그리드 시스템에서 폭을 계산하기위한 Sass 믹스 인 세트입니다.

Susy는 레이아웃 그리드의 수학을 처리하는 Sass 용 믹스 인 시리즈이므로 디자인 요소에 집중할 수 있습니다.

Susy는 레이아웃 그리드의 수학을 처리하는 Sass 용 믹스 인 시리즈이므로 디자인 요소에 집중할 수 있습니다.

가져 오기 명령을 통해 프로젝트로 라이브러리를 가져 오는 것으로 시작합니다 : @import 'susy';. 이를 통해 구현이 더 간단 할 수없는 Susy의 그리드 프레임 워크에 액세스 할 수 있습니다. 가장 기본적인 형태로, 여러분이 배워야 할 믹스 인이 두 개뿐입니다. 첫 번째는 용기 믹스 인입니다.

컨테이너

컨테이너는 요소의 너비가 다른 중단 점에 맞게 조정되는 방식을 제어하는 ​​데 도움이됩니다. Susy를 사용하면 HMTL 코드에 추가 클래스를 추가하지 않고도 언제든지 모든 요소 내부의 컨테이너를 재정의 할 수 있습니다.

다른 웹 사이트를 레이아웃한다고 가정 해 보겠습니다. HTML 요소 내에 컨테이너를 만들려면 다음과 같이 선언 내에 포함을 추가 할 수 있습니다.

#welcome { article { @include container(70%); } //article }

그러면 HTML에 .container 클래스를 추가 할 필요없이 섹션 클래스가있는 항목이 부트 스트랩 컨테이너처럼 작동하게됩니다. 즉, HTML이 훨씬 더 의미가있을 수 있습니다.

Welcome to the Landon Hotel

The original Landon perseveres after 50 years in the heart of West London. The West End neighborhood has something for everyone – from theater to dining to historic sights. And the not-to-miss Rooftop Cafe is a great place for travelers and locals to engage over drinks, food, and good conversation.

내 HTML을 훨씬 더 읽기 쉽게 만드는 것 외에도 업데이트하기가 더 쉽습니다. 콘텐츠 및 장면과 같은 클래스를 사용할 때 콘텐츠가 원하는 방식으로 작동하도록하기 위해 추가해야 할 클래스 수를 생각할 필요없이 레이아웃 측면에서 해당 요소의 의미를 재정의하기 쉽습니다. .



이 사이트의 시작 섹션에서는 뷰포트 너비의 백분율로 설정된 Susy의 유연한 컨테이너를 사용합니다.



포토샵에서 피부를 매끄럽게하는 방법
이 사이트의 시작 섹션에서는 뷰포트 너비의 백분율로 설정된 Susy의 유연한 컨테이너를 사용합니다.

스팬

Susy에서는 범위를 사용하여 행과 열을 만듭니다. 세 열 중 하나를 차지하는 요소를 만들려면 다음과 같이 작성할 수 있습니다.

#usefulinfo { section { @include span(1 of 3); } }

이것의 정말 대단한 점은 특정 수의 열을 따르고 그에 따라 요소를 조정할 필요가 없다는 것입니다. 내 레이아웃의 모든 요소는 당시에 필요한 공간 만 차지할 수 있습니다.



간단한 @include span 문을 사용하여 각 컨테이너를 사용자 지정 3 열 그리드에 맞도록 설정할 수 있습니다.

간단한 @include span 문을 사용하여 각 컨테이너를 사용자 지정 3 열 그리드에 맞도록 설정할 수 있습니다.

이것은 칼럼에 대한 생각을 정말로 바꿔줍니다. 부트 스트랩을 사용하는 경우 12 개 열 중 1/3이 4 개이므로 위 코드를 .col-sm-4로 작성합니다. Susy를 사용하면 몇 개의 단위를 확장 할 것인지 생각할 필요가 없습니다. 필요한 공간을 간단히 지정할 수 있습니다. 특정 수의 열로의 변환에 대해 더 이상 생각하지 않을 때 대신 레이아웃의 모양에 집중할 수 있습니다.

기본값 설정

물론 모든 레이아웃 시스템에서 기본값을 사용하는 것이 좋으므로 모든 인스턴스에서 거터의 크기를 지정할 필요가 없습니다. Sass 상단에서 $ susy라는 변수를 수정하여이를 수행합니다.



$susy: ( columns: 12, container: 60em, gutters: 1/4, gutter-position: inside );

Susy에는 기본 그리드를 설정하는 데 사용할 수있는 많은 기본값이 있지만이 기본 설정은 표준 부트 스트랩과 같은 기본값을 구성하는 것을 처리합니다. 잊지 마세요, Susy의 모든 것은 사용자 정의가 가능하므로 이들 중 어느 것과도 결혼하지 않고 태그별로 변경할 수 있습니다.

컨테이너 믹스 인에서 @include 명령을 사용할 때 기본 그리드에는 이제 12 개의 열이 있으며 해당 컨테이너는 열 크기의 1/4 인 거터와 함께 60em 너비로 잠 깁니다. 이전 섹션을이 그리드에 맞추려면 다음과 같이 선언을 작성할 수 있습니다.

#usefulinfo { section { @include span(4); } }

즉, 각 섹션은 12 개 열 중 4 개를 차지합니다. 그러나 요소가 '세 개 중 하나'열을 차지한다고 말할 수있는 것이 더 합리적이라고 생각합니다. 열을 특정 위치로 오프셋해야하는 경우 다음 표기법을 사용할 수 있습니다.

@include span(8 at 4 of 12);

이렇게하면 요소가 12 열 그리드의 네 번째 위치에서 시작하여 8 개의 열을 차지할 수 있습니다. 따라서 레이아웃을 생성 할 때 기존 그리드에 디자인을 맞추는 대신 콘텐츠에 필요한 작업에 집중할 수 있습니다.

패딩 열

요소 배치를 제어하는 ​​또 다른 방법은 열을 채우는 것입니다. 이렇게하면 열 양쪽에 여러 열 공간이 추가됩니다. 예를 들어 다음과 같이 열을 오른쪽으로 7 단위 이동하고 왼쪽에서 한 단위 채울 수 있습니다.

@include pad(7,1);

즉, 긍정적 인 공간 (요소가 차지해야하는 열 수)에 대해 생각하여 사물을 배치하는 것 외에도 콘텐츠의 각 측면의 간격을 기준으로 반대 방향으로 디자인을 만들 수 있습니다.

패드 포함을 사용하면 네거티브 공간을 기반으로 콘텐츠 레이아웃이 가능합니다.

패드 포함을 사용하면 네거티브 공간을 기반으로 콘텐츠 레이아웃이 가능합니다.

미디어 쿼리 관리

진정한 반응 형을 만들려면 열 설정 및 디자인을 반응 형 중단 점과 결합 할 수 있어야합니다. 이를 위해 라이브러리에서 다른 믹스 인 세트를 사용할 수 있습니다. 중단 점 .

중단 점을 사용하면 레이아웃에서 미디어 쿼리를 더 쉽게 처리 할 수 ​​있습니다. 미디어 쿼리 중단 점을 생성하는 데 필요한 언어를 단순화하여이를 수행합니다. 일반적으로 다음과 같은 규칙을 사용하여 생성합니다.

@media (min-width: 34em) and (max-width: 62em) { .container { ... } }

이렇게하면 선언이 레이아웃에 영향을 미치는 폭 범위가 생성됩니다. 중단 점은 호출을 작성하기 훨씬 쉬운 상식적인 믹스 인으로 캡슐화합니다.

.container { @include breakpoint(34em 62em) { ... } }

기존 클래스 내에서 쉽게 할당 할 수 있기 때문에 호출도 다릅니다. Breakpoint의 가장 큰 장점은 일반적인 레이아웃 요구 사항에 따라 가정을한다는 것입니다.

중단 점 규칙도 배우기 쉽습니다. 알아야 할 세 가지 사항이 있습니다.

  1. 중단 점 호출에 단일 숫자 만 포함하는 경우 Breakpoint는 최소 너비 미디어 쿼리 호출을 가정합니다.
  2. 두 숫자를 포함하면 중단 점은 이전 예에서와 같이 두 숫자 사이의 범위를 지정한다고 가정합니다.
  3. 두 개의 값을 포함하고 하나는 문자열 인 경우 믹스 인을 기능 값 쌍으로 전송한다고 가정하므로 원하는 경우 오리엔테이션 또는 기타 특수 미디어 쿼리 규칙으로 전송할 수 있습니다.

중단 점은 버전 2.2.1부터 Susy로 접혔습니다. Susy 버전은 Breakpoint 믹스 인처럼 작동하지만 중단 점을 호출하는 대신 susy-breakpoint를 사용합니다. 다음과 같이 동일한 호출이 이루어집니다.

.container { @include susy-breakpoint(34em 62em) { max-width: 50%; margin-left: auto; margin-right: auto; } }

중단 점 및 Susy

Breakpoint와 Susy를 결합하면 다양한 미디어 쿼리 선언에 맞게 쉽게 조정할 수있는 유연한 그리드를 얻을 수 있습니다. 사이트의 정보 섹션에 대한 HTML을 살펴 보겠습니다.

Susy와 Breakpoint를 결합하여 서로 다른 그리드 레이아웃을 포함하는 미디어 쿼리를 만들 수 있습니다. 내 레이아웃에는 세 가지 섹션이 있지만 뷰포트의 너비에 따라 다른 규칙을 갖기를 원합니다.

두 개의 다른 중단 점에서 레이아웃이 다르게 작동하지만 Susy 및 Breakpoint를 사용하여 Sass에서 표현하기가 매우 쉽습니다.

두 개의 다른 중단 점에서 레이아웃이 다르게 작동하지만 Susy 및 Breakpoint를 사용하여 Sass에서 표현하기가 매우 쉽습니다.

이 두 가지 중단 점에서 레이아웃은 극적으로 다르게 작동합니다. 오른쪽의 큰 중단 점에서 각 섹션은 세 개의 열을 차지합니다. 더 작은 중단 점에서 첫 번째 열은 뷰포트의 100 %를 차지하지만 다른 두 열은 뷰포트의 절반을 차지합니다. 이것이 이러한 믹스 인을 강력하게 만드는 이유입니다. 이 두 레이아웃을 표현하는 코드는 간결합니다.

section { @include susy-breakpoint(650px) { @include span(1 of 3); } //breakpoint @include susy-breakpoint(450px 650px) { &.checklist { @include span(1 of 2) } //checklist } //breakpoint } //section

먼저 섹션 태그의 모든 요소에 대한 기본값을 설정합니다. 이러한 요소가 650px보다 큰 뷰포트에 도달하면 각 요소가 단일 단위를 차지하는 3 유닛 그리드를 차지합니다.

레이아웃이 450px에서 650px 사이 인 경우 .checklist 클래스가있는 요소 (서비스 및 접근성 섹션)는 두 개의 열만있는 완전히 새로운 그리드에 적합하며 각 요소는 해당 단위 중 하나를 차지합니다.

도착 정보는이 두 중단 점 사이의 그리드에서 100 %를 차지합니다. 450 픽셀 미만에서는 어떤 일이 발생하는지 지정하지 않았습니다. 이것은 기본적으로 처리됩니다. 각 섹션은 뷰포트의 100 %를 차지합니다.

노트북 가방 13 인치 macbook pro

Mixins로 레이아웃 마스터하기

이 두 가지 믹스 인 프레임 워크가 제공하는 것은 레이아웃을 만드는 데 사용하는 코드를 뛰어 넘습니다. 이 그리드 또는 그리드에 대해 걱정할 필요없이 레이아웃을 표현하는 기능은 프로젝트를 설계 할 때 두뇌가 작동하는 방식을 변경합니다.

오해하지 마세요. 저는 프레임 워크를 좋아합니다. Bootstrap을 사용하면 전례없는 속도로 레이아웃을 만들 수 있습니다. 레이아웃을 넘어서 모든 종류의 CSS 및 JavaScript 구성 요소를 제공하는 전투 테스트를 거친 그리드를 제공하여 테이블, 모달 및 양식과 같은 공통 요소를 빠르게 처리합니다.

제가 설명한 디자인 시스템은 레이아웃을 설명하는 데 사용하는 언어를 변경하는 것입니다. 웹 사이트 디자인에 대한 생각을 바꾸는 자연스럽고 이전 버전과 호환되며 배우기 쉬운 시스템입니다.

: 레이 빌라로 보스

Ray Villalobos는 Lynda.com의 스태프 저자로 풀 스택 디자인 및 개발, 프런트 엔드 디자인, JS, AngularJS, Sass, Bootstrap을 전문으로합니다. 이 기사는 원래 274 호에 게시되었습니다. 넷 매거진 .

마음에 드 셨나요? 읽어보세요!