How can I modify the Bulma CSS framework to get the desired color theme and alignments?

I'm about to build a website and do a case study on it. I don't necessarily want to dive deep into CSS to get my desired design, foremost due to time pressure. So I thought I would use a framework to get the design done asap. I picked Bulma because I was aiming for a minimalistic and modern design. However, I'm not satisfied with the theme colours which Bulma has.

I'm wondering how can I modify CSS to get the desired colours and alignments?

Solution

Bulma Start is an easy way to customize your project. Set up Bulma and run the watchers (css & js) so code changes will be reflected in your browser:

cd my-bulma-project
npm install
npm start

In _sass/main.scss, follow the commented instructions for adding a new color. Here's an example:

// 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;
}

For more extensive customization and theming, I recommend exploring the Customize docs on the Bulma site for creating a custom implementation using scss.

Here's an example from the Bulma website for quick customization with 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";