문서로 코드 : CSS 그리드를 사용한 새로운 전략

빠르게 성장하는 웹 디자인 회사 인 SuperCool은 예술 고객을위한 맞춤형 웹 사이트를 만들고 상용 공예 CMS 시스템을 사용합니다. 고 스펙크 그래픽 디자인뿐만 아니라 비교적 까다로운 타이포그래피 및 아트 지침을 특징으로합니다. 우리는 지난 몇 개월 동안 CSS 그리드로 전환했습니다. 우리는 단순히 오래된 습관을 새로운 구문으로 포팅하는 대신 새로운 패러다임과 디자인 방법을 발견 할 수 있도록 천천히 전환하고 있습니다.

지금까지 우리는 레이아웃을 추적하는 데 매우 유용한 전략을 개발했습니다. 나는 명명 된 지역과 템플릿을 사용하여 매우 영리한 믹스 인을 작성했으며, 우리는 읽을 수있는 코드를 만들기위한 몇 가지 기본 규칙을 발견했습니다. 그리드를 사용하여 단일 주요 구성 요소의 완전한 생산 구현으로 단계적으로 단계별로 들어가고, 제기하는 디자인 문제 중 일부를 파고, 우리가 겪는 함정을 피하도록 안내하는 것이 매우 가치가 있다고 생각합니다. CSS 그리드는 가능한 많은 방법과 많은 올바른 방법을 가진 큰 사양이지만 어느 시점에서 방법을 결정하고 온라인으로 가져와야합니다.

CSS, SASS, BEM에 대한 지식이 있고 완전히 구현 된 액세스 가능, 맞춤형 프레임 워크 (50 개가 넘는 구성 요소 포함) 작업을 스케치 또는 포토샵 유형 문서 (예 : 일주일) 내에있는 프로토 타이핑에 관심을 갖기를 기대합니다.

먼저 설계에서 다양한 코딩 작업을 식별하고 분리하고이를 처리하는 방법을 계획하겠습니다.

1. 글꼴 : 디자이너는 글꼴 시스템을 정의했습니다.
2. 색상 : 먼저 테마 모델을 빌드 한 다음 섹션에 포함시킵니다.
3. 내용 : 이 블록에 어떤 요소가 포함되어 있습니까? 변형은 무엇입니까? 이것은 우리의 BEM Mixin이 시작되는 곳입니다.
4. 레이아웃 : 이것은이 블록에 컨텐츠가 배치되는 방식입니다. 이 단계로 직접 건너 뛸 수 있습니다.
5. 계약 : 이것은 우리가 위의 모든 것을 작성하기로 선택한 방법입니다. CSS에는 많은 정답이 있으므로 우리 모두는 하나의 협약, 규칙에 동의하는 것이 중요합니다. 이것은 실제로 먼저 순위를 매기는 것이지만,이 기사를 위해서는 끝에 요약 할 것입니다.

글꼴 시스템

우리는 유틸리티 클래스 (예 : h-text-h1, h-text-badge)를 사용하여 글꼴 스타일을 설정합니다. 프로젝트에는 백 글꼴 스타일이있을 수 있습니다. 우리는 TypEx를 사용하여 이러한 스타일을 스케치에서 패턴 랩으로 직접 내보내는 것입니다. 이것이 다른 게시물 자체이므로 글꼴이 처리되었다고 가정 해 봅시다. 우리는 구성 요소에 글꼴을 소개하지 않을 것입니다.

색상 사용

테마는 단지 작은 믹스 인을 추가하고 있으므로 이상적으로는 섹션에서 많은 색상 규칙을 보지 못합니다. 우리는 그것들을 모두 "mixin and model"라이브러리의 _themer.scss 섹션에 보관하여 웹 사이트의 설계 시스템을 따를 수 있도록 할 수 있습니다. 이렇게하면 누군가가 나중에 빌드로 돌아 오면 설계 및 브랜드 규칙을 설명하기위한 주요 참조 섹션이 있습니다. 거의 같은 시장에서 많은 웹 사이트를 구축하고 유지할 때 - 각각 다른 브랜드 사양이 있습니다. 한 브랜드와 혼동되지 않도록해야합니다! 따라서 글꼴과 마찬가지로 부품의 색상 규칙을 추상화합니다. 본질적으로, _header.scss 파일에서 우리는 실제로 레이아웃에만 초점을 맞추고 있습니다 (가능한 한 많이).

우리가 항상 주제별 믹스를 사용한다는 데 동의한다는 점을 감안할 때, 이것은 요소에 포함시키는 방법입니다.

 <code>@include var($property, $value);</code>

그런 다음이 특정 웹 사이트에서 색상이 어떻게 작동하는지 보여주는 테마 모델을 설정하고 구성 요소에 적용합니다.

 <code>@include theme;</code>

이 페이지 제목과 함께 사용할 샘플 테마 모델은 다음과 같습니다. 매우 간단합니다.

우리는 색상을 검은 색 또는 흰색과 짝을 이룹니다. 우리는 대비 규칙에 의존하고 아마도 이벤트 (예 : 호버링) 또는 강조된 행동에 대한 강조를 강조하기 위해 그들을 뒤집습니다. 이것이 우리가 이것을 달성하기 위해해야 ​​할 전부이며, 이제 우리는이 웹 사이트에서 실제로 색상이 어떻게 작동하는지에 대한 문서를 가지고 있습니다. UI를 디버그하거나 확장 해야하는 경우 액세스하고 확인할 수 있습니다.

우리는 또한 우리를 돕기 위해 상속 재산을 준비하고 싶으므로 유용한 규칙을 식별합시다.

• 파이프 라인의 SVG 아이콘을 CurrentColor로 설정하십시오 (그런데 CSS의 기본 크기는 width: 1em; height: 1em; font-size: inherit; )입니다.
• 베이스에 설치하십시오<a></a> CurrentColor의 경우.
• 약어, 상속 테두리 (예 : 1px solid 또는 1px solid currentColor )를 작성하십시오.

이 주제 모델을 사용하면 여러 주제를 생성하거나 유틸리티 클래스로 저장하거나 구성 요소 내의 수정 자 목록을 통해 루프하거나 사용자가 CMS의 블록에서 변수를 직접 설정할 수 있습니다. IE 11이 통계의 1% 미만을 차지하면 변수로 더 많은 일을 할 수 있지만 현재 사용하기에 충분합니다.

주제에서 벗어나지 말자. 그리드는 어떻습니까? !

컨텐츠 구성 요소

그리드를 사용하면 각 섹션에 있는 것을 새로운 방식으로 정확하게 설명 할 수 있습니다. 이것은 실제로 각 프로젝트마다 새로운 UI를 구축하는 디자인 대행사의 게임 체인저이며, 우리가 탐색 할 때, 우리는 새로운 (그리고 흥미로운) 응용 프로그램을 발견하고 있습니다.

컨텍스트를 제공하기 위해 : Craft CMS를 사용하여 고객을 위해 각 인터페이스를 사용자 정의하고 특정 요구 사항과 콘텐츠 모델을 충족시키기 위해 사용자 정의 필드를 만듭니다. 발권 API에서 이벤트를 추출하고 항목을 생성 할 수있는 내부 도구가있어 CMS에서 편집하고 확장 할 수 있습니다 (또는 완전히 생성). 고객은 영구 페이지 영역에서 명명 된 필드를 작성하거나 편집 할 수 있으며, 설계된 브랜드 블록 전체를 각 페이지의 레이아웃에 추가 할 수 있습니다.

많은 UI가 있습니다. 고객은 콘텐츠를 많이 제어 할 수 있으며 HTML을 많이 제어 할 수 있으므로 페이지에 고품질 액세스 할 수있는 시맨틱 코드가 있는지 확인할 수 있습니다. 우리는 발견 과정에서 컨텐츠 모델을 공동으로 개발 한 다음 컨텐츠를 자유롭게 만들 수 있도록합니다. 그들은 그들이 원하는 것을 추가하고 우리는 그것이 작동하고 항상 옳게 보이도록합니다. 옳은 것보다 낫다! 슈퍼 . (죄송합니다! : P)

따라서 개발자로서 경쟁 우선 순위를 평가해야합니다.

• 접근성, 가용성
• 브랜딩 및 그래픽 디자인
• 성능
• 유지 보수 및 코드베이스 건강

그들을 하나씩 보자.

접근성

접근 가능하고 논리적 인 HTML이 제가 가장 좋아하는 것입니다. 최소한 내 프로젝트는 Lighthouse 점수에서 녹색 접근성 점수를 얻어야합니다. (농담입니다. 맛있는 100을 원합니다!) 코어 경로와 페이지는 일부 화면 리더 (키보드 탭, 키보드 탐색), 낮은 비전 시뮬레이터, Dasher, 음성 액세스 및 이진 스위치를 사용하여 테스트됩니다. (나는 또한 로봇과 케이크를 위해 일하기 때문에 개발 작업의 큰 부분입니다.) 클릭 가능한 전화 번호와 이메일 주소를 반복해서 추가했습니다. 나는 단지 사람들이 가고 싶은 곳으로 가기를 원합니다.

그리드 (및 Flexbox)로 콘텐츠를 어떻게 재정렬 할 수 있는지 걱정했습니다. 이제 여러 빌드를 수행 했으므로 실제로 그리드 가이 문제를 해결하는 데 도움이 될 수 있다고 생각합니다. CSS 그리드를 사용하면 레이아웃을 위해 HTML을 이동할 이유가 없습니다. 우리는 전체 문서를 우리의 주요 관심사로 논리로 취급하는 선형 시퀀스로 돌아갈 수 있습니다.

브랜드 및 성능 및 유지 보수

미술 공연장은 인쇄물과 웹에서 통일 된 고 대표적인 그래픽 디자인이 필요하며, 계약 마케팅 의무를 포함하여 청중에게 배포하려면 끊임없이 변화하는 자료 (예 : 프로그램, 매뉴얼, 티켓, 포스터, 미세한 사람 등)가 필요합니다. 당신이 상상할 수 있듯이, 우리는 우선 순위 처리가 필요한 많은 고품질의 큰 이미지를 가지고 있으며 종종 강력한 인쇄 주도 브랜드가 제공됩니다. 즉, 복잡한 CS뿐만 아니라 약 15 개의 사용자 정의 글꼴 (두께 변동, 디스플레이 글꼴 등)을 제공해야 할 수도 있습니다. 우리는 가능한 한 간소화되어야합니다. 우리는 현재 약 20kb 나노 Gzipped CSS를 보내고 있지만 더 많이 줄이기 위해 노력하고 있습니다.

그러나 PostCSS 작업에서 식별자 감소를 False로 설정하여 그리드 영역 이름의 전체 길이를 유지합니다. DevTools에 사용 가능한 레이아웃 다이어그램을 사용하는 것은 소량의 바이트를 저장하는 것보다 더 유용합니다. Sowerby Bridge의 지연된 열차에서 Repo Access 없이이 웹 사이트를 유지하고 자체 문서화 및 미래의 자체 배출을 유지하기 위해 :지도를 유지하십시오.

코드 건강

이러한 모든 경쟁 요구의 균형을 맞추는 방법은 테스트에서 컨텐츠를 덜 고정해야하고 해결 된 문제가 해결되도록 조정 하고 동의하는 것입니다. 우리는 우리가 구축하는 모든 구성 요소를 확인하고 항상 제목으로 시작하고 링크가 위치를 가리키고, 버튼 트리거 작업, 컨트리 마크 타이틀로 전달 된 셀 수있는 개체, 랜드 마크 타이틀, 내비게이션은 다음과 같습니다.<nav></nav> , 시간입니다<time></time> , div soup은 아침 식사입니다 - 기본 사항.

CSS 그리드를 사용하면 레이아웃을 위해 HTML을 이동할 이유가 없습니다. CSS에서 레이아웃 변경이 발생하는 동안 콘텐츠는 항상 논리적으로 흐를 수 있습니다. 그리고 간격을 만들기 위해 여백이나 패딩이 필요하지 않으므로 간단히 선언 할 수 있습니다.

 <code>.o-grid .o-grid { width:100%; }</code>

… 중첩 그룹의 여러 개가 같은 페이지 그리드를 시각적으로 차지하도록합니다. HTML은 문서에 더 가까운 것을보다 명확하게 안내 할 수 있습니다.

제목과 액션 사이에 관리해야 할 것이 많으며 저의 도전은 이러한 모든 구성 요소에서 이러한 모든 필드를 추적하는 동시에 디자인 사양을 충실히 실행하여 통과 가능하고 스캔 가능하며 선형화 가능하며 논리적이고 이해할 수있는 방법으로 읽을 수 있도록하는 것입니다.

놀랍게도 유용한 그리드 믹스를 소개하겠습니다.

 <code>@mixin template($elements...) { @each $element in $elements { &__#{$element} { grid-area: $element; } } }</code>

이 믹스를 어디서나 사용하는 것은 다음을 의미합니다.

1. 각 구성 요소 섹션은 이제 가능한 모든 요소의 목록으로 시작합니다.이 요소는 특히 프론트 엔드 구성 요소를 트위깅 할 때 매우 편리한 문서입니다.
2. Mixin은 그리드 영역을 할당하는 책임이 있습니다.
3. 요소 및 구성 요소 이름은 스케치, CSS 및 HTML에서 일관성을 유지하며 레이아웃이 실패하기 때문에 불일치가 매우 분명합니다. 나는 확고하지만 공정합니다.
4. BEM 이름 지정은 자동으로 시행되지만 섹션에서는 엉망이되지 않습니다.

이제이 섹션에서는 일반 영어 단어를 사용하여 그리드-테일 플레이트 영역 만 선언하여 데이터베이스 필드와 일치하는 일련의 레이아웃 맵을 제공합니다. 읽기 쉽습니다!

다음은이 믹스를 사용하는 방법의 예입니다.

우리는이 사이트에서 AutopRefixer가 나열된 지원 속성을 고수하는 경우 IE 11의 그리드를 어떻게 처리하는지 설명하는 훌륭한 기사를 읽었 기 때문에 내부 그리드에 대한 이름의 영역을 고수하기로 결정했습니다. 브라우저 테스트에 AutoPrefixer가 적용된 Super 유용한 디버그 모드를 사용 하여이 테스트 케이스를 보면 작동하는 것을 볼 수 있습니다.

그러나 함정이 있습니다! IE 11에서 항상 그리드 유닛으로 작동하는지 확인하기 위해 인라인 요소를 블록으로 설정 해야합니다. 예제에서 마커 라인을 언급하여 다른 일이 발생할 수있는 일을 확인하십시오.

아야! 그 조각에주의하십시오. IE 11의 일부 버전은이 수정 사항을 선택하지 않아도됩니다.이 경우 정상을 사용하려고 시도 할 수 있습니다.<div> 태그… 한숨.<p> 예를 들어 실제 그리드가 내부 컨테이너에 설정되어 있기 때문에이 Mixin의 <code>display: grid 포함하지 않았지만 Grid-Areas가 올바른 BEM 클래스와 일치하기를 원합니다.

그래서:

 <code>.c-header{ @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search); }</code>

이런 것들을 배치합시다.

공들여 나열한 것

이 구성 요소가 페이지 레이아웃으로 쉽게 미끄러질 수 있도록 몇 가지 추가 규칙을 식별해 봅시다. 글을 쓰는 시점에는 이용할 수있는 하위 그리드가 없지만이 구성 요소는 상위 그리드를 알지 못합니다. 각 구성 요소가 평평하고 분리되어 상속을 제한하기 때문에 BEM 구성 요소 접근 방식과 잘 일치합니다. 나는 여기에서 BEM을 옹호하지 않습니다 (또는 우리가 분명히 사용하는 Bem -Ish ) - 나는 당신이 이미 그것을 사용하고 있다면 그것은 추가 보너스라고 말하고 있습니다.

이 예에서 디자이너는 12 개의 그리드 열과 20px (1.25REM) 간격이있는 페이지 레이아웃을 설정하며 전체 사이트 내에 오프셋 부품이 없습니다. 우리의 구성 요소는 12 개의 그리드 열을 모두 차지하는 페이지 영역입니다. 이 전환 기간 동안, 우리는 여전히 통합 해야하는이 아이디어를 기반으로하는 많은 시스템이 있기 때문에 여전히 이러한 유형의 설정 그리드를 사용하고 있습니다. 따라서 이것은이 조건에 따른 규칙입니다. 전체 폭 영역의 경우 그리드 갭을 삭제 하고 그리드 템플릿을 12의 분수 단위 (FR)에 씁니다 .

그렇게하는 것은 다음을 의미합니다.

1. 이 내부 그리드의 시야는 대략적으로 존재하는 그리드를 따릅니다.
2. 코드에서 기본 설계 규칙을 쉽게 볼 수 있습니다. 그리고
3. 필요한 경우 정확하게 물건을 정렬하는 것은 쉽습니다.

정렬에 대한 빠른 메모

잠깐만 ... "정확한 정렬"이란 무엇을 의미합니까? 이미 정확하게 정렬되지 않습니까?

글쎄요. 분수 단위 방법은 공간을 완벽하게 나누기 때문에 간격으로 끝납니다. 두 개의 짝수 열로 인해 간격의 중간에 있습니다. 하나의 열이 2/3이고 다른 1/3은 그 간격의 1/3 등으로 나뉩니다.

페이지 그리드 간격의 너비를 알고 있기 때문에 정렬 고정은 어렵지 않습니다. 예를 들어, 균일 한 세분화시 그리드 갭을 포함 할 수 있습니다.

그러나 다른 세분화로는 이것을 할 수 없습니다. 우리가 할 수있는 것은 그 간격을 마진으로 추가하는 것입니다. 설정 한 상자 크기가 무엇이든 마진은 내부적으로 추가됩니다. 이 예에는 간격을 세 부분으로 나누는 3 개의 열 (2 개의 명명 영역과 1 개의 빈 공간)이 있습니다.

이것이 이러한 마진을 계산하는 방법입니다. FR 유닛의 합이 12인지 확인하십시오. 그리드 간격을 부모 그리드의 열 수로 나누고 다음과 같이 곱하십시오.

n의 오른쪽 마진 승수는 n의 오른쪽에있는 FR 유닛의 합과 같다. n의 왼쪽 마진은 n의 왼쪽에있는 FR 유닛의 합과 같다.

따라서 grid-template-columns 의 경우 값은 2fr 3fr 2fr 4fr 1fr 입니다.

<code> 2 3 2 4 1 0/10 2/7 5/5 7/1 11/0</code>

calc() 자주 쓰는 것을 발견하면 믹스 인으로 쓸 수도 있습니다. 예를 들어, 내부 그리드를 부모 그리드와 정렬하는 방법은 다음과 같습니다.

... 이름이 내부적으로 지정 될 때 마진을 자동으로 계산하는 방법은 다음과 같습니다. 숫자는 그리드 외부에 지정됩니다.

이름이 지정된 행으로 전환하거나 추가 고정형 열을 추가하거나 행당 12 개의 명명 영역을 가진 모든 맵을 작성하는 것과 같은 다른 솔루션을 생각할 수 있다고 생각합니다. 이를 다루는 방법에는 여러 가지가 있지만 많은 방법이 지명 된 지역의 장점을 제거한다고 생각합니다. 이 지역은 우리의 미래 자체가 알아야 할 내용이 포함 된 읽기 가능한 레이아웃 다이어그램을 제공합니다. 문서로 코드입니다.

분명히, 내가 우리를 해결하게하는 디자인 문제는 정렬 문제가 아닙니다. 그리드를 사용하면 정렬이 쉽습니다. 문제는 직접적이고 사소한 레이아웃 문제를 해결하는 것이 아니라 우리의 목표를 지원하는 방식, 즉 6 개월 안에 이해할 수있는 방식으로 해결하는 것입니다.

1. 구성 요소에 어떤 요소가 포함되어 있는지.
2. 그들이 어떻게 배치되는지.
3. 코드가 이런 식으로 작성된 이유는 무엇입니까?

그리드 사양은 엄청나고 옵션에서 쉽게 손실 될 수 있습니다. 아마도 더 나은 계획은 절대 정렬이 필요할 때 (즉, 페이지 그리드에 명시 적으로 연결되는 경우) 12 열 그리드로 재설정하고 숫자 사양을 사용하는 것입니다. 그러나 더 똑똑하고 간단한 솔루션이 있다고 생각합니다. 이 웹 사이트에서는 페이지 그리드 개체를 작성하고 클래스를 사용하여 중첩 된 내부 그리드 셀을 추가했습니다. .o-page-grid\_\_sidebar .

어떻게 생각하나요? 나는 이것에 대한 다른 견해를 확실히 예측한다. ? ‍♀️

진짜 그리드!

이를 사용하여 공통 페이지 제목을 만들 수 있습니다.

또는 홈페이지의 변형을 만들 수 있습니다.

그렇다면 컨테이너를 뛰어 넘는 영웅 타이틀은 어떻습니까? 틀림없이! 또는 컨테이너 외부에 제공 할 수 있습니다.

다음은 무엇입니까? 전체 폭 정보 표시 줄 (페이스트)과 상위 그리드의 사이드 바와 일치하는 내부 버튼이있는 테마 이벤트 제목? 좋아요. 쉽게 볼 수 있도록 부모 그리드를 포함시킬 것입니다.

그렇다면 중앙 정렬이있는 검색은 어떻습니까? 접이식 열 기술을 사용해 봅시다.

다음은 이러한 모든 변형을 단일 섹션으로 시연합니다. 예, 그것은지도입니다! 포장입니다!

동의하다

와우, 우리는 많이 커버! 그러나 이와 같은 시스템이 얼마나 유연하고 자체 문서화되어 있는지 알 수 있습니까?

1. 글꼴은 별도의 글꼴 시스템으로 처리됩니다.
2. 색상은 단순히 요소를 일시적으로 음영성이 아닌 디자인의 기본 색상 규칙을 설명하는 테마 섹션으로 처리됩니다.
3. 요소는 영어로 자신이있는 것을 불리며 섹션 상단의 템플릿 믹스에 포함됩니다. 이 목록은 나뭇 가지 또는 템플릿에서 참조로 포함될 수 있습니다.
4. 항상 올바른 HTML을 사용하고 중첩은 그리드를 깨지 않습니다. 즉, 컨벤션을 설정하여 동일한 레이아웃 공간에 중첩 그리드를 적용 할 수 있습니다.
5. 정확한 정렬은 이름 사양이 아닌 숫자 사양에서 수행됩니다 (그러나 정렬을 위해 이름 사양을 사용할 수 있음).
6. IE 11을 지원합니다.

또한 이름이 지정된 영역을 사용하여 구축 된 빠른 설명과 구성 요소의 예제도 있습니다. 이 예에서 카드는 영역이 아니라 그리드에 배치 된 구성 요소이므로 12의 FR 컨벤션을 사용할 이유가 없습니다. 예상 할 수있는 미디어 객체 섹션은 다음과 같습니다.

 <code>.c-card { &--news { align-content: start; grid-template-areas: "image" "datetime" "title"; } &--search { justify-content: start; grid-template-columns: 1fr 3fr; grid-template-areas: "image page" "image title" "image summary"; } &--merchandise { grid-gap: 0; grid-template-columns: $b 1fr 1fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". price action ."; } &--donations { // donations thanks button is too long and must take up more space than input grid-gap: 0; grid-template-columns: $b 1fr 2fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". input action ."; } } // ...</code>

위 내용은 문서로 코드 : CSS 그리드를 사용한 새로운 전략의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!