[번역]Building a CSS Grid Overlay 정보
[번역]Building a CSS Grid Overlay
본문
https://css-tricks.com/building-css-grid-overlay/
CSS로 그리드 오버레이를 만드는 데 필요한 것들을 살펴 보겠습니다. 그것은 반응 할 수 있고, 쉽게 커스터마이징이 가능하며 CSS 변수 ( "CSS 커스텀 속성"으로 더 정확하게 알려짐)를 많이 사용합니다. 커스텀 프로퍼티에 익숙하지 않다면, CSS 변수와 전 처리기 변수의 차이점을 읽는 것이 좋습니다. 레아 베루 (Lea Verou)가 그들을 사용하는 것에 관해 이야기하는 것을 보았다.
우리가 구축하고 있는 이 그리드 오버레이는 실제 사용자가 아닌 개발자 도구를 사용하는 도구로 간주됩니다. 따라서 브라우저 지원에 대해 너무 걱정하지 마십시오 (사용자가 신경 쓰면 사용자 정의 속성의 데이터를 확인하십시오). 프리 프로세서 변수처럼 사용자 정의 프로퍼티를 네이티브 지원과 똑같이 동작하도록 사전 처리하는 것은 불가능하지만 postCSS 플러그인 cssnext와 같은 툴은 이전 버전의 브라우저와 호환되는 CSS로 변환 할 수 있습니다.
Preface
몇 주 전에 회사의 프로젝트 중 하나에서 미디어 쿼리를 단순화하고 Flexbox Grid와 동일한 원칙에 따라 레이아웃 구성 요소를 추가했습니다. 동료 디자이너 중 일부는 반응성과 유동성을 완전히 이해하지 못했기 때문에이를 시각화 할 수 있도록 토글 가능한 그리드 오버레이를 만들었습니다.
희망은 이것이 우리 팀의 레이아웃 관련 대화를 돕고 너무 많은 맞춤 폭, 패딩 등을 사용하지 않도록하는 도구가 될 수 있다는 것입니다.
Terminology
프런트 엔드 디자이너로 일하는 것은 모든 개발자와 디자이너가 동일한 언어로 (가능한 한 많이) 말하도록하기 때문에 디지털 디자이너가 익숙한 CSS 변수에 대한 용어를 선택했습니다.
열(Columns) : 페이지의 세로 구분.
거터(Gutter) : 기둥 사이의 간격.
간격 띄우기(Offset) : 뷰포트의 양쪽 사이의 간격입니다.
기준선(Baseline) : 텍스트에 사용되는 수직 리듬.
Making the Grid
1) "Box"
요소의 의사 요소를 사용하여 모든 내용 위에 격자를 표시해 봅시다. 우리는 유동적 인 레이아웃으로 오버레이를 사용하기를 원하기 때문에, 요소에`100 % - (2 * offset)`너비와 최대 너비를 지정하여 그리드 오버레이가 레이아웃보다 넓어지지 않도록합니다.
/* Settings */
:root {
--offset: 2rem;
--max_width: 72rem;
--color: hsla(204, 80%, 72%, 0.25);
}
/* Styling */
html {
position: relative;
}
2) Columns
그리드를 보면 반복되는 패턴이 열 + 거터 쌍이라는 것을 알 수 있습니다. 우리는 반복적 인 선형 그라디언트를 배경 이미지로 사용하고 있습니다. 배경 이미지의 크기를 100 % + 거터로 설정하여 반복 패턴을 100 % / 열 너비와 실제 열 (100 % / 열) - 넓은 간격으로 만듭니다.
/* Settings */
:root {
--offset: 2rem;
--max_width: 72rem;
--columns: 6;
--gutter: 1rem;
--color: hsla(204, 80%, 72%, 0.25);
}
/* Helper variables */
:root {
--repeating-width: calc(100% / var(--columns));
--column-width: calc((100% / var(--columns)) - var(--gutter));
--background-width: calc(100% + var(--gutter));
--background-columns: repeating-linear-gradient(
to right,
var(--color),
var(--color) var(--column-width),
transparent var(--column-width),
transparent var(--repeating-width)
);
}
/* Styling */
html {
position: relative;
}
html::before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin-right: auto;
margin-left: auto;
width: calc(100% - (2 * var(--offset)));
max-width: var(--max_width);
min-height: 100vh;
content: '';
background-image: var(--background-columns);
background-size: var(--background-width) 100%;
z-index: 1000;
pointer-events: none;
}
/* Codepen styling */
body {
height: 400vh;
}
부가 메모로, 나는 또한 라인을 더 완벽한 픽셀로 만들기 위해 background-repeat와 함께 정규 선형 그라디언트를 사용해 보았습니다. 레이아웃 폭이 열 수로 나눌 수 없을 때마다 픽셀 반올림이 불완전한 총 너비를 초래했기 때문에 작동하지 않았습니다.
3) Baseline
또한 반복 선형 그라디언트를 사용하여 기준선을 그립니다. 그러나 수평 거터를 추가하지 않았기 때문에 약간 단순 해졌고 블록 대신 블록을 사용하기를 원했습니다.
기준선을 약간 상향 또는 하향으로 이동할 수있는 기준선 이동 변수를 추가합시다. 단순히 배경 위치를 조정하여 기준선 이동을 적용합니다.
/* Settings */
:root {
--offset: 2rem;
--max_width: 72rem;
--columns: 6;
--gutter: 1rem;
--baseline: 3rem;
--baseline-offset: 2rem;
--color: hsla(204, 80%, 72%, 0.25);
}
/* Helper variables */
:root {
--repeating-width: calc(100% / var(--columns));
--column-width: calc((100% / var(--columns)) - var(--gutter));
--background-width: calc(100% + var(--gutter));
--background-columns: repeating-linear-gradient(
to right,
var(--color),
var(--color) var(--column-width),
transparent var(--column-width),
transparent var(--repeating-width)
);
--background-baseline: repeating-linear-gradient(
to bottom,
var(--color),
var(--color) 1px,
transparent 1px,
transparent var(--baseline)
);
}
/* Styling */
html {
position: relative;
}
html::before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin-right: auto;
margin-left: auto;
width: calc(100% - (2 * var(--offset)));
max-width: var(--max_width);
min-height: 100vh;
content: '';
background-image: var(--background-columns), var(--background-baseline);
background-size: var(--background-width) 100%;
background-position: 0 var(--baseline-offset);
z-index: 1000;
pointer-events: none;
}
/* Codepen styling */
body {
height: 400vh;
}
4) Media Queries
이제 기본 설정이 완료되었으므로 몇 가지 미디어 쿼리를 소개하겠습니다. 지금까지 사용한 수학을 되돌아 보면 특정 열 수, 거터 폭 등과 같이 묶여 있지 않은 것을 볼 수 있습니다.
우리는 모바일 첫 번째 접근 방식을 사용하고 미디어 쿼리에서 변수를 변경할 때만 변수를 포함합니다. 오버레이를 사용하는 모든 사용자가 새로운 중단 점을 통과했음을 분명히하기 위해 모든 중단 점에서 색상을 변경합니다.
새 탭에서 펜을 열고 다른 변수 값을 변경하거나 뷰포트의 크기를 조정할 때 펜의 동작 방식을 확인하는 것이 좋습니다.
/* Settings */
:root {
--offset: 1.5rem;
--max_width: 72rem;
--columns: 6;
--gutter: .5rem;
--baseline: 3rem;
--baseline-shift: 2rem;
--color: hsla(204, 80%, 72%, 0.25);
}
@media (min-width: 35em) {
:root {
--offset: 2rem;
--gutter: .75rem;
--color: hsla(286, 51%, 44%, 0.25);
}
}
@media (min-width: 48em) {
:root {
--offset: 3rem;
--columns: 12;
--gutter: 1rem;
--color: hsla(204, 80%, 72%, 0.25);
}
}
@media (min-width: 70em) {
:root {
--offset: 4rem;
--color: hsla(286, 51%, 44%, 0.25);
}
}
/* Helper variables */
:root {
--repeating-width: calc(100% / var(--columns));
--column-width: calc((100% / var(--columns)) - var(--gutter));
--background-width: calc(100% + var(--gutter));
--background-columns: repeating-linear-gradient(
to right,
var(--color),
var(--color) var(--column-width),
transparent var(--column-width),
transparent var(--repeating-width)
);
--background-baseline: repeating-linear-gradient(
to bottom,
var(--color),
var(--color) 1px,
transparent 1px,
transparent var(--baseline)
);
}
html {
position: relative;
}
html::before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin-right: auto;
margin-left: auto;
width: calc(100% - (2 * var(--offset)));
max-width: var(--max_width);
min-height: 100vh;
content: '';
background-image: var(--background-columns), var(--background-baseline);
background-size: var(--background-width) 100%;
background-position: 0 var(--baseline-shift);
z-index: 1000;
pointer-events: none;
}
/* Codepen styling */
body {
height: 400vh;
}
"1 단계에서 특정 브레이크 포인트에서 특정 레이아웃 너비를 원한다면 어떻게됩니까?"라고 메모하면, 이제는 각 미디어 쿼리에 대해 --max_width를 설정하여 해당 논리를 쉽게 도입 할 수 있습니다.
5) Help Text
디자이너는 다양한 기기에 대한 모형을 생각하고 싶어합니다. 웹 사이트가 다른 기기에서 멋지게 보이기 때문에 일반적으로 좋은 점입니다.하지만 때로는 iPad의 레이아웃이 위아래로 작동해야한다는 것을 잊어 버리는 경우가 있습니다. 다음 중단 점.
중단 점은 일반적으로 위의 여러 가지 이유로 "iPhone", "Galaxy Note ?", "iPad"등으로 불리지 않습니다. 중단 점은 새 범위가 시작되는 곳을 나타내며 장치마다 다릅니다.
중단 점을보다 명확하게하기 위해 우리는 격자 오버레이에 이름을 추가 할 수 있습니다.
/* Settings */
:root {
--offset: 1.5rem;
--max_width: 72rem;
--columns: 6;
--gutter: .5rem;
--baseline: 3rem;
--baseline-shift: 2rem;
--color: hsla(204, 80%, 72%, 0.25);
--color-text: hsla(204, 80%, 72%, 1);
--media-query: 'base';
}
@media (min-width: 35em) {
:root {
--offset: 2rem;
--gutter: .75rem;
--color: hsla(286, 51%, 44%, 0.25);
--color-text: hsla(286, 51%, 44%, 1);
--media-query: 'small';
}
}
@media (min-width: 48em) {
:root {
--offset: 3rem;
--columns: 12;
--gutter: 1rem;
--color: hsla(204, 80%, 72%, 0.25);
--color-text: hsla(204, 80%, 72%, 1);
--media-query: 'medium';
}
}
@media (min-width: 70em) {
:root {
--offset: 4rem;
--color: hsla(286, 51%, 44%, 0.25);
--color-text: hsla(286, 51%, 44%, 1);
--media-query: 'large';
}
}
/* Helper variables */
:root {
--repeating-width: calc(100% / var(--columns));
--column-width: calc((100% / var(--columns)) - var(--gutter));
--background-width: calc(100% + var(--gutter));
--background-columns: repeating-linear-gradient(
to right,
var(--color),
var(--color) var(--column-width),
transparent var(--column-width),
transparent var(--repeating-width)
);
--background-baseline: repeating-linear-gradient(
to bottom,
var(--color),
var(--color) 1px,
transparent 1px,
transparent var(--baseline)
);
}
html {
position: relative;
}
html::before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin-right: auto;
margin-left: auto;
width: calc(100% - (2 * var(--offset)));
max-width: var(--max_width);
min-height: 100vh;
content: '';
background-image: var(--background-columns), var(--background-baseline);
background-size: var(--background-width) 100%;
background-position: 0 var(--baseline-shift);
z-index: 1000;
pointer-events: none;
}
html::after {
content: var(--media-query);
position: fixed;
top: 1rem;
left: 1rem;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
color: var(--color-text);
}
/* Codepen styling */
body {
height: 400vh;
}
나는 디자이너가 언젠가 개발자에게 돌아와서 "우리가 iPad에서 어떻게 보이는지 조정할 필요가있다"고 말하면서 "우리는 어떻게 그것이 매체에서 어떻게 보이는지 조정할 필요가있다"고 말하며 꿈을 꿉니다.
Go Further
기둥과 배수구의 줄은 어떨까요? 간단합니다. CSS 만 있습니다. 더 많은 중단 점을 추가하는 것은 어떻습니까? 간단합니다. CSS 만 있습니다. 다른 색상을 원하면 어떻게해야합니까? 쉬운 ... 당신은 그것을 얻는다. ?
보다 자세한 예제는 다음에서 볼 수 있습니다.
/* Settings */
:root {
--offset: 1.5rem;
--max_width: 72rem;
--columns: 6;
--gutter: .5rem;
--baseline: 1rem;
--baseline-shift: calc(var(--baseline) / 2);
--line-thickness: 1px;
--color: hsla(204, 80%, 72%, 0.25);
--color-text: hsla(204, 80%, 72%, 1);
--media-query: 'base';
}
@media (min-width: 35em) {
:root {
--offset: 2rem;
--gutter: .75rem;
--baseline: 1.5rem;
--color: hsla(286, 51%, 44%, 0.25);
--color-text: hsla(286, 51%, 44%, 1);
--media-query: 'small';
}
}
@media (min-width: 48em) {
:root {
--offset: 3rem;
--columns: 12;
--gutter: 1rem;
--baseline: 2rem;
--color: hsla(204, 80%, 72%, 0.25);
--color-text: hsla(204, 80%, 72%, 1);
--media-query: 'medium';
}
}
@media (min-width: 70em) {
:root {
--offset: 4rem;
--baseline: 3rem;
--color: hsla(286, 51%, 44%, 0.25);
--color-text: hsla(286, 51%, 44%, 1);
--media-query: 'large';
}
}
/* Helper variables */
:root {
--repeating-width: calc(100% / var(--columns));
--column-width: calc((100% / var(--columns)) - var(--gutter));
--background-width: calc(100% + var(--gutter));
--background-columns: repeating-linear-gradient(
to right,
var(--color),
var(--color) var(--line-thickness),
transparent var(--line-thickness),
transparent calc(var(--column-width) - var(--line-thickness)),
var(--color) calc(var(--column-width) - var(--line-thickness)),
var(--color) var(--column-width),
transparent var(--column-width),
transparent var(--repeating-width)
);
--background-baseline: repeating-linear-gradient(
to bottom,
var(--color),
var(--color) 1px,
transparent 1px,
transparent var(--baseline)
);
}
html {
position: relative;
}
html::before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin-right: auto;
margin-left: auto;
width: calc(100% - (2 * var(--offset)));
max-width: var(--max_width);
min-height: 100vh;
content: '';
background-image: var(--background-columns), var(--background-baseline);
background-size: var(--background-width) 100%;
background-position: 0 var(--baseline-shift);
z-index: 1000;
pointer-events: none;
}
html::after {
content: var(--media-query);
position: fixed;
top: 1rem;
left: 1rem;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
color: var(--color-text);
}
/* Codepen styling */
body {
height: 400vh;
}
나는이 접근법을 사용하는 Chrome 확장을 포함하는 GitHub 저장소 또는 여기에 귀하의 의견을 보내고 싶습니다.
https://github.com/larsenwork/CSS-Responsive-Grid-Overlay
0
댓글 0개