Zikomo Style Guide

Zikomo Style Guide

Source: src/postcss/Common/_colors.css, line 1

1 Structure

We use postcss with a gulp process to create and compile individual CSS files for each project we create.

The steps we take to do this are:

  1. create a file and name it according to the project.#, eg: zikomo-core.css
  2. import the post css files we want to include - by only including what the project needs, we can ensure the minimal possible css file size.
  3. Common classes - these are pre-created classes we can use individually or combined to help crteate the UI we want directly in out html / components
  4. widgets - these are more specific and detailed BEM classes that require a specific structure. Normally only one widget class (with optional modifier classes) will be used on a parent element, and will affect html tags contained within. See the widgets section for more details.
  5. Vendor classes - these are for third party plug ins, such as flickity, date pickers etc

Source: src/postcss/Common/_colors.css, line 35

1.1 Brand Variables (Required)

Every branded css file we create must contain a colors.css file in it's own directory.

For example, the color variables listed below are defined in the brands/zikomocore/color.css file.

Our brand css files must all have the same variables, with only the values changed to suit the brand's individual colors. We use these variables, eg var(--brand-1) instead of hex codes to define our colors in or css classes.

This way, when we compile our postcss, all common, widget and vendor classes that use these variables will inherit the correct colors, thus producing a fully branded css file.

Brand color guides can be found in the respective FIGMA files under the /Brands/ directory.

Source: src/postcss/Common/_colors.css, line 69

1.1.1 Brand 1

NOTE: These are examples of the variables set in the /brand/colors.css file. They should be used only in other css files when constructing classes, and not directly in our html.

  • #4F5165; Primary Brand

    var(--brand-1)

  • #8488A7;

    var(--brand-1--tint-1)

  • #A7AAC3;

    var(--brand-1--tint-2)

  • #3B3E5A;

    var(--brand-1--shade-1)

  • #1F2132;

    var(--brand-1--shade-2)

Source: src/postcss/Common/_colors.css, line 84

1.1.2 Brand 2

NOTE: These are examples of the variables set in the /brand/colors.css file. They should be used only in other css files when constructing classes, and not directly in our html.

  • #C1B098; Secondary Brand

    var(--brand-2) Brand 1

  • #DBCDBA;

    var(--brand-2--tint-1)

  • #E7DDD0;

    var(--brand-2--tint-2)

  • #B19B7C;

    var(--brand-2--shade-1)

  • #8A7353;

    var(--brand-2--shade-2)

Source: src/postcss/Common/_colors.css, line 98

1.1.3 Greyscale

NOTE: These are examples of the variables set in the /brand/colors.css file. They should be used only in other css files when constructing classes, and not directly in our html.

  • #ffffff; White

    var(--white) white

  • #ffffff; Grey 0

    var(--grey-0) grey 0

  • #F1F2F9; Grey 1

    var(--grey-1) grey 1

  • #E4E6F0; Grey 2

    var(--grey-2) grey 2

  • #D2D4E1; Grey 3

    var(--grey-3) grey 3

  • #C3C6D9; Grey 4

    var(--grey-4) grey 4

  • #A3A7BD; Grey 5

    var(--grey-5) grey 5

  • #8589A7; Grey 6

    var(--grey-6) grey 6

  • #5F637C; Grey 7

    var(--grey-7) grey 7

Source: src/postcss/Common/_colors.css, line 116

1.1.4 Success / Warning / Negative

NOTE: These are examples of the variables set in the /brand/colors.css file. They should be used only in other css files when constructing classes, and not directly in our html.

  • #0BBA7A; Success Default

    var(--positive)

  • #2CDD9C; Success Highlight

    var(--positive--tint-1)

  • #017C4F; Success Shade

    var(--positive--shade-1)

  • #E3BC85; Warning Default

    var(--warning)

  • #F4D3A5; Warning Highlight

    var(--warning--tint-1)

  • #C19049; Warning Shade

    var(--warning--shade-1)

  • #C42B35; Negative Default

    var(--negative)

  • #E9626B; Negative Highlight

    var(--negative--tint-1)

  • #A1141D; Negative Shade

    var(--negative--shade-1)

Source: src/postcss/Common/_colors.css, line 53

1.1.5 Text

NOTE: These are examples of the variables set in the /brand/colors.css file. They should be used only in other css files when constructing classes, and not directly in our html.

  • #4F5165; Primary Text

    var(--text-primary)

  • #1F2132; Secondary Text

    var(--text-secondary)

  • #D2D4E1; Light Text

    var(--text-light)

  • #C1B098; Default Hyperlink

    var(--text-link)

Source: src/postcss/Common/_colors.css, line 17

1.2 Adding / Extending Classes

Generally, our css repository should be expaned upon as and when we want to add, or add modifiers to classes.

  1. we should not alter pre-existing classes to do this
  2. instead we create either
    • a modifier class that will adjust the outcome in some way
    • a new class
    • a new css file that uses the same classes / class names, that we will import instead of the default version
  3. For example, i have a client that wants animated input classes. We then are faced with a decision on how to add such UI to our available classes
    • can we modify our existing common inputs?
    • do we need to create a new class entirely