本文共 8427 字,大约阅读时间需要 28 分钟。
开源css库
Today, I’m excited to introduce a new open-source tool from IBM called !
今天,我很高兴介绍IBM推出的名为的新开源工具!
CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use:
CSS Gridish采用了产品网格的设计规范,并建立了供团队使用的多种资源:
A for anyone to check a webpage’s alignment
一个 ,任何人都可以检查网页的对齐方式
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 , , and .
目的是帮助团队更快地适应CSS Grid,并实现更复杂的布局。 为了展示该工具的通用性,下面是一些来自 , 和示例网格。
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 and 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通过解决这些阻止程序而有所帮助。
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
以节省宝贵的千字节经验。
Great tools have emerged that create a single source of truth for design and code like and . These tools ensure that designers and developers are making with the same components.
诸如和这样的伟大工具已经出现,它们为设计和代码创建了一个真实的来源。 这些工具可确保设计人员和开发人员使用相同的组件进行制作。
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文件一起使用。 设计师喜欢用它来查看编码的网页。
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
使用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
单元的处理方式有所不同。 可以通过网格上的保证金来规避。
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对您的网格设计做出了两个假设:
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规范可以解决此问题。
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 a star!
如果有帮助,请让成为明星!
James Y Rauhut () 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( )是为IBM Design工作的ATX设计器。 他喜欢为上帝编码,研究并尽力而为。 以上文章是个人文章,不一定代表IBM的立场,战略或观点。
Special thanks to for the discotastic logo. Also, the following people were a big help to the project itself: , Daniel Kuehn, , Chiu-Ping Chiu, , , , , , , and the whole FED@IBM community
特别感谢提供的徽标徽标。 此外,以下人员对项目本身也有很大帮助: ,Daniel Kuehn, ,Chiu-Ping Chiu, , , , , , 和整个FED @IBM社区
翻译自:
开源css库
转载地址:http://gjwzd.baihongyu.com/