Windy CSS styleguide

2 #colors Colors 🌈

Minimize number of colors used. Use only colors defined here, and if not possible use lighten() or darken() version of some color we use.

Whenever possible use .fg-color and .bg-color classes to apply colors to in your code to increase maintainability and readability of your code

Source: src/css/colors/index.less, line 1

2.1 #colors.00 Allowed combinations 👈🏻

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Following combinations of fg & bg colors are allowed.

Example
.bg-white
.fg-gray .fg-black .fg-red .fg-red-light .fg-error .fg-ok
.bg-gray-light
.fg-gray .fg-black .fg-red .fg-red-light .fg-error .fg-ok
.bg-transparent
.fg-white .fg-yellow
.bg-gray
.fg-white .fg-gray-light .fg-orange-light
.bg-gray-dark
.fg-white .fg-gray-light .fg-orange-light
.bg-red
.fg-white
.bg-red-light
.fg-white
.bg-orange
.fg-white
.bg-ok
.fg-white
.bg-error
.fg-white
Markup 
    <div class="rounded-box m-15 size-l bg-white">
        <div class="badge fg-white bg-gray size-m boxshadow">.bg-white</div>
        <span class="fg-gray">.fg-gray</span>
        <span class="fg-black">.fg-black</span>
        <span class="fg-red">.fg-red</span>
        <span class="fg-red-light">.fg-red-light</span>
        <span class="fg-error">.fg-error</span>
        <span class="fg-ok">.fg-ok</span>
    </div>
    <div class="rounded-box m-15 size-l bg-gray-light">
        <div class="badge fg-white bg-gray size-m boxshadow">.bg-gray-light</div>
        <span class="fg-gray">.fg-gray</span>
        <span class="fg-black">.fg-black</span>
        <span class="fg-red">.fg-red</span>
        <span class="fg-red-light">.fg-red-light</span>
        <span class="fg-error">.fg-error</span>
        <span class="fg-ok">.fg-ok</span>
    </div>
    <div class="rounded-box m-15 size-l bg-transparent">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-transparent</div>
        <span class="fg-white">.fg-white</span>
        <span class="fg-yellow">.fg-yellow</span>
    </div>
    <div class="rounded-box m-15 size-l bg-gray">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-gray</div>
        <span class="fg-white">.fg-white</span>
        <span class="fg-gray-light">.fg-gray-light</span>
        <span class="fg-orange-light">.fg-orange-light</span>
    </div>
    <div class="rounded-box m-15 size-l bg-gray-dark">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-gray-dark</div>
        <span class="fg-white">.fg-white</span>
        <span class="fg-gray-light">.fg-gray-light</span>
        <span class="fg-orange-light">.fg-orange-light</span>
    </div>
    <div class="rounded-box m-15 size-l bg-red">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-red</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-red-light">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-red-light</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-orange">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-orange</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-ok">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-ok</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-error">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-error</div>
        <span class="fg-white">.fg-white</span>
    </div>
Source: src/css/colors/index.less, line 16

2.2 #colors.1 Primary

Primary Windy colors

  • @color-red #9d0300

    Primary Windy red color, used as bg or fg color

  • @color-red-light #946051

    Lighten version of our primary red used as fg color

  • @color-white #f8f8f8

    Dimmed version of white, used only as bg

  • @color-orange #d49500

    Orange color that used as bg of UI elements in dark content

  • @color-orange-light #ffe3a1

    Light version of orange, used for icons, borders in dark content

  • @color-yellow #fff3e1

    Yellow, used as text color on icons and text on overlaying map (to be distinguished from white city labels)

  • @color-transparent rgba(68, 65, 65, 0.84)

    Transparent gray used as bg for small UI controls overlying map

Source: src/css/colors/color-definitions.less, line 1

2.3 #colors.2 Grays

Neutral gray colors

  • @color-gray #6b6b6b

    Basic gray color, used as fg or bg

  • @color-gray-dark #4d4d4d

    Darker version of gray used as default bg for dark content

  • @color-gray-light #e5e5e5

    Very light gray used as bg or fg for text in dark content

Source: src/css/colors/color-definitions.less, line 29

2.4 #colors.3 Status colors

Use only for errors and ok messages

  • @color-ok #026f00

    All ok

  • @color-error #c42f2f

    Error

Source: src/css/colors/color-definitions.less, line 46

2.5 #colors.4 .fg-color classes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Foreground color classes, basically shorthand for color: @xyz. Names are usually inherited from LESS variables naming convention (but not always).

Examples
Default styling
Hello world
Hello world
.fg-red
Primary Windy red color
Hello world
Hello world
.fg-red-light
Lighten version of our primary red used as fg color
Hello world
Hello world
.fg-yellow
Color class
Hello world
Hello world
.fg-error
Errors
Hello world
Hello world
.fg-ok
ok messages
Hello world
Hello world
.fg-gray
gray text
Hello world
Hello world
.fg-gray-dark
dark gray text
Hello world
Hello world
.fg-gray-light
lGray text
Hello world
Hello world
.fg-black
Black text
Hello world
Hello world
.fg-white
Pure white
Hello world
Hello world
.fg-orange-light
Light version of orange, used for icons, borders in dark content
Hello world
Hello world
Markup 
<div class="centered">
            <div class="rounded-box bg-white [modifier class]">Hello world</div>
            <div class="rounded-box bg-gray-dark [modifier class]">Hello world</div>
        </div>
Source: src/css/colors/color-classes.less, line 1

2.6 #colors.5 .bg-color classes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Shorthand for background-color: xyz. Names are usually inherited from LESS variables naming convention (but not always).

Examples
Default styling
Hello world
.bg-red
Red background
Hello world
.bg-red-light
Light red background
Hello world
.bg-transparent
Transparent gray for UI backgrounds
Hello world
.bg-orange
Color class
Hello world
.bg-gray
Background version of gray
Hello world
.bg-gray-dark
Darker version of gray used as default bg for dark content
Hello world
.bg-gray-light
Light version gray
Hello world
.bg-error
Errors
Hello world
.bg-ok
Ok messages
Hello world
.bg-white
White bg
Hello world
.bg-orange-light
Light version of orange, used for icons, borders in dark content
Hello world
Markup 
<div class="rounded-box [modifier class] fg-black">Hello world</div>
Source: src/css/colors/color-classes.less, line 73