Contrib.social

Switch to CSS variables for header and footer

Open on Drupal.org →
Created on 26 March 2024, 9 months ago
Updated 27 March 2024, 9 months ago

Problem/Motivation

In 🌱 [META] Ideas for version 2.x Active we are planning:

Check CSS variables and consider using/changing where it make sense and will not make too much problems with upgrading custom theme code.

However I am seeing more and more problems when styling (coloring) complex header and footer implementations and components. The problem is coming from too strong rules like for example in themes/bs_bootstrap/sass/layout/partials/_header.scss we have:

.page__header__top {
  @if $header-top-link-color != $header-link-color or $header-top-link-hover-color != $header-link-hover-color {
    a:not([class]), a.ext {
      @include style-link($header-top-link-color, $header-top-link-hover-color);
    }

    a.nav-link {
      @include style-nav-link($header-top-link-color, $header-top-link-hover-color);
    }
  }
}

This works fine for default cases, but as soon as you want to have variations like, light header for some site sections and dark header for some other, you will have a lot of problems overriding this rules.

Proposed resolution

We should switch to CSS variables aproach for this and more globally for all sections of a page. This could work something like this:

We have global link and text rule like

body {
  color: var(--body-color, #{$body-color});
}

a {
  color: var(--link-color, #{$link-color});

  // And other hover/focus/active color rules.
}

And then for a top region we would have

.page__header__top {
  --body-color: #{$header-top-color};
  --link-color: #{$header-top-link-color};
  ...
}

This is much easier to overide either with CSS rules that are defining color or that are overriding CSS variables.

Remaining tasks

  • Investigate how to name CSS variables. Check what Bootstrap 5 is doing and take their naming approach.
  • Not sure should this go to 1.x or 2.x version. We are lowering rules specificity so that can only help and custom rules should still work as expected. Test 1.x version first and if it will not break a lot of stuff or then it is better to push this to 1.x.
  • Implement.
✨ Feature request
Status

Active

Version

1.0

Component

BS Base

Created by

🇷🇸Serbia pivica

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024