CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Development
  2. UI kit
  3. Components

Variables

CivicTheme UI kit contains a large number of variables that modify all areas of the theme.

Variables allow for modification of:

  • Theme and component specific colors

  • Typography including line-height, font-size, font-weight and which fonts are used

  • Spacing

  • Grid system

Variables set within the CivicTheme UI kit have a corresponding variable with the !default flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. This allows consumer themes to override any variable's value without needing to change CivicTheme UI kit SASS.

Copy and paste variables as needed into your child theme, modify their values, and remove the !default flag. If a variable has already been assigned in your child theme, then it won’t be re-assigned by the default values in CivicTheme UI Kit.

Maps

Some of the variables, such as a list of breakpoints or list of colours, are implemented as SASS maps: this allows you to override and/or extend the value list. It also provides a safe mechanism to prevent breakages in case tomorrow CivicTheme introduces a change to a list of values, the solution in hand will support that.

Where are the variables located

Variables are split into 2 files:

  • _variables.base.scss - base variables that are used to calculate other variables' values.

  • _variables.components.scss - variables that control the look of components.

These are split into 2 files to allow changing base variables without the need to provide component variables in custom themes (e.g., to override primary colour in child theme and have it propagate to components).

Last updated 1 year ago

Was this helpful?