Contrib.social

Improve Bootstrap Barrio Colour scheme

Open on Drupal.org →
Created on 8 November 2023, 11 months ago
Updated 15 April 2024, 6 months ago

I am using bootstrap barrio and bootstrap_sass for sub-theme and on the whole I think it does a reasonable job. That said I would like like to see some improvements in the implementation around colours as I think this is important for any site.

I have been recently reading Brad Frost's article on atomic design and there he talks about the benefit for companies to implement a style guide or system as a prerequisite to a new site build or redesign. He also talks about Bootstrap and what a popular framework it is, but also says that companies are looking for their own mini bootstrap framework. This is something I agree with, and see Bootstrap Barrio being able to deliver on this.

Here is a very simple example of a style guide I would like to see as part of the theme implementation:
https://atomicdesign.bradfrost.com/images/content/style-tiles.jpg

Here is how bootswatch does it
https://bootswatch.com/cerulean/

In Bootstrap Barrio, there is the option to use the colour picker etc to pick there custom colours, however I am not sure what value this really adds?

My issues with the current implementation are:

1. The colour scheme implementation is confusing. It seems to take some variables from bootstrap but then ignore others. Bootstrap uses the following in its colour scheme

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

also

All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

So from we have 10 like this:

$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;

and 14 like this i.e. with $black, $white, $gray-600 and $gray-800

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "black": $black,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800);

In bootstrap variables we have this set as default:

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

This is also added for all colour variations and uses a sass map function e.g.

// fusv-disable
$blue-100: tint-color($blue, 80%);
$blue-200: tint-color($blue, 60%);
$blue-300: tint-color($blue, 40%);
$blue-400: tint-color($blue, 20%);
$blue-500: $blue;
$blue-600: shade-color($blue, 20%);
$blue-700: shade-color($blue, 40%);
$blue-800: shade-color($blue, 60%);
$blue-900: shade-color($blue, 80%);

and

$blues: (
  "blue-100": $blue-100,
  "blue-200": $blue-200,
  "blue-300": $blue-300,
  "blue-400": $blue-400,
  "blue-500": $blue-500,
  "blue-600": $blue-600,
  "blue-700": $blue-700,
  "blue-800": $blue-800,
  "blue-900": $blue-900
);

It's also worth noting that we can define and add custom colours like this:

$custom-colors: (
  "custom-color": #712cf9
);
$theme-colors: map-merge($theme-colors, $custom-colors);

However in Bootstrap Barrio we only seem to have primary and secondary that have been implemented?!

I know, Bootstrap is a little more complicated as it now has support (5.3) for colour modes including both dark and light modes. In fact there are a myriad of different options that can be used to configure how bootstrap runs. Ideally it would be nice to expose some of these options that are used to compile bootstrap, as these are currently hidden away, but that is probably for a separate discussion.

2. Support for displaying colour mode pallets (dark/light etc) and making support for Bootswatch optional

Writing this article I now realise that the current implementation is dependent on Bootswatch, so perhaps I need to do a bit more background on that. Certainly I see Bootswatch also supports dark and light mode for it's themes. It would also be good to have a way to include these locally rather than depending on a cdn. Also it shoud make it clear that this is an option to enable Bootswatch theme with a link to documentation.

ok looking at how Bootswatch works I can see it is contained within 3 files namely 

// Your variable overrides go here, e.g.:
// $h1-font-size: 3rem;

@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";

https://www.npmjs.com/package/bootswatch

3. Add support for viewing components similar to Bootswatch. e.g. https://bootswatch.com/pulse/ I realise that admin theme is different from front end theme in Drupal which complicates things but I would love to have an ability to preview all bootstrap/drupal twig components from a single page or section even with some dummy content. Perhaps could use a similar approach to this d7 module? https://www.drupal.org/project/pagepreview → or perhaps adding in a controller but not sure if that extends to themes? https://drupal.stackexchange.com/questions/300940/display-node-content-w...

Here is the markup for cerulean bootstrap open source theme. Basically I think we need the Drupal implemented versions of this on a theme preview page.
https://github.com/thomaspark/bootswatch/blob/v5/docs/cerulean/index.html

✨ Feature request
Status

Active

Version

5.5

Component

Code

Created by

🇬🇧United Kingdom 2dareis2do

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024