style/branding guidelines for JB

[gerbrent]

@reesericci asks:

is there any style/branding guidelines for JB?
Also if it doesn't exist currently, I'd be happy to work on one

[kbondarev]

In term of styles/colors for the site. Currently we have this SASS variables file some of them override the Bulma variable others are new custom variables.

Since we are using Bulma, I think it would be dope if we just override all the variables they have to basically create a "theme" with the color scheme and styles we want for the website. Then every time people would use the Bulma elements and components they would match that theme/color scheme.

I was working on adding the webln-v4v form yesterday and was trying to style it (all in here) using the Bulma variable as much (color of button, color on hover event, text in button, fonts, etc., but I still had to customize a lot of things.

---

https://bulma.io/documentation/customize/variables/

1. I think first step might be to create variables for some JB colors that we would want to use: naming them like this: $jb_blue, $jb_green
2. Then use these to override the bulma primary colors using the $jb_* colors, and set some other variable (listed in 2 in the link above):

$primary: $turquoise
$link: $blue
$info: $cyan
$success: $green
$warning: $yellow
$danger: $red
$dark: $grey-darker
$text: $grey-dark
$background: $white-ter: a general background color
$link: $blue: the links use the primary color
$family-primary: $family-sans-serif: the primary font family is the sans-serif one

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, 
$dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, 
$danger-dark)), $custom-colors)
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

For example, the primary would be like this:

$primary: $jb_blue

I believe these would propagate to most of the bluma components and elements. This way everyone could just use the bulma components as is without creating custom CSS/SASS rules every time (of course there are always exceptions 😄 )

---

@StefanS-O, @gerbrent , what do you guys think about this?
It might be an overkill for simple site like JB 🤷 . But seems like it would help keep the style of things consistent across all the contributions.

[StefanS-O]

In term of styles/colors for the site. Currently we have this SASS variables file some of them override the Bulma variable others are new custom variables.

Since we are using Bulma, I think it would be dope if we just override all the variables they have to basically create a "theme" with the color scheme and styles we want for the website. Then every time people would use the Bulma elements and components they would match that theme/color scheme.

I was working on adding the webln-v4v form yesterday and was trying to style it (all in here) using the Bulma variable as much (color of button, color on hover event, text in button, fonts, etc., but I still had to customize a lot of things.

https://bulma.io/documentation/customize/variables/

1. I think first step might be to create variables for some JB colors that we would want to use: naming them like this: $jb_blue, $jb_green
2. Then use these to override the bulma primary colors using the $jb_* colors, and set some other variable (listed in 2 in the link above):

$primary: $turquoise
$link: $blue
$info: $cyan
$success: $green
$warning: $yellow
$danger: $red
$dark: $grey-darker
$text: $grey-dark
$background: $white-ter: a general background color
$link: $blue: the links use the primary color
$family-primary: $family-sans-serif: the primary font family is the sans-serif one

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, 
$dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, 
$danger-dark)), $custom-colors)
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

For example, the primary would be like this:

$primary: $jb_blue

I believe these would propagate to most of the bluma components and elements. This way everyone could just use the bulma components as is without creating custom CSS/SASS rules every time (of course there are always exceptions 😄 )

@StefanS-O, @gerbrent , what do you guys think about this? It might be an overkill for simple site like JB 🤷 . But seems like it would help keep the style of things consistent across all the contributions.

yeah that exactly was my plan :D
im am unsure if the layer between is needed with the jb_vars and not directly configure the Bulma default vars

[kbondarev]

yeah that exactly was my plan :D
im am unsure if the layer between is needed with the jb_vars and not directly configure the Bulma default vars

Same, most likely it would be a combo of a little bit of both.

[reesericci]

While a set of CSS vars are helpful for the website it doesn't encompass everything needed to comprise a complete set of branding guidelines.

[gerbrent]

I've linked our latest and clearly outdated style guide in Matrix, for reference. Preference to not share it here for now......
If you'd like a copy, please get in touch with me.

[reesericci]

@gerbrent Should I go ahead and create a new copy of those style guides and update them to remove LA branding etc?

[kbondarev]

@gerbrent I've used those colours (:canada:) to style the Podverse player (already merged and deployed)

I will try and customize the Bulma variables with these colours right now and apply to to the entire site (won't merge this one before approval)

[gerbrent]

@gerbrent I've used those colours (canada) to style the Podverse player (already merged and deployed)

I LOVED seeing these Podverse changes today... wonderful colours (🇨🇦 ) indeed ; )