开源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 FED@IBM 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库