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 :smile: )

   ---

   @StefanS-O, @gerbrent , what do you guys think about this? It might be an overkill for simple site like JB :shrug: . 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 ; )

[gerbrent]

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

That would be amazing! And... also the current branding shims - the rocket instead of LA logo.. - are good-for-now implementations. If you spot any inconsistencies or opportunities please let us know!

Also: THANK YOU @reesericci !

[reesericci]

@gerbrent I need vector (svg) copies of the rocket logo to replace the Cloud & Mic.

[timlepes]

I notice that the branding for Office Hours is starkly different than all the other shows on the website. Predominantly red background as opposed to the dark grey/black of the other show tiles. Also, no corner badge. Is this issue an appropriate place to bring this up? Or should I open a separate issue? I think that when Office Hours gets re-named, the branding should include background and styling that is similar to the other "show tiles" displayed on the home page and elsewhere. I chose to comment here because I noticed @reesericci asking @gerbrent for svg's of the rocket to modify the tiles and remove the cloud & microphone, which is related to the show tiles. (PS the rocket change looks to be already implemented on the live site... nice!)

[elreydetoda]

linking so we can reference if need be (src)