通用 css 样式库 rich.css

日期: 25 Dec 2018
??



rich.css 用创新的方式,实现了动态的,可定制的,全覆盖的 css 样式库。无需开发 css 样式,也无需在 css html js 间切换,实现了样表库的名称编程。

传统的方式与问题

web base app 样式开发主要依赖 css 实现,css 的技术和高度定制要求开发者,必须有效组织大量的 css 文件和设计 css 对象。在页面众多的大型项目上,不得不编写大量 css 类,或者根据元素 id 定制 css 样式,甚至用内联在 html 上的样式。大量重复性的代码,维护上十分麻烦,虽然 sass,less 等优秀的项目一定程度带来提升。但是无法根本解决,开发页面先开发 css 的逻辑。

bnorth 的解决思路

bnorth 的解决思路是,生成丰富的 css 类库,开发者直接使用。但是对于定制部分并不是简单的循环全部的颜色或者尺寸。根据调查,一个应用中颜色和尺寸的使用是有限,且有场景的。比如说有主色调,辅助颜色,有标题大小,正文大小等,使得生成丰富全面的库成为可能。同时 bnorth 的 css 类库可以才用静态编译 css 和运行时动态生成类库的方式,在配置中可以修改各个场景的默认配置或者直接增加场景。尤其是动态生成类库的方式,可以方便的更换主题。

针对一些定制型更高,或者场景密集型的应用,比如画板程序。结合 react 的 style inline 特性,bnorth 提供了丰富的 style 生成函数,基本覆盖了 css 的全部使用场景。

样式库使用方法

rich.css 提供了丰富的样式库,涵盖了常用的 css 样式,无需开发 css ,直接使用提供的样式即可开发。样式库可以分为以下几类:

  1. animation :提供渐进动画和帧动画的样式
  2. background :提供了背景样式
  3. base :设置元素的基本样式,一些工具行样式库和基本的样式库,如行高等
  4. border :提供了边框样式
  5. control :提供了 web 控件的样式和状态
  6. cursor :提供了指针样式
  7. display :提供了显示样式,包括显示类型,透明度等
  8. flex :弹性布局的样式
  9. position :提供了位置相关的样式,包括定位类型,位置设置等
  10. size :提供了尺寸相关的样式
  11. spacing :提供了边距相关的样式
  12. text :提供了文字样式

在使用上有两种方式可以选择,css 静态文件方式和动态生成样式库方式。

css 静态文件方式

css 静态文件方式是直接引入 rich.css 生成完成的样式。如果希望调整样式的参数,需要下载 rich.css ,修改 config 文件,并自行编译

import ReactDom from 'react-dom';
import '@bnorth/rich.css/css/text.min.css';
import Button from '@bnorth/components/lib/Button';
ReactDOM.render(<Button className="text-color-primary">click</Button>, document.querySelector('#root'));

动态生成方式

动态生成方式是不引入 css 文件,而是引入 rich.css 提供的样式生成函数,执行生成样式后再使用。由于 css 样式库中有循环生成的样式,因此生成函数尺寸远小于 css 文件尺寸,生成又很高,进测试耗时相差无几,在网络不好环境下,反而表现更好。尤其动态生成,可以先修改配置在生成,样式修改灵活,还可实现换肤功能。

import ReactDom from 'react-dom';
import genCss '@bnorth/rich.css/';
import Button from '@bnorth/components/lib/Button';
genCss();
ReactDOM.render(<Button className="text-color-primary">click</Button>, document.querySelector('#root'));

静态与动态结合方式

以上两种方式也可以结合。不需要定制的部分,直接使用 css 。需要定制的部分在使用动态生成的方式替换或者覆盖。

import ReactDom from 'react-dom';
import '@bnorth/rich.css/css/....min.css';
import { gen } '@bnorth/rich.css/lib/gen';
import genFuncText '@bnorth/rich.css/lib/gens/text';
gen('richcss', genFuncText);
import Button from '@bnorth/components/lib/Button';
ReactDOM.render(<Button className="text-color-primary">click</Button>, document.querySelector('#root'));

样式扩展方法

除了样式库,rich.css 还提供了其他形式的样式操作方法。提供丰富的功能,还能解决一些样式。比如灵活的位置和尺寸的样式,需要样式函数的支持,单独的样式库是无法支持的。

样式库拼接函数

在组件的库的封装过程,经常会面对一个问题。组件库中使用了默认的样式库,使用时希望覆盖某些样式,比如组件库中使用了 text-color-primary ,使用时使用 text-color-alert 替换。可是由于 css class 的优先级并不是 class 数组的先后优先级,而是定义的样式库时的定义顺序决定的。

为此 rich.css 约定了样式库的名称的规则,任何名称都是由两部分组成,样式名与样式参数。对于 rich.css 的样式库在组件样式库拼接过程中遇到样式名相同的参数不同的样式,会删除前面的保留最后的。例如:

<Button className="text-color-primary text-size-sm text-color-alert" /> // class: 'text-size-sm text-color-alert'

除了替换还可以消除某个样式。一般是将参数部分使用 ‘-‘ 替换。 例如:消除 Button 默认的 text-align-center 居中样式。

<Button className="text-align--" /> // class: 'text-size-sm text-color-alert'

对于有些工具型样式库,没有参数部分,则直接在尾部增加 ‘-‘。

样式表生成函数

对于简单的样式表,比如设置宽度和高度,react 推荐 style inline 方式。react 的 HTML 是在 js 文件中实现,是灵活的可靠的。比如:

<Button style={{width: window.innerWidth}} />

但是对于一些复杂的样式,比如设置阴影,一些浏览器兼容的样式,比如动画等,style inline 方式则显得复杂,容易出错。为此 rich.css 设计了一些样式函数:

  1. animation :提供了动画操作的一些函数,同时在 css 中还提供了大量的 帧动画定义

    比如设计一个跳动的文字

     import ReactDom from 'react-dom';
     import Panel from '@bnorth/components/lib/Panel';
     import animation from '@bnorth/rich.css/lib/styles/animation';
     import from '@bnorth/rich.css/css/keyframes.css';
     ReactDom.render(
       <Panel style={{...animation('bounce')}}>ball</Panel>,
       document.querySelector('#root')
     );
    
  2. background :提供了背景操作的函数
  3. flex :提供了 flex 设置
  4. shadow :提供了阴影操作的函数
  5. shape :提供了 css 形状的函数

样式库用来最简单有效的使用样式,样式函数用于处理一些无法遍历的和无法主题化的样式,style inline 也是用来处理无法遍历和主题化的样式,但是需要是简单的不涉及浏览器兼容的。一个 3 种方式融合的例子:

比如设计一个跳动的小球

import ReactDom from 'react-dom';
import Panel from '@bnorth/components/lib/Panel';
import animation from '@bnorth/rich.css/lib/styles/animation';
import from '@bnorth/rich.css/css/keyframes.css';
ReactDom.render(
  <Panel
    style={{...animation('bounce')}, width: 50, height: 50}
    className="border-radius-rounded">
    ball
  </Panel>,
  document.querySelector('#root')
);

浏览器标准化样式

rich.css 一般化了 html 元素样式,修复了一些浏览器的样式 bug,提供了跨浏览器的高度一致性。使用方法:

import '@bnorth/rich.css/css/normalize.css';

MediaQuery

TODO

样式配置

样式配置使 rich.css 可以适应不同的应用开发需求,创建丰富多彩的应用。比如设置文字的主颜色:

import { getCssConfig, setCssConfig } from '@bnorth/rich.css/lib/gen';
let { textColors } = getCssConfig();
textColors.normal = '#222222';
setCssConfig({textColors});

样式配置包括颜色库,字体库,尺寸等。还包括 css 属性常量的配置,对于配置里没有的可以自行增加,对于配置有的,但是项目完全用不到的,可以清除,减少生成的样式库大小。

具体参见 配置文档

flex 布局

网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。bnorth 中包括 bnorth 组件主要基于 flex 布局实现。

点击进入

原文:大专栏  通用 css 样式库 rich.css

原文地址:https://www.cnblogs.com/wangziqiang123/p/11631280.html

时间: 2024-10-14 09:54:14

通用 css 样式库 rich.css的相关文章

一个有意思的CSS样式库--BUTTONS

我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/buttons/ 接下来介绍怎么使用这个CSS样式库,如上图,进入网址后,点击下载,会出现一个全是代码的网页,然后鼠标右键点击全选,复制,这里的代码就是这个BUTTONS的CSS样式代码, 再接下来就是在你的编辑器中创建一个css文件,然后将所复制的代码全部粘贴上去即可,然后就可以编写你的HTML代码

web前端(7)—— 了解CSS样式,引入css样式的方式

CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打开浏览器的调试界面查看这个输入框的css样式: 图中我圈出来的左边html代码的就是html属性的键值对,然后圈出的右边位置就是css样式,然后右边那个窗口你还可以所谓的线上编辑,在最后点击一下,就可以编辑: 这个此时就暂且不提了,以后学到的时候再添加,然后那些已经有的也可以去掉,把选项框里的“√”

css 样式库

关于CSS reset body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; background:white; } input,textarea,select{ font-size:12px; font-size:100%; font-family:arial; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)

一.CSS引入方式1.CSS简介:(1)CSS(Cascading style Sheets):层叠样式表.用来给html网页设置样式;(2)当多个选择器对同一个元素进行样式设计时,则该元素的样式为多个选择器叠加的效果(当有冲突时,按照优先级设置);2.引入方式:(1)方式一:行内样式(在html元素的style属性上设置样式)(2)方式二:页面内嵌样式(在head标签内部嵌入样式)(3)方式三:引入外部样式文件例1(演示CSS三种引入方式):Html代码: <!DOCTYPE html> &

精简的网站reset和css通用样式库

一.CSS reset body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:100%; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list

[css]【转载】CSS样式分离之再分离

原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/ 一.关于CSS样式分离 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞.无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用. CSS本身就代表着精简与重用.例如我们可以设置一个如下的样式: .exa

BUTTONS V. 2.0.0——CSS按钮库

BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点 模块样式命名更清晰化 易于维护.扩展性强 动画效果——修改样式后有过度效果,默认样式 源码如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Buttons库学习</title> 6 <style type=&q

CSS基础,认识css样式

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于 定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字 有着统一的字体.字号或者颜色等. 2.CSS代码的语法 css 样式由选择符和声明组成,而声明又由属性和值组成, 选择符: 又称选择器

【03】全局 CSS 样式

全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTYPE html> <html lang="