gr8, 可以定制的功能css实用程序

分享于 

18分钟阅读

GitHub

  繁體 雙語
  • 源代码名称:gr8
  • 源代码网址:http://www.github.com/jongacnik/gr8
  • gr8源代码文档
  • gr8源代码下载
  • Git URL:
    git://www.github.com/jongacnik/gr8.git
    Git Clone代码到本地:
    git clone http://www.github.com/jongacnik/gr8
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jongacnik/gr8
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    gr8 NPM versionNPM versionWebsite

    使用 gr8-util 构建的自定义css实用工具。 包括:

    用法

    样式表用法

    使用 gr8的简单方法是在项目中包含 gr8.css 命令行样式表:

    <linkrel="stylesheet"href="dist/gr8.css"/>

    javascript用法

    使用 gr8 函数生成实用程序:

    var gr8 =require('gr8')var css =gr8()

    详细用法 →

    命令行实用程序

    默认实用程序:

    .c1{width:8.33333%}.c2{width:16.66667%}.c3{width:25%}.c4{width:33.33333%}.c5{width:41.66667%}.c6{width:50%}.c7{width:58.33333%}.c8{width:66.66667%}.c9{width:75%}.c10{width:83.33333%}.c11{width:91.66667%}.c12{width:100%}.s1{width:100%}.s2{width:50%}.s3{width:33.33333%}.s4{width:25%}.s5{width:20%}.s6{width:16.66667%}.s7{width:14.28571%}.s8{width:12.5%}.s9{width:11.11111%}.s10{width:10%}.s11{width:9.09091%}.s12{width:8.33333%}.co0{margin-left:0}.co1{margin-left:8.33333%}.co2{margin-left:16.66667%}.co3{margin-left:25%}.co4{margin-left:33.33333%}.co5{margin-left:41.66667%}.co6{margin-left:50%}.co7{margin-left:58.33333%}.co8{margin-left:66.66667%}.co9{margin-left:75%}.co10{margin-left:83.33333%}.co11{margin-left:91.66667%}.co12{margin-left:100%}
    margin
    .m0{margin:0}.m1{margin:1rem}.m2{margin:2rem}.m3{margin:3rem}.m4{margin:4rem}.mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}.mt4{margin-top:4rem}.mr0{margin-right:0}.mr1{margin-right:1rem}.mr2{margin-right:2rem}.mr3{margin-right:3rem}.mr4{margin-right:4rem}.mb0{margin-bottom:0}.mb1{margin-bottom:1rem}.mb2{margin-bottom:2rem}.mb3{margin-bottom:3rem}.mb4{margin-bottom:4rem}.ml0{margin-left:0}.ml1{margin-left:1rem}.ml2{margin-left:2rem}.ml3{margin-left:3rem}.ml4{margin-left:4rem}.mx0{margin-left:0;margin-right:0}.mx1{margin-left:1rem;margin-right:1rem}.mx2{margin-left:2rem;margin-right:2rem}.mx3{margin-left:3rem;margin-right:3rem}.mx4{margin-left:4rem;margin-right:4rem}.my0{margin-top:0;margin-bottom:0}.my1{margin-top:1rem;margin-bottom:1rem}.my2{margin-top:2rem;margin-bottom:2rem}.my3{margin-top:3rem;margin-bottom:3rem}.my4{margin-top:4rem;margin-bottom:4rem}
    padding
    .p0{padding:0}.p1{padding:1rem}.p2{padding:2rem}.p3{padding:3rem}.p4{padding:4rem}.pt0{padding-top:0}.pt1{padding-top:1rem}.pt2{padding-top:2rem}.pt3{padding-top:3rem}.pt4{padding-top:4rem}.pr0{padding-right:0}.pr1{padding-right:1rem}.pr2{padding-right:2rem}.pr3{padding-right:3rem}.pr4{padding-right:4rem}.pb0{padding-bottom:0}.pb1{padding-bottom:1rem}.pb2{padding-bottom:2rem}.pb3{padding-bottom:3rem}.pb4{padding-bottom:4rem}.pl0{padding-left:0}.pl1{padding-left:1rem}.pl2{padding-left:2rem}.pl3{padding-left:3rem}.pl4{padding-left:4rem}.px0{padding-left:0;padding-right:0}.px1{padding-left:1rem;padding-right:1rem}.px2{padding-left:2rem;padding-right:2rem}.px3{padding-left:3rem;padding-right:3rem}.px4{padding-left:4rem;padding-right:4rem}.py0{padding-top:0;padding-bottom:0}.py1{padding-top:1rem;padding-bottom:1rem}.py2{padding-top:2rem;padding-bottom:2rem}.py3{padding-top:3rem;padding-bottom:3rem}.py4{padding-top:4rem;padding-bottom:4rem}
    不透明度
    .op0{opacity:0}.op25{opacity:0.25}.op50{opacity:0.5}.op75{opacity:0.75}.op100{opacity:1}
    background
    .bgsc{background-size:cover}.bgsct{background-size:contain}.bgpc{background-position:center}.bgpt{background-position:top}.bgpr{background-position:right}.bgpb{background-position:bottom}.bgpl{background-position:left}.bgrn{background-repeat:no-repeat}.bgrx{background-repeat:repeat-x}.bgry{background-repeat:repeat-y}
    柔体
    .x{display:flex}.xac{align-items:center}.xab{align-items:baseline}.xas{align-items:stretch}.xafs{align-items:flex-start}.xafe{align-items:flex-end}.xdr{flex-direction:row}.xdrr{flex-direction:row-reverse}.xdc{flex-direction:column}.xdcr{flex-direction:column-reverse}.xjc{justify-content:center}.xjb{justify-content:space-between}.xja{justify-content:space-around}.xjs{justify-content:flex-start}.xje{justify-content:flex-end}.xw{flex-wrap:wrap}.xwr{flex-wrap:wrap-reverse}.xwn{flex-wrap:nowrap}.xi{flex:initial}.xx{flex:1}.xa{flex:auto}.xn{flex:none}.xo0{order:0}.xo1{order:1}.xo2{order:2}.xo3{order:3}.xo4{order:4}.xot{order:-1}.xob{order:99}
    显示
    .df{display:flex}.db{display:block}.dib{display:inline-block}.di{display:inline}.dt{display:table}.dtc{display:table-cell}.dtr{display:table-row}.dn{display:none}
    浮点数
    .fl{float:left}.fr{float:right}.fn{float:none}.cf:after{content:"";display:block;clear:both}
    overflow
    .oh{overflow:hidden}.os{overflow:scroll}.ov{overflow:visible}.oxh{overflow-x:hidden}.oxs{overflow-x:scroll}.oxv{overflow-x:visible}.oyh{overflow-y:hidden}.oys{overflow-y:scroll}.oyv{overflow-y:visible}
    定位
    .psa{position:absolute}.psr{position:relative}.psf{position:fixed}.pss{position:static}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.z0{z-index:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}
    大小
    .w0{width:0}.w100{width:100%}.h0{height:0}.h100{height:100%}.vw50{width:50vw}.vw100{width:100vw}.vwmn50{min-width:50vw}.vwmn100{min-width:100vw}.vwmx50{max-width:50vw}.vwmx100{max-width:100vw}.vh50{height:50vh}.vh100{height:100vh}.vhmn50{min-height:50vh}.vhmn100{min-height:100vh}.vhmx50{max-height:50vh}.vhmx100{max-height:100vh}.ar25:before{padding-top:25%;content:"";display:block}.ar50:before{padding-top:50%;content:"";display:block}.ar75:before{padding-top:75%;content:"";display:block}.ar100:before{padding-top:100%;content:"";display:block}
    版式
    .fs1{font-size:1rem}.fs1-2{font-size:1.2rem}.fs1-6{font-size:1.6rem}.fs2-4{font-size:2.4rem}.fs3-2{font-size:3.2rem}.fs6-4{font-size:6.4rem}.lh1{line-height:1}.lh1-5{line-height:1.5}.fsn{font-style:normal}.fsi{font-style:italic}.fwn{font-weight:normal}.fwb{font-weight:bold}.tal{text-align:left}.tac{text-align:center}.tar{text-align:right}.taj{text-align:justify}.toi{text-overflow:initial}.toc{text-overflow:clip}.toe{text-overflow:ellipsis}.tdu{text-decoration:underline}.tdo{text-decoration:overline}.tdlt{text-decoration:line-through}.tdn{text-decoration:none}.ttu{text-transform:uppercase}.ttl{text-transform:lowercase}.ttc{text-transform:capitalize}.ttn{text-transform:none}.vabl{vertical-align:baseline}.vat{vertical-align:top}.vam{vertical-align:middle}.vab{vertical-align:bottom}.wsn{white-space:normal}.wsnw{white-space:nowrap}.wsp{white-space:pre}.wsi{white-space:inherit}.tc1{columns:1}.tc2{columns:2}.tc3{columns:3}.tc4{columns:4}
    杂项
    .curp{cursor:pointer}.curd{cursor:default}.cura{cursor:alias}.curzi{cursor:zoom-in}.curzo{cursor:zoom-out}.usn{user-select:none}.usa{user-select:auto}.ust{user-select:text}.pen{pointer-events:none}.pea{pointer-events:auto}.vh{visibility:hidden}.vv{visibility:visible}
    开发
    .dev{outline:1pxsolid#912eff}.dev>* {outline:1pxsolid#5497ff}.dev>*>* {outline:1pxsolid#51feff}.dev>*>*>* {outline:1pxsolid#ff0000}.dev>*>*>** {outline:1pxsolid#00ff00}

    API

    css = gr8([opts])

    生成实用工具并返回一个css字符串。 opts 接受以下值:

    值选项选择器选项
    • opts.selector[Function] css选择器模板函数
    • opts.breakpoints 为断点实用程序提供了 [Object]
    • opts.breakpointSelector[String | Function] 选择器快捷方式或者css选择器模板函数
    自定义实用程序选项

    值选项

    值选项自定义数字 gr8 实用工具。 它们接受数字。字符串。数组或者对象。 通常会使用数字数组。 有关设置值的所有可能方法的详细信息,请参阅 gr8-util

    默认值:

    var css =gr8({
     spacing: [0, 1, 2, 3, 4],
     fontSize: [1, 1.2, 1.6, 2.4, 3.2, 6.4],
     lineHeight: [1, 1.5],
     size: [0, 100],
     viewport: [50, 100],
     zIndex: [0, 1, 2, 3, 4],
     flexOrder: [0, 1, 2, 3, 4],
     opacity: [0, 25, 50, 75, 100],
     aspectRatio: [25, 50, 75, 100],
     textColumn: [1, 2, 3, 4]
    })

    选择器选项

    选择器选项控制选择器&断点。

    默认值:

    var css =gr8({
     selector:s=>`.${s}`,
     breakpoints: {
     sm:768,
     md:1024,
     lg:1280 },
     breakpointSelector:'attribute'})

    opts.selector

    函数期望选择器名作为输入,并返回一个css选择器字符串作为输出。 例如要使用属性选择器而不是类:

    var css =gr8({
     selector:s=>`[gr8~="${s}"]`})
    输出
    [gr8~="fs1"]{font-size:1rem}
    [gr8~="fs1-6"]{font-size:1.6rem}/* etc... */

    opts.breakpoints

    对象键用于选择器名称,而对象值用于定义媒体查询。 对象值可以是整数( 这将导致 min-width 媒体查询),或者对象值可以是媒体查询字符串。 通过 false 完全禁用断点实用程序:

    var css =gr8({
     breakpoints: {
     small:1024,
     medium:'(min-width:768px) and (max-width:1280px)',
     'not-big':'(max-width:1024px)',
     portrait:'(orientation:portrait)' }
    })
    输出
    @media (min-width:1024px) {
     [small~="fs1"]{font-size:1rem}
     /* etc... */ 
    }@media (min-width:768px) and (max-width:1280px) {
     [medium~="fs1"]{font-size:1rem}
     /* etc... */ 
    }@media (max-width:1024px) {
     [not-big~="fs1"]{font-size:1rem}
     /* etc... */ 
    }@media (orientation:portrait) {
     [portrait~="fs1"]{font-size:1rem}
     /* etc... */ 
    }

    注意:如果你关心有效的属性选择器,将 data- 添加到断点键中。

    opts.breakpointSelector

    默认情况下,为断点实用程序( 如 上面 所见) 生成属性选择器。 使用前缀类,通过传入 'class' 快捷方式,或者为更细粒度的控件提供选择器函数:

    'class' 快捷方式
    var css =gr8({
     breakpointSelector:'class'})
    输出
    @media (min-width:768px) {
     .sm-fs1{font-size:1rem}
     /* etc... */}@media (min-width:1024px) {
     .md-fs1{font-size:1rem}
     /* etc... */}@media (min-width:1280px) {
     .lg-fs1{font-size:1rem}
     /* etc... */}
    选择器函数
    var css =gr8({
     breakpointSelector:key=>s=>`.gr8-${key}-${s}`})
    输出
    @media (min-width:768px) {
     .gr8-sm-fs1{font-size:1rem}
     /* etc... */}@media (min-width:1024px) {
     .gr8-md-fs1{font-size:1rem}
     /* etc... */}@media (min-width:1280px) {
     .gr8-lg-fs1{font-size:1rem}
     /* etc... */}

    自定义实用程序选项

    gr8-util 是生成功能css实用程序的一个小函数。 给出一个简单的对象,就会生成简洁的css工具。 gr8 中的所有实用程序都是使用。

    使用 utils 选项传递 gr8-util 对象的array,以使用自定义实用程序扩展 gr8 输出:

    var bgcolor = {
     prop: {
     bgc:'background-color' },
     vals: ['red', 'blue', 'green']
    }var fontcolor = {
     prop: {
     fc:'color' },
     vals: ['red', 'blue', 'green']
    }var css =gr8({
     utils: [
     bgcolor,
     fontcolor
     ]
    })
    输出
    .bgcr{background-color:red}.bgcb{background-color:blue}.bgcg{background-color:green}.fcr{color:red}.fcb{color:blue}.fcg{color:green}/* etc... */@media (min-width:768px) {
     [sm~="bgcr"]{background-color:red}
     [sm~="bgcb"]{background-color:blue}
     [sm~="bgcg"]{background-color:green}
     [sm~="fcr"]{color:red}
     [sm~="fcb"]{color:blue}
     [sm~="fcg"]{color:green}
     /* etc... */}@media (min-width:1024px) {
     [md~="bgcr"]{background-color:red}
     [md~="bgcb"]{background-color:blue}
     [md~="bgcg"]{background-color:green}
     [md~="fcr"]{color:red}
     [md~="fcb"]{color:blue}
     [md~="fcg"]{color:green}
     /* etc... */}@media (min-width:1280px) {
     [lg~="bgcr"]{background-color:red}
     [lg~="bgcb"]{background-color:blue}
     [lg~="bgcg"]{background-color:green}
     [lg~="fcr"]{color:red}
     [lg~="fcb"]{color:blue}
     [lg~="fcg"]{color:green}
     /* etc... */}

    参考 gr8-util,用于进一步生成定制工具的文档。

    opts.exclude

    使用 exclude 选项删除一些默认实用程序。 接受具有以下任意值的array:

    使用 columnmarginpaddingopacitybackgroundflexdisplayfloatoverflowpositioning,,gb2312

    电子邮件代理

    对于更高级的用例,代理了一些附加方法:

    // direct access to gr8-utilvar gr8util =require('gr8/util')var css =gr8util({options})
    // direct access to gr8-utilsvar gr8utils =require('gr8/utils')var css =gr8utils({options})// or even lower levelgr8utils.generate(gr8utils.utils, gr8utils.defaults)

    注释

    gr8 开发和迭代主要是为了在文件夹工作室的项目中使用。 它与其他功能css库( 比如超类或者basscss插件) 共享相似性,但在它的极简性和定制性。gr8 不提供任何颜色,没有边框,没有字体族等,而是提供快速定义自己的事件的方法。 它便于创建一致的设计系统,在默认情况下不强制。

    无论如何,我希望你喜欢它,也许会发现它有用 !

    待办事项

    • 高级文档
    • 网站

    请参见

    许可证


    FUNC  函数  UTIL  UTI  functional  Utilities  
    相关文章