@omroepgelderland/bootstrap-theme

Bootstrap 5 theme voor de 2026 Omroep Gelderland huisstijl.

Dit pakket bevat een customized Bootstrap build met:

• GLD huisstijl kleuren
• Poppins lettertype (via fontsource)

Installatie

npm install @omroepgelderland/bootstrap-theme bootstrap

Gebruik

Gebruik compiled CSS

import "@omroepgelderland/bootstrap-theme";

Of expliciet:

import "@omroepgelderland/bootstrap-theme/css";

Gebruik SCSS

Als je SASS gebruikt in je project:

@use "@omroepgelderland/bootstrap-theme";

Of expliciet:

@use "@omroepgelderland/bootstrap-theme/scss";

Gebruik compiled CSS in SCSS

@use "@omroepgelderland/bootstrap-theme/css";

Gebruik SCSS tokens

GLD tokens en de standaard Bootstrap tokens worden geëxporteerd zodat je ze in je project kunt hergebruiken:

@use "@omroepgelderland/bootstrap-theme";
@use "@omroepgelderland/bootstrap-theme/bootstrap" as bs;
@use "@omroepgelderland/bootstrap-theme/tokens" as gld;

.example {
  color: bs.$success;
  background: gld.$kleur-corporate1;
}

Webpack

Gebruik de volgende opties in sass-loader.

Dit is alleen nodig als je SCSS importeert. Als je alleen de compiled CSS gebruikt is dit niet nodig.

import * as sass from "sass";

const config: webpack.Configuration = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: "sass-loader",
            options: {
              implementation: sass,
              sassOptions: {
                importers: [new sass.NodePackageImporter()],
              },
            },
          },
        ],
      },
    ],
  },
};

Ontwikkeling

Build CSS

./deploy_dev.sh

Pakket publiceren

./deploy.sh