Skip to content

Latest commit

 

History

History
97 lines (71 loc) · 2.62 KB

README.md

File metadata and controls

97 lines (71 loc) · 2.62 KB
Raw

⚠️ WIP: needs testing and storyboard of bulma components

Before you start

Please look at Bulma With Sass Example this repo is just an extension to how that works.

** Importing the scss files directly will likely cause wierd/broken behaviour **

Install

  1. pnpm add bulma
  2. pnpm add buefy-next-bulma-v1-scss
  3. where you import bulma after the import add buefy-next-bulma-v1-scss eg.
@use "bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-shadow: none
);

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


// Import buefy-next-bulma-v1-scss  
@import 'buefy-next-bulma-v1-scss';
  1. follow Bulma With Sass Example instructions

Local Development

  1. pnpm add bulma
  2. clone this repo
  3. pnpm link -g from this cloned repo (might eventually get on NPM)
  4. pnpm link -g buefy-next-bulma-v1-scss in your repo
  5. add bulma scripts to your package json in your repo
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
"start": "npm run build-bulma -- --watch"
  1. add a my-bulma-project.scss file with the following (rename it. i just want a consistant example)
@use "sass:color";

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-shadow: none
);

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


// Import buefy-next-bulma-v1-scss  
@import 'buefy-next-bulma-v1-scss';
  1. run pnpm build-bulma with the above import and it should spit out a good css file
  2. include that css file in your project

Bulma sass starting point here Bulma With Sass Example

DEV Notes

breakpoints are now include mx.breakpoint (mx is aliased - bulma does this) @include tablet becomes -> @include mx.breakpoint("tablet")

Color pairs no longer work. Instead i've used fn.bulmaFindLightColor($color); fn.bulmaFindDarkColor($color); fn.bulmaFindColorInvert($color);

Need to test above with tags or tooltip. maybe button