开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
Atomizer首页、文档和下载 - 创建 Atomic CSS 工具 - 开源中国社区
全部项目分类
我要评价
BSD
JavaScript
跨平台
Yahoo
分享
收藏
1 人收藏
收录时间:2015-05-04
Atomizer 详细介绍

Atomizer 是一个创建 Atomic CSS 的工具,它适用于模板框架的组件,例如 ReactEmberAngular

示例代码:

var Atomizer = require('atomizer');
var defaultConfig = {    
    "breakPoints": {        
      'sm': '@media(min-width=750px)',        
      'md': '@media(min-width=1000px)',        
      'lg': '@media(min-width=1200px)'
    },     
    "custom": {       
       "1": "1px solid #000",        
       "foo": "2px dotted #f00"
    },    
     "classNames": [        
       'Bd(1)',        
       'Bd(foo)',        
       'Bd(foo)--sm',        
       'Bd(foo)--md',        
       'D(n)!'
    ]
};
var atomizer = new Atomizer({verbose: true});
// Parse text to find Atomic CSS classes
var foundClasses = atomizer.findClassNames('<div class="D(n)! P(10px) M(20%) Bd(1) Bd(foo)--sm"></div>');
// Generate Atomizer configuration from an array of Atomic classnames
var finalConfig = atomizer.getConfig(foundClasses, defaultConfig);
// Generate Atomic CSS from configuration
var css = atomizer.getCss(finalConfig)

大家对 Atomizer 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部