自定义主题

高度可定制样式


Bulma 是高度可定制的,这主要归功于分布在28个文件的419个Sass变量。BulmaRazor显然继承了这一优点

由于BulmaRazor中引用了其他的组件样式,所以这里单独维护了一个仓库,BulmaRazor-Theme仓库:


自定义步骤

1
clone样式仓库
git clone git@gitee.com:loogn/bulmarazor-theme.git
2
安装打包依赖
npm install
3
修改mybulma.sass
具体变量参考 官网文档 中文网
@charset "utf-8";

// 自定义开始
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// 自定义结束

@import "bulma";
                
Show Code
4
构建自定义样式
npm run buildmy
5
替换样式
把构建的css/mybulma.min.css复制到自己的项目,替换引用bulma.min.css

效果预览

自定义主题

文档