• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

css-gridish 教程

JAVA web前端中文站 3年前 (2018-01-25) 1137次浏览 已收录 0个评论
文章目录[隐藏]

css-gridish 是 ibm 推出的一个开源的网格框架。也是最近比较流行的一个前端框架。本文介绍它的一些特点和用法。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

css-gridish 能制作出和 Bootstrap,?Carbon Design System,Material Design 等一样的网格示例。并且还有很多它们所不具备的优点,能实现更多复杂的布局。

css-gridish 教程

CSS Gridish 提供产品网格的设计规格,并为您的团队建立多个资源以供使用:

  • 草图文件与设计师的画板和网格/布局设置
  • 使用 CSS Grid 的 CSS / SCSS 代码,为开发人员提供 CSS Flexbox 回退
  • Google Chrome 扩展程序,让任何人都可以检查网页的对齐方式

事实是,许多企业项目不能放弃对不支持 CSS 网格布局的浏览器的支持。这个工具将使用您的网格的设计规范,并构建一个精简的?CSS 网格布局实现,并回退到 CSS Flexbox 支持。

使用教程

css-gridish 依赖??Node v8.2.0?或者更高版本。

首先,在你的项目根目录中创建一个css-gridish.json 文件。

使用下面的命令进行项目构建。

 npx css-gridish

如果要将网格构建添加到项目的构建过程中,请执行以下操作:

 npm install css-gridish

然后,加入 scripts: {build: “css-gridish”}你的 package.json。

运行命令 npm run build。

你的 CSS 和 README.md 类文档将被内置到./css-gridish/。

配置文件是您的所有设计系统规范的所在。编辑您的 css-gridish.json 所有生成的网格内容匹配您的设计系统:

 {
 "prefix": "gridish",
 "breakpoints": {
 "sm": {
 "breakpoint": 20,
 "columns": 4,
 // www.lisa33xiaoq.net "gutter": "2rem", 
 // www.lisa33xiaoq.net "margin": "3vw" // www.lisa33xiaoq.net }, ... 
 "max": {
 "breakpoint": 100,
 "columns": 12,
 "gutter": "4rem",
 "margin": "5vw"
 }
 },
 "extraArtboards": {
 "xlg": 100
 },
 "rem": 16,
 // www.lisa33xiaoq.net "rowHeight": 0.5, "rows": 30, "paths": { 
 "route": "css-gridish",
 "intro": "intro.md"
 }
}

上面只是一个简单的配置。如果你想更深入的学习,你参考官方提供的文档。https://github.com/IBM/css-gridish/tree/master/examples

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css-gridish 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址