Styles and Template

Working with Styles for the Template

The styles for the consumer templates use: basic static SASS (general for all sites) AND variable SASS using the style options set in Designer.

These styles are written in the admin repo using SCSS. These get compiled into one CSS file which is sent via the API to the HungerRush hosted production site when published.

These SCSS files can be found in the src/store/generateSCSS directory.

To update styles:

It is important to note that in order to see any style changes made in the generators the user will need to regenerate their site styles by making a configuration change in the Designer Site Editor.

  • Get the preflight theme options from graphQL import { ThemeOptions } from 'src/graphql/generated/graphql';

  • Destructure the bits we need for that component

    const {
  theme: {
    template: {
      colors: siteColors,
      components: {
        footer: {
          innerLayout,
          styles,
          styles: { colors: footerColors },
        },
      },
    },
  },
  content: { copyright },
} = preflight;

  • We can use available helpers to use the right settings, for example the colors

    const { foreground, background, primary, secondary } = getComponentColors(
  siteColors,
  footerColors,
);

  • Or to check if the component is set to darkMode

    const darkBg = styles.dark && !styles.transparent;

  • These objects use the values received from the preflight and assign a CSS value to it (See how this is used below)

    const textAlign = {
  LEFT_ALIGN: 'left',
  CENTER_ALIGN: 'center',
  RIGHT_ALIGN: 'right',
};

  • This CSS property uses the value that comes from innerLayout via the textAlign object set above

    #footer {
  ...
  text-align: ${textAlign[innerLayout]};
  ...
}

  • We also use “inline” helpers within the SASS, for example to add background-color and color values depending on the transparent, dark, and color settings of the component

    #footer {
  ...
  ${bgColor(darkBg, styles.transparent, background, foreground)}
  ...
}

or to set a border property only when the menu layout is set to “Full width list” or “Two column list”

.menugroup {
  ...
  ${
    innerLayout === 'FULL_WIDTH_LIST' || innerLayout === 'TWO_COLUMN_LIST' ?
      `border: 1px solid;
       border-color: ${darkBg ? background : foreground};
      `
    :
      ''
  }
  ...