roobie下载 - roobie源码下载

roobie

网站数据

1.0.0

下载

roobie

CSS 类的集合，可帮助您在 HTML 中编写业务逻辑。使用 100 个预构建的 CSS 类轻松构建可维护的 Web 和移动应用程序。永远不要再编写带有填充、边距等的样板 CSS 类。相反，应该选择可重用的实用 CSS 类。这会使 HTML 文件更大，但会减少删除内容时的代码清理和杂散代码。从集中主题控制所有 CSS 变量，以确保整个 Web 应用程序的一致性，并轻松切换主题。提高可维护性和开发速度。

模块

主题：使用我们预先构建的主题或分叉我们的模板并创建您自己的主题。
布局：使用 Flexbox CSS 帮助器创建简单且响应式的布局。
实用程序：CSS 实用程序可让您保持原状，在 HTML 中编写业务逻辑。
动画：各种动画可提供清晰、动态的内容。
组件：使用 CSS 和 JavaScript 构建的易于使用的 Web 组件。
操纵（即将推出）
图标（即将推出）

示例

具有居中行 Flexbox 布局的 100% 宽度容器。每个子元素都有不同的字体大小。

roobie roobie roobie </div>">

 < div class =" div row center " >
    < span class =" fnts1 " > roobie </ span >
    < span class =" fnts2 " > roobie </ span >
    < span class =" fnts3 " > roobie </ span >
</ div >

具有行 Flexbox 布局的 100% 宽度容器。子元素的水平强度边距为 2。每个子元素都有 2 个强度填充。

roobie roobie roobie </div>">

 < div class =" div row row-spacer2 " >
    < span class =" pad2 " > roobie </ span >
    < span class =" pad2 " > roobie </ span >
    < span class =" pad2 " > roobie </ span >
</ div >

33% 宽度的容器。每个子元素都有不同的垂直边距（顶部和底部）。最后一个孩子的左边框强度为 2，蓝色强度为 2。

roobie roobie roobie </div>">

 < div class =" div33 " >
    < span class =" mrgv1 " > roobie </ span >
    < span class =" mrgv2 " > roobie </ span >
    < span class =" mrgv3 bdrl2 bdr-blue2 " > roobie </ span >
</ div >

50% 宽度的容器，具有垂直居中和水平端列 Flexbox 布局。每个子元素都有不同的字体粗细。

roobie roobie roobie </div>">

 < div class =" div50 col aln-center jst-end " >
    < span class =" fntw1 " > roobie </ span >
    < span class =" fntw2 " > roobie </ span >
    < span class =" fntw3 " > roobie </ span >
</ div >

主题变量片段。

[ theme = "light" ] {
    /*Base*/
    --primary : rgb ( 21 , 206 , 166 );
    --secondary : var ( --bg4 );
    /*Status*/
    --success : rgba ( 81 , 190 , 73 , 0.7 );
    --warning : rgba ( 235 , 119 , 42 , .7 );
    --danger : rgba ( 248 , 62 , 52 , .7 );
    --info : rgba ( 152 , 217 , 243 , .7 );
    /*Shade 1*/
    --white : rgb ( 240 , 240 , 240 );
    --black : rgb ( 20 , 20 , 20 );
    --grey : rgb ( 199 , 199 , 199 );
    --red : rgb ( 167 , 32 , 32 );
    --orange : rgb ( 243 , 162 , 11 );
    --yellow : rgb ( 221 , 221 , 25 );
    --green : rgb ( 19 , 172 , 82 );
    --blue : rgb ( 23 , 23 , 192 );
    --indigo : rgb ( 117 , 13 , 117 );
    --violet : rgb ( 184 , 88 , 184 );
    /*Shade 2*/
    --white2 : rgba ( 240 , 240 , 240 , .7 );
    --black2 : rgba ( 20 , 20 , 20 , .7 );
    --grey2 : rgba ( 199 , 199 , 199 , .7 );
    /*More shades omitted...*/
    /*Text*/
    --t1 : rgb ( 20 , 20 , 20 );
    --t2 : rgb ( 35 , 35 , 35 );
    --t3 : rgb ( 50 , 50 , 50 );
    --t4 : rgb ( 65 , 65 , 65 );
    --t5 : rgb ( 80 , 80 , 80 );
    --t6 : rgb ( 95 , 95 , 95 );
    /*Background*/
    --bg1 : rgb ( 240 , 240 , 240 );
    --bg2 : rgb ( 230 , 230 , 230 );
    --bg3 : rgb ( 220 , 220 , 220 );
    --bg4 : rgb ( 210 , 210 , 210 );
    --bg5 : rgb ( 200 , 200 , 200 );
    --bg6 : rgb ( 190 , 190 , 190 );
    /*And many more...*/
}