css-gridish 教程

HTML5 herman 883浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

css-gridish 能制作出和Bootstrap Carbon Design SystemMaterial 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.xttblog.com
      "gutter": "2rem", //  www.xttblog.com
      "margin": "3vw" // www.xttblog.com
    },
    ...
    "max": {
      "breakpoint": 100,
      "columns": 12,
      "gutter": "4rem",
      "margin": "5vw"
    }
  },
  "extraArtboards": {
    "xlg": 100 
  },
  "rem": 16, //  www.xttblog.com
  "rowHeight": 0.5, 
  "rows": 30, 
  "paths": {
    "route": "css-gridish",
    "intro": "intro.md" 
  }
}

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » css-gridish 教程