生成网格单位 Grunt-pure-grids

BSD
JavaScript
跨平台
Yahoo
2015-05-11
大胖森

Grunt-pure-grids 能够生成纯网格的自定义单位的插件,它需要使用 Grunt 构建工具。

在你的项目的 Grunt 文件中,需要添加一个名为  pure_grids 的数据对象到 grunt.initConfig()中。

grunt.initConfig({
    pure_grids: {
        responsive: {
            dest: 'path/to/my-responsive-grid.css',
            options: {
                units: 12, // 12-column grid
                mediaQueries: {
                    sm: 'screen and (min-width: 35.5em)', // 568px
                    md: 'screen and (min-width: 48em)',   // 768px
                    lg: 'screen and (min-width: 64em)',   // 1024px
                    xl: 'screen and (min-width: 80em)'    // 1280px
                }
            }
        }
    }
});

这是一个 12 列的纯网格

grunt.initConfig({
    pure_grids: {
        twelveCols: {
            dest: 'path/to/my-grid.css',
            options: {
                units: 12, //12-column grid
            }
        }
    }
});
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

pure.css 模板

<!Doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>博客</title> <link rel="stylesheet"...

2016/09/01 13:57
32
0
7+ jQuery Microsoft Excel Type Plugins

7+ jQuery Microsoft Excel Type Plugins In no particular order, we give you a handpicked collection of 7+ jQuery Microsoft Excel Type plugins you may have not used before! You wo...

2013/05/11 16:29
133
0
discuz 首页四格图不显示的解决方法

1. 低版本升级导致,pre_forum_threadimage 表格为空 2. 代码有bug,按如下修改代码: ~~~.php diff --git a/source/module/forum/forum_index.php b/source/module/forum/forum_index.php i...

2016/05/31 10:31
19
0
es安装head插件

版本:es:5.6.10 , head:5.0 git clone git://github.com/mobz/elasticsearch-head.git # 安装nodejs yum -y install nodejs npm npm install grunt-cli npm install grunt grunt -version #...

06/27 12:39
84
0
Grunt 和 Bower 用法学习

关于自动化问题 清理临时文件,校验代码,连接并压缩javascript文件,拷贝资源文件和配置文件,运行测试等。 Automating the workflow with Grunt Grunt 通过可以总过组件来任意的组织要执行...

2016/03/01 11:25
19
1
前端开发神器:grunt快速入门

grunt是什么? grunt是一个基于nodejs的task runner,简单来说,就是类似于.net平台的msbuild以及java平台的maven。 grunt能做什么? grunt可以使你的项目中重复的任务,比如压缩,语法检查,...

2013/10/16 07:21
1K
1
前端开发自动化工具Grunt和bower

自动化工作流 我们的产品基于复杂的流程,有很多步骤需要执行,比如从最后一次部署清理临时文件。 校验代码,连接和最小化javascript文件,拷贝图片,配置文件等资源文件,运行测试等等其它工...

2016/06/28 15:30
13
0
【深入浅出Node.js系列十六】grunt让Nodejs规范起来

#0 系列目录# - 深入浅出Node.js系列 - [【深入浅出Node.js系列一】什么是Node.js](http://my.oschina.net/xianggao/blog/598771) - [【深入浅出Node.js系列二】Node.js&NPM的安装与配置](h...

2016/01/21 14:04
146
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部