跳到主要内容

5个网页设计师的顶级网格系统

当我开始一个新项目时,一半的战斗是从右脚开始的。我想其他人也有同样的感受,因为他们会浏览无数的工具和博客,试图找出新的和推荐的东西。然而,无论我们试图解决什么问题,总是需要一些元素,其中一个是网格系统。

虽然Bootstrap和Foundation在很多情况下都很棒,但是为每个项目定制它们可能需要做很多工作,并且选项数组可以使它们变得笨重,并且具有许多不必要的功能。对于网格,重要的是找到一个轻量级的工具,让您立即开始工作。它应该具有易于使用的CSS类,并且它应该是响应式设计友好的。

许多工具按设备类型(例如移动设备,平板电脑,台式机)分解,但使用不同的型号和Retina显示器,并不是那么简单。遵循Trent Walton的建议:在设计本身断裂时引入断点,而不是在新设备尺寸开始时引入断点。

良好的网格系统依赖于设计原则来确定更好的断点:适用于排版的列宽; 12,16,18或24列网格,可灵活分配柱子;和间距的一致性。

依靠干净轻便的网格系统,可以更轻松地编写新网站。它取消了一些结构上的猜测,但不限制你能做什么。

01.简单网格

Simple Grid lives up to its name with a straightforward system

Simple Grid通过简单的系统实现其名称

Simple Grid是开源的,通过12列网格,易于记忆的类名和精美的文档保持简单。
 


 

02.纯粹

Pure is a popular tool for documentation

Pure是一种流行的文档工具

我和Iron Yard的一位同事使用了Pure。文档做得很好,就好像它教开发者更好的CSS,设计和响应实践。


 

03. Flexbox网格

Flexbox Grid leads the way for flex display

Flexbox Grid引领了柔性显示的方式

Flexbox Grid特别有趣,因为它是我见过的第一个专门使用CSS中的flex显示选项的网格系统之一。


 

04. Bootstrap

Bootstrap has a lot on offer for free

Bootstrap有很多免费提供

Bootstrap专为前端开发量身定制,包含大量基于HTML和CSS的设计模板。它是开源的,免费的,并包含JavaScript扩展。

05.基金会

Foundation is great for responsive projects

基金会非常适合响应式项目

Foundation适用于任何设备和任何介质,是一个用于制作响应式前端框架的通用平台。它易于使用且极其灵活,基金会的团队不断更新其资源。

本文最初发表于网络杂志问题282。在这里购买。



翻译字数超限