当设计师把网页设计稿交给前端开发人员写代码后,页面往往与原稿有些偏着。前端人员写完页面后,还需要截图叠加到设计稿上,去看看偏差比率,这是很麻烦的事情。为了解决这个问题,建议设计师和前端人员看看今天分享的 Graaf 栅格样式工具。
Graaf 可以直接在页面上显示栅格线,而且可以自定义栅格结构,大大减少前端或设计师检测页面的烦恼。
1. 直接在 web 页面上显示栅格,方便前端人员实时调整(赞赞赞)
2. 栅格样式支持多个流行布局,如:Bootstrap, BBC News, Dribbble, Github, Medium…
3. 支持定制栅格样式(赞赞赞)
只需要引入 CSS 文件就能直接在页面上显示栅格线,这些既方便查看页面错位,又可以实时刷新调整,再也不用一个个截图到设计稿了。
- <link rel="stylesheet" href="https://grids.graaf.space/WIDTH/COLUMNS/GUTTER.css">
目前自带了有 10 多个流行的栅格样式,只需要替换对应样式表名称就行,如下图,如果你需要 Bootstrap 的栅格,就点击 bootstrap.css 就能看到样式表链接,然后直接嵌入网页即可。
如果没有你需要的栅格系统,那么可以简单修改 CSS 链接就可以自定义栅格线了,比如这个链接:
- https: //grids.graaf.space/793/10/16.css
793/10/16 分别是宽度、列数、间隔,你只需要修改对应数值就会即时生效,比如设置为宽度:1200px,列数:3 列,间距:30 px,那么链接就这样改动:
- https: //grids.graaf.space/1200/3/30.css
(搭梯子访问)
而且今天重点介绍 Taiwan Scenery Gallery 这个 资源,特色在于 里的所有图像均来自台湾,所以设计师们如果想找免费的台湾照片,这是一个很好的资源。
据 FLiPER 报道这是由 2 个广告系台湾本土女生创办,她们时常思考身在台湾,有没有可能为台湾做点什么,为台湾留下美的记录?
水稻 | 摄影:裴
最后她们想到了分享免费图像的行动,因为喜欢照相的台湾人很多,而需要照片的人也很多,特别是设计师们,这个行动不仅可以帮到需要图片的人,同时也在向世界传播着台湾的美。
池上乡,台东县 | 摄影:Eting
这个照片资源全部均为台湾人提供,但… 报道前还有 100 多张,而现在小编看了下,只有 44 张,也许被购买版权了吧。免费分享的同时,摄影师也能获得额外收入,这也是不错的。
台南海安路 (已删)
桃源谷 | 摄影:Eting
澎湖西嶼(已删)
澎湖湖西
新竹柿饼 | 摄影:范育銓
虽然目前只是很少的相片,但我们报道后,也会有不少人的参与进来,未来她会继续成长,敬请关注。
【优设网 原创文章 投稿邮箱:yuan@uisdc.com】
来源: http://www.tuicool.com/articles/rm6zMf2