cowui

A simple based on the react and styled-components senior style UI library

Usage no npm install needed!

<script type="module">
  import cowui from 'https://cdn.skypack.dev/cowui';
</script>

README

Cow UI

Cow UI 是一个 完全 定制的 基于 Styled-Components 框架 和 React 组件思维的 前端 UI 库。采用Flex布局和CSS3样式编写规范。

特征

通过 Cow UI,你可以构建出任何随心所欲的 前端UI 界面。灵活的,定制任意你的UI界面。遵循 All in js 思想,让 CSS 样式像 React 组件一样传递参数,并通过 Styled-Components 编译生成前端 CSS样式。 Cow UI目前还处于beta状态。目前她已经可用,但你可能需要通过pull request 修复若干复杂使用场景下的问题。

Why?

为什么发明Cow UI呢?好吧...(注意,这部份内容包含了一些我的个人观点!) 在发明 Cow UI 之前,我尝试了许多不同的 前端UI库。我发现虽然它们在编写简单示例时基本没有问题,但一旦想要构建一些 复杂和美观,自由度较高的 页面,你就会发现一些深层次的问题,比如,UI库硬 编码了文档结构规范,难以定制。类似布局结构可以开箱即用,但很多时候你无法随意进行个性化的需求定制。

原则

Cow UI 尝试通过一些原则来解决随心所欲定制的问题:

  • 基于Styled-Components。采用 Styled-Components 一致的构建方法,进行CSS样式的编译
  • Flex Box布局模式
  • 灵活的原生HTML标签切换。将原生 HTML 标签 如div 重新改造为 Div,大写字母 开头的 React 组件
  • 当你不想使用 Cow UI的时候,可以直接使用原生标签
  • 简洁的参数传递。将原生 CSS 样式,尽量精减为一个字母
  • 官网

    进入官网 cowui.com.

    用法

    使用 npm
    npm i -s cowui

    使用 yarn
    yarn add cowui

    ES6
    import {Div} from 'cowui'

    API

    GlobalColor

    自定义默认的颜色

    GlobalColor({  
        primary: '#35b8e0',  
        primaryRGB: '53,184,224',  
        primaryG: '#0081ee',  
        success: '#10c469',  
        successRGB: '16,196,105',  
        successG: '#009f5a',   
        danger: '#ff5b5b',  
        dangerRGB: '255,93,93',
        dangerG: '#e02e2e',
        warning: '#f9c851',
        warningRGB: '249,200,81',
        warningG: '#ff8a00',
        info: '#002fa7',
        infoRGB: '0,47,167',
        infoG: '#002687',
    }); 
    

    RGB结尾的 表示 '255,255,255' 的格式,用于透明度
    G结尾的 用于设置渐变结束的颜色

    参考

    Styled-Components. 官方文档
    HTML5. 指南
    CSS3. 指南
    JavaScript. Web开发技术
    React. 官方文档

    如果这还不够,你还可以随时阅读Cow UI的重度注释源码。

    贡献

    非常欢迎各种形式的贡献!

    团队

    鱼歌科技
    进入官网 eugle.cn.