如何修改Bulma CSS框架以获得所需的颜色主题和对齐?

cpjpxq1n  于 2023-05-30  发布在  其他
关注(0)|答案(1)|浏览(164)

我准备建个网站做个案例研究。我不一定想深入CSS以获得我想要的设计,主要是由于时间压力。所以我想我会使用一个框架来尽快完成设计。我选择布尔玛是因为我的目标是简约和现代的设计。然而,我不满意布尔玛的主题色。
我想知道如何修改CSS以获得所需的颜色和对齐?

c3frrgcw

c3frrgcw1#

Bulma Start是自定义项目的简单方法。设置Bulma并运行watchers(css & js),以便代码更改会反映在浏览器中:

cd my-bulma-project
npm install
npm start

_sass/main.scss中,按照注解说明添加新颜色。下面是一个例子:

// 2. Set your own initial variables
$orange: #ffb14a;
$blue: #99abe0;

// 3. Set the derived variables
// Use the new orange as the primary color
$primary: $orange;
$secondary: $blue;

// 4. Import the rest of Bulma
@import "../node_modules/bulma/bulma";

.new-class {
  background-color: $primary;
  border-top: 2px solid $secondary;
}

要进行更广泛的定制和主题化,我建议研究Bulma站点上的Customize文档,以便使用scss创建定制实现。
下面是Bulma网站上的一个例子,可以用scss快速定制。

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

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

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

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

// Import the rest of Bulma
@import "../path/to/bulma";

相关问题