開源css庫_CSS Gridish簡介：一種開源工具，可幫助您的團隊立即适應CSS Grid

開源css庫

Today, I’m excited to introduce a new open-source tool from IBM called CSS Gridish!

今天，我很高興介紹IBM推出的名為CSS Gridish的新開源工具！

CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use:

CSS Gridish采用了産品網格的設計規範，并建立了供團隊使用的多種資源：

• A sketch file with artboards and grid/layout settings for designers

  帶有畫闆和設計者的網格/布局設定的草圖檔案

• CSS/SCSS code using CSS Grid with a CSS Flexbox fallback for developers

  使用CSS GridCSS / SCSS代碼和CSS Flexbox後備版本

• A Google Chrome extension for anyone to check a webpage’s alignment

  一個Google Chrome擴充程式 ，任何人都可以檢查網頁的對齊方式

The goal is to help teams adapt CSS Grid sooner, and to enable more complex layouts. To show how versatile the tool is, here are some example grids from Bootstrap, Carbon Design System, and Material Design.

目的是幫助團隊更快地适應CSS Grid，并實作更複雜的布局。 為了展示該工具的通用性，下面是一些來自Bootstrap ， Carbon Design System和Material Design的示例網格。

IBM開發人員為何這麼做 (Why IBM’s Developers Made This)

The new CSS Grid spec is wonderful for web design. Now, designers can place as much care into the y-axis as they have the x-axis in the past. Projects left and right are starting to document their transition to CSS Grid.

新CSS Grid規範非常适合網頁設計。 現在，設計人員可以像以往那樣将更多的精力放在y軸上。 項目左和右開始記錄他們CSS網格過渡。

A lot of IBM teams are eager to use CSS Grid, but face a couple of blockers to overcome. CSS Gridish helps by addressing these blockers.

許多IBM團隊都渴望使用CSS Grid，但是要克服一些障礙。 CSS Gridish通過解決這些阻止程式而有所幫助。

浏覽器相容性 (Browser Compatibility)

CSS Grid currently has great browser support (~75%). Yet, a lot of products still need to serve the remaining browsers. For example, ibm.com still receives 10% of its traffic from Internet Explorer. It takes a lot of extra work to support those older browsers.

CSS Grid目前具有強大的浏覽器支援(〜75％)。 但是，許多産品仍需要為其餘的浏覽器提供服務。 例如，ibm.com仍從Internet Explorer接收其流量的10％。 要支援那些舊的浏覽器，需要付出很多額外的工作。

While CSS Gridish always builds

yourGrid.css

that uses CSS Grid, it also builds a file we call

yourGrid-legacy.css

. This legacy file still only serves CSS Grid code if a browser supports it. If the browser does not support CSS Grid, the user gets served a flexbox fallback. Add the extra classes for

yourGrid-legacy.css

and you have added backwards compatibility!

盡管CSS Gridish始終會建構使用CSS Grid的

yourGrid.css

，但它還會建構一個名為

yourGrid-legacy.css

的檔案。 如果浏覽器支援，此舊檔案仍僅提供CSS網格代碼。 如果浏覽器不支援CSS Grid，則會為使用者提供Flexbox後備廣告。 為

yourGrid-legacy.css

添加額外的類，并添加了向後相容性！

What do you do if you do not need to support older browsers anymore? All it takes is a switch to

yourGrid.css

to shave precious kilobytes off the experience.

如果您不再需要支援較舊的浏覽器，該怎麼辦？ 所

yourGrid.css

就是切換到

yourGrid.css

以節省寶貴的千位元組經驗。

橋接設計和代碼 (Bridging Design and Code)

Great tools have emerged that create a single source of truth for design and code like React Sketchapp and Lona. These tools ensure that designers and developers are making with the same components.

諸如React Sketchapp和Lona這樣的偉大工具已經出現，它們為設計和代碼建立了一個真實的來源。 這些工具可確定設計人員和開發人員使用相同的元件進行制作。

We hope to bring that same team unity to the grid. The artboards for Sketch and code for web development generate from the same config file. While the grid config file is not flawless, we want CSS Gridish to spark a conversation about grid standards in similar tools.

我們希望将同一支團隊團結在一起。 Sketch的畫闆和Web開發的代碼是從同一配置檔案生成的。 盡管網格配置檔案并非完美無缺，但我們希望CSS Gridish在類似工具中引發有關網格标準的讨論。

Additionally, it is easy for design details to get lost in the transition to development. So that’s why we have built a Google Chrome extension to review your coded work. The Chrome extension can be set to your team’s grid config file to view the same grid and layout from the Sketch file with the same shortcuts(CTRL+G and CTRL+L). Developers enjoy using the extension with the Sketch file they are implementing open. Designers love reviewing coded webpages with it.

此外，在過渡到開發過程中，設計細節很容易丢失。 這就是為什麼我們建構了Google Chrome擴充程式來審查您的編碼工作的原因。 可以将Chrome擴充程式設定為團隊的網格配置檔案，以使用相同的快捷鍵(CTRL + G和CTRL + L)從Sketch檔案中檢視相同的網格和布局。 開發人員喜歡将擴充與正在實作的Sketch檔案一起使用。 設計師喜歡用它來檢視編碼的網頁。

尊重整個頁面 (Respecting the Entire Page)

Using CSS Grid, a developer can follow the grid design when starting at the first layer of HTML. But things get more difficult when the developer has to work inside of different sections and other nodes. This is because

display: subgrid

is still gaining browser support.

使用CSS Grid，開發人員可以從HTML的第一層開始遵循網格設計。 但是，當開發人員必須在不同部分和其他節點内工作時，事情會變得更加困難。 這是因為

display: subgrid

仍在獲得浏覽器支援。

CSS Gridish works around this by relying on viewport width units instead of relative percentage units. You can embed as many

.yourGrid-grid

elements inside each other, but still respect the columns and rows of the page. The only downside we have found to this is that browsers treat the

vw

unit differently with scrollbars. This can be circumvented with margin on your grid.

CSS Gridish通過依靠視口寬度機關而不是相對百分比機關來解決此問題。 您可以在彼此之間嵌入盡可能多的

.yourGrid-grid

元素，但仍要尊重頁面的列和行。 我們發現的唯一缺點是浏覽器使用滾動條對

vw

單元的處理方式有所不同。 可以通過網格上的保證金來規避。

這個怎麼運作 (How It Works)

The only input CSS Gridish needs is one json file called

css-gridish.json

. The file accepts your grid design specs and options for where/how the outputted files are saved. For now, CSS Gridish makes a couple of assumptions about your grid design:

CSS Gridish唯一需要輸入的是一個名為

css-gridish.json

json檔案。 該檔案接受您的網格設計規範和選項，用于儲存輸出檔案的位置/方式。 目前，CSS Gridish對您的網格設計做出了兩個假設：

• The outside gutters are half the size of inside gutters

  外排水溝的尺寸是内排水溝的一半

• Your main columns are fluid instead of fixed widths

  您的主要色譜柱是流動的，而不是固定的寬度

Tip: For the best results in Sketch, we recommend you make your grid breakpoints, margin, and gutter divisible by the row height.

提示：為了在Sketch中獲得最佳效果，建議您使網格斷點，邊距和裝訂線可以被行高整除。

CSS Gridish is then ran in a command line with just

npx css-gridish

. You should then see a folder with all of the files for your team to use your grid! The great thing about CSS Gridish is that it makes it pretty easy for first-time CSS Grid users. After users learn the classes detailed in the documentation, they will typically use only two rules:

然後，僅

npx css-gridish

在指令行中運作

npx css-gridish

。 然後，您應該看到一個包含所有檔案的檔案夾，供您的團隊使用網格！ CSS Gridish的偉大之處在于，它使初次使用CSS Grid的使用者非常容易。 使用者學習了文檔中詳細介紹的類之後，通常将僅使用兩個規則：

.myElement {    grid-column: 1 / span 4; // Span four columns from first row    grid-row: 4 / span 8; // Span eight rows from fourth row}
           

The flexbox fallback code works similar to most grid frameworks with recognizable BEM class naming.

flexbox後備代碼的工作方式與大多數帶有可識别BEM類命名的網格架構相似。

By default, the code works with fluid columns and fixed rows. It also allows for vice-versa with helpful modifier classes. You will use the fluid row class to create shapes like squares that scale with the user’s screen width.

預設情況下，該代碼适用于流體列和固定行。 反之亦然，使用有用的修飾符類也可以。 您将使用流體行類建立可随使用者螢幕寬度縮放的形狀(如正方形)。

One gotcha when using CSS Gridish code is that we do not utilize the CSS Grid’s gap property for gutters. Instead, there are padding classes that are half a gutter size that you apply to respect the gutter. This is due to the inability to ignore gaps for situations like background colors and full-sized media. Hopefully the next version of the CSS Grid spec will resolve this.

使用CSS Gridish代碼時的一個陷阱是，我們不将CSS Grid的gap屬性用于裝訂線。 而是有一些填充類，它們的大小為裝訂線槽的一半，可用來尊重裝訂線。 這是由于無法忽略背景顔色和全尺寸媒體等情況下的間隙。 希望下一版CSS Grid規範可以解決此問題。

未來 (The Future)

CSS Gridish aims to get more products to adopt CSS Grid sooner, and to make the transition easier for users and teams.

CSS Gridish旨在使更多産品更快地采用CSS Grid，并使使用者和團隊更容易過渡。

In the long-term, we hope this encourages an idea called two-dimensional component libraries. The industry has had a strong era of component libraries that fill the width the users place a component in. Now with CSS Grid, we can create components that also fill the height they are placed in. This provides more creative possibilities to those making a design system and more flexibility to the teams that use it.

從長遠來看，我們希望這會鼓勵一個叫做二維元件庫的想法。 業界擁有強大的元件庫時代，可以填充使用者放置元件的寬度。現在，使用CSS Grid，我們可以建立也可以填充其放置高度的元件。這為進行設計的人員提供了更多的創意可能性系統，并為使用它的團隊提供更大的靈活性。

For the meantime, please use and contribute back to CSS Gridish. There is much more work to be done!

在此期間，請使用CSS Gridish并向其做出貢獻。 還有很多工作要做！

If it helps you out, please leave CSS Gridish a star!

如果有幫助，請讓CSS Gridish成為明星！

James Y Rauhut (@seejamescode) is an ATX Designer working for IBM Design. He loves to code, research, and try his best for God. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.

James Y Rauhut( @seejamescode )是為IBM Design工作的ATX設計器。 他喜歡為上帝編碼，研究并盡力而為。 以上文章是個人文章，不一定代表IBM的立場，戰略或觀點。

Special thanks to Hayley Hughes for the discotastic logo. Also, the following people were a big help to the project itself: Trevor Wong, Daniel Kuehn, Seth Johnson, Chiu-Ping Chiu, Jen Downs, Josh Black, Jessica Tremblay, Maranda Bodas, Wonil Suh, Quincy Larson, and the whole [email protected] community

特别感謝Hayley Hughes提供的徽标徽标。 此外，以下人員對項目本身也有很大幫助： Trevor Wong ，Daniel Kuehn， Seth Johnson ，Chiu-Ping Chiu， Jen Downs ， Josh Black ， Jessica Tremblay ， Maranda Bodas ， Wonil Suh ， Quincy Larson和整個FED @IBM社群

翻譯自: https://www.freecodecamp.org/news/introducing-css-gridish-helping-teams-to-adapt-css-grid-today-3e031ab222de/

開源css庫