從零開始的CSS柵格遮罩工具創(chuàng)建之旅

時間：2023-09-06 06:18:01 | 來源：網站運營

時間：2023-09-06 06:18:01 來源：網站運營

從零開始的CSS柵格遮罩工具創(chuàng)建之旅：

原文地址：Building a CSS Grid Overlay | CSS-Tricks 作者： ANDREAS LARSEN

讓我們來看看如何創(chuàng)建一套CSS的柵格遮罩工具，它將會是響應式的，很容易可定制化的并且極度依賴「CSS變量」（更準確意味上的“CSS自定義屬性”）。如果你沒那么熟悉自定義屬性的話，我強烈推薦你去讀一下What is the difference between CSS variables and preprocessor variables? | CSS-Tricks，再看一下Lea Verou's enlighting talk的視頻


我們的這套柵格遮罩工具就是一個開發(fā)者工具，當然只是為了我們自己，而不是為了用戶。所以，不用太擔心瀏覽器支持（如果你真的很在乎，對照著Can I use... Support tables for HTML5, CSS3, etc檢查一下）。想讓預處理的自定義屬性表現的如同原生支持的屬性顯然是不可能的，如果你想要使用它們像使用預處理變量一樣，可以用一下postCSS的插件cssnext[Use tomorrow’s CSS syntax, today.],它能夠幫你很好地做老瀏覽器的轉換兼容。

前言

幾周以前，我簡化了一下我們項目中的媒體查詢然后加入了一個基于 Flexbox Grid（Flexbox Grid）同樣使用方法的布局組件，我下屬的一些設計師不能夠完全理解它的響應式設計和伸縮性，所以我創(chuàng)造了一個可切換的柵格遮罩工具幫助他們理解


我的愿望是這些可以成為一個協助我們團隊在布局相關的討論上的工具，確保我們不會在代碼中使用太多的特定的width，padding等屬性

術語

作為一個前端工程師，我希望工程師和設計師能使用同一套術語（越多越好），所以我自建了一套連設計師都很熟悉的CSS變量術語

• Columns列：頁面上每一塊垂直分割
  
• Gutter間隔：兩列the columns之間的空間
  
• Offset邊距：視圖邊距的空間
• Baseline基線：用于內容文字的垂直基準線

構建柵格遮罩

1、盒子模型

我們使用放置在元素之上的偽元素來展示覆蓋在我們實際內容上面的柵格。我們想要讓遮罩能夠伸縮，所以我們定義這個元素的寬度為“100% - (2 * offset)”并且要給定最大寬度否則柵格遮罩的寬度會超出顯示范圍



查看codePen的例子：1) Box — GRID OVERLAY


/* Settings */:root { --offset: 2rem; --max_width: 72rem; --color: hsla(204, 80%, 72%, 0.25);}/* 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-color: var(--color); z-index: 1000;}/* Codepen styling */body { height: 400vh;}2、列

觀察這個柵格就會注意到 列+間距 是重復填充顯示的，我們可以使用 repeating-linear-gradient 作為背景background-image，設置background-image的尺寸到100%+邊距，從而使得重復的填充達到 100%/列數 的寬度，實際的列寬為 (100% / 列數) - 邊距

查看例子：2) Columns — GRID OVERLAY

/* 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;}/* Codepen styling */body { height: 400vh;}3、基線

我們用repeating linear gradients畫了基線但是這樣當我們要添加縱向的邊距就顯得稍稍簡陋了點，而且我們要的是一條線而不是一個塊級的區(qū)域。

我們還加入了一個基線控制的變量baseline-shift，允許我們控制基線上下移動，僅僅通過調整background-position就可以實現這一功能


查看例子：3) Baseline — GRID OVERLAY

/* 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;}/* Codepen styling */body { height: 400vh;}4、媒體查詢

現在我們有了基本結構，可以說一下媒體查詢的部分了?；剡^頭來看我們所用到的數值，你會發(fā)現這些值沒有一個綁定到特定的列、邊距等等上面。

我們使用移動端作為入口，當我們想要改變媒體查詢的時候我們只引入了變量在其中。設置一個新的一個分辨率斷點的時候，在斷點處都可以改變設定顏色值，使得每個遮罩都會對比明確看起來無比清晰。

我建議在新打開一個tab頁，打開codepen的例子，改變不同的變量值或者改變視圖尺寸，去觀察這些功能都是如何表現的。

查看例子：4) Media Queries — GRID OVERLAY

/* 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;}/* Codepen styling */body { height: 400vh;}如果你在看第一步的時候，腦中產生了一大堆疑問如“如果在一個特殊的顯示寬度、一個特殊的分辨率斷點會發(fā)生什么事呢”那現在你就可以通過為每一個媒體查詢設置--max_width來得到很明確的解答。


5、幫助內容

設計師喜歡去思考適配不同的設備——很明顯能讓頁面在不同的設備上都觀感良好是一件很棒的事——但是有時候我們又會忘記ipad應該放在哪種屏幕寬度的分辨率斷點上。


這種分辨率斷點不僅是被稱作"iPhone", "Galaxy Note ", "iPad"等等的那些，有些時候是包括了全部的屏幕寬度。一個分辨率斷點表示的是一個寬度范圍而不是某種特殊設備的屏幕。


為了更好的區(qū)分我們自己設計的“分辨率斷點”，我們把這些斷點名稱加入了我們自己的柵格遮罩中。


查看例子：5) Help Text — GRID OVERLAY

/* 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-query: 'base';}@media (min-width: 35em) { :root { --offset: 2rem; --gutter: .75rem; --color: hsla(286, 51%, 44%, 0.25); --media-query: 'small'; }}@media (min-width: 48em) { :root { --offset: 3rem; --columns: 12; --gutter: 1rem; --color: hsla(204, 80%, 72%, 0.25); --media-query: 'medium'; }}@media (min-width: 70em) { :root { --offset: 4rem; --color: hsla(286, 51%, 44%, 0.25); --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;}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);}/* Codepen styling */body { height: 400vh;}我有一個夢想~那就是有一天設計師不再跑過來對著工程師大喊：“我們需要適配ipad的屏幕！”而是說“我們需要調整到「中等medium」寬度”。


6、其他

能不能做出適應列和邊距的線條？簡單，那只是CSS就能做到。更多的分辨率斷點？簡單，那只是CSS。你想要更多顏色？簡單……你已經得到了。?

更多例子：6) Advanced — GRID OVERLAY

/* 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); --media-query: 'base';}@media (min-width: 35em) { :root { --offset: 2rem; --gutter: .75rem; --baseline: 1.5rem; --color: hsla(286, 51%, 44%, 0.25); --media-query: 'small'; }}@media (min-width: 48em) { :root { --offset: 3rem; --columns: 12; --gutter: 1rem; --baseline: 2rem; --color: hsla(204, 80%, 72%, 0.25); --media-query: 'medium'; }}@media (min-width: 70em) { :root { --offset: 4rem; --baseline: 3rem; --color: hsla(286, 51%, 44%, 0.25); --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;}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);}/* Codepen styling */body { height: 400vh;}你可以在Github看到這個項目，也可以在chrome商店使用這個插件。

github地址：larsenwork/CSS-Responsive-Grid-Overlay