Windy CSS styleguide

3 #components Components

Framework independent CSS components

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

3.1 #components.avatar .avatar

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

Simple avatar picture, whose size can be modified

    <img class="avatar size-m" src="...">
Examples
Default styling
.size-xxs
8px
.size-xs
10px
.size-s
12px
.size-m
14px
.size-l
16px
.size-xl
18px
Markup 
<img class="avatar [modifier class]" src="https://community.windy.com/assets/uploads/profile/603905-profileavatar.png">
Source: src/css/components/avatar.less, line 1

3.2 #components.avatar-wrapper .avatar-wrapper

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

Complete avatar picture, witch Premium and number badge, whose size can be modified.

    <div class="avatar-wrapper size-m">
        <img class="avatar" src="...">
        <div class="avatar-wrapper__badge">5</div>
        <div class="avatar-wrapper__premium-logo" />
    </div>
Examples
Default styling
Users username
5
.size-s
12px
Users username
5
.size-m
14px
Users username
5
.size-l
16px
Users username
5
Markup 
<div style="margin: 20px; display: block;">
            <div class="avatar-wrapper [modifier class]">
                <img class="avatar"
                    src="https://community.windy.com/assets/uploads/profile/603905-profileavatar.png"
                    alt="Users username" />
                <div class="avatar-wrapper__badge">5</div>
                <div class="avatar-wrapper__premium-logo" />
        </div>
        </div>
Source: src/css/components/avatar.less, line 27

3.3 #components.badge .badge

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

Small textual badge. Use our color, and size classes to set the color and size.

    <span class="badge fg-white bg-red size-xs">info</span>
Examples
Default styling
info
.size-xxs
8px
info
.size-xs
10px
info
.size-s
12px
info
.size-m
14px
info
Markup 
<span class="badge [modifier class] fg-white bg-red">info</span>
Source: src/css/components/badge.less, line 1

3.3.1 #components.badge.00 .flying-conditions

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

Special type of badge, used to display flying conditions.

    <span class="flying-conditions flying-conditions--V">info</span>
Examples
Default styling
.flying-conditions--U
Unknown conditions
.flying-conditions--V
VFR conditions
.flying-conditions--I
IFR conditions
.flying-conditions--M
MVFR conditions
.flying-conditions--L
LIFR conditions
Markup 
<span class="flying-conditions [modifier class] size-xs"></span>
Source: src/css/components/badge.less, line 29

3.4 #components.bbox .bordered-box

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

just bordered box

Example
This is hook element Lorem ipsum, lorem, ipsum
Markup 
<div class="bordered-box">This is hook element
             Lorem ipsum, lorem, ipsum</div>
Source: src/css/components/window.less, line 1

3.5 #components.button .button

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

Button inherits its size from parent element, or you can use our general .size- classes.

Use class button--loading to show loader or --variant, --border or --weight-bold modifiers.

You can combine button with our handy data-icon="" attribute. Works well with our .disabled or .boxshadow class.

    <div class="button button--variant-red size-m">Button</div>
Examples
Default styling
Button
Button
With icon
Bold
Disabled
With shadow
.button--border-red-light
light red border and transparent background
Button
Button
With icon
Bold
Disabled
With shadow
.button--border-white
white border and transparent background
Button
Button
With icon
Bold
Disabled
With shadow
.button--border-gray
gray background and transparent background
Button
Button
With icon
Bold
Disabled
With shadow
.button--variant-red
red background
Button
Button
With icon
Bold
Disabled
With shadow
.button--variant-red-light
light red background
Button
Button
With icon
Bold
Disabled
With shadow
.button--variant-orange
red background
Button
Button
With icon
Bold
Disabled
With shadow
.button--weight-bold
bold font weight
Button
Button
With icon
Bold
Disabled
With shadow
.size-xs
font size 10px
Button
Button
With icon
Bold
Disabled
With shadow
.size-s
font size 12px
Button
Button
With icon
Bold
Disabled
With shadow
.size-m
font size 14px
Button
Button
With icon
Bold
Disabled
With shadow
.size-l
font size 16px
Button
Button
With icon
Bold
Disabled
With shadow
.size-xl
font size 18px
Button
Button
With icon
Bold
Disabled
With shadow
Markup 
<div class="centered">
            <div class="button [modifier class]">Button</div>
            <div class="button [modifier class] button--loading">Button</div>
            <div class="button [modifier class]" data-icon="<!-- @echo icon-umbrella-small -->">With icon</div>
            <div class="button [modifier class] button--weight-bold">Bold</div>
            <div class="button [modifier class] disabled">Disabled</div>
            <div class="button [modifier class] boxshadow">With shadow</div>
        </div>
Source: src/css/components/button.less, line 1

3.6 #components.card .card

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

Card with a picture on a left.

<div class="card">
    <div class="card__wrapper">
        <div class="card__image" style="background-image:url('...')">
            <!-- place badges here -->
            <span class="badge fg-white size-xs bg-red">bdg 1</span>
            <span class="badge fg-white size-xs bg-orange">bdg 2</span>
        </div>
        <div class="card__content">
            <div class="card__title">
            Card Title
            </div>
            Content goes here
            <div class="card__buttons">
                <!-- Many .button classes if needed -->
                <div class="button">Button 1</div>
                <div class="button">Button 2</div>
            </div>
        </div>
    </div>
</div>
Examples
Default styling
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
.card--plain
remove padding
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
Markup 
    <section class="mt-10 mb-10 bg-white rounded-box">
        <div class="card [modifier class]" style="max-width: 420px;">
            <div class="card__wrapper">
                <div class="card__image" style="background-image:url('<!-- @echo IMG_GALLERY_PATH -->/howto/Screenshot-2019-08-16-at-16.52.29.png?w=300')">
                    <!-- palce badges here -->
                    <span class="badge fg-white size-xs bg-red">bdg 1</span>
                    <span class="badge fg-white size-xs bg-orange">bdg 2</span>
                </div>
                <div class="card__content">
                    <div class="card__title">
                    Card Title
                    </div>
                    Content goes here
                    <div class="card__buttons">
                        <!-- Many .button classes if needed -->
                        <div class="button">Button 1</div>
                        <div class="button">Button 2</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="mt-10 mb-10 fg-gray-light bg-gray-dark rounded-box dark-content">
        <div class="card [modifier class]" style="max-width: 420px;">
            <div class="card__wrapper">
                <div class="card__image" style="background-image:url('<!-- @echo IMG_GALLERY_PATH -->/howto/Screenshot-2019-08-16-at-16.52.29.png?w=300')">
                    <!-- palce badges here -->
                    <span class="badge fg-white size-xs bg-red">bdg 1</span>
                    <span class="badge fg-white size-xs bg-orange">bdg 2</span>
                </div>
                <div class="card__content">
                    <div class="card__title">
                    Card Title
                    </div>
                    Content goes here
                    <div class="card__buttons">
                        <!-- Many .button classes if needed -->
                        <div class="button button--variant-orange">Button 1</div>
                        <div class="button button--variant-orange">Button 2</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
Source: src/css/components/card.less, line 1

3.7 #components.checkbox .checkbox

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

Custom checkbox with associated text. By default is on.

    <div class="checkbox {{modifier_class}}">This is my custom checkbox</div>
Examples
Default styling
This is my custom checkbox
This is my custom checkbox
.checkbox--variant-red
red variant of checkbox (used only on light backgrounds)
This is my custom checkbox
This is my custom checkbox
.checkbox--variant-red-light
red light variant of checkbox (used only on light backgrounds)
This is my custom checkbox
This is my custom checkbox
.checkbox--variant-orange
orange variant of checkbox (used only on dark backgrounds)
This is my custom checkbox
This is my custom checkbox
.checkbox--after
renders checkbox behind the element
This is my custom checkbox
This is my custom checkbox
.checkbox--off
Checkbox is off
This is my custom checkbox
This is my custom checkbox
Markup 
    <div class="rounded-box m-15 bg-white fg-gray">
        <div class="checkbox [modifier class]">This is my custom checkbox</div>
    </div>
    <div class="rounded-box m-15 bg-gray-dark fg-gray-light">
        <div class="checkbox [modifier class]">This is my custom checkbox</div>
    </div>
Source: src/css/components/checkbox.less, line 1

3.7.1 #components.checkbox.play-pause .play-pause

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

Reusable play pause icon as a special variant of checkbox.

Examples
Default styling
.checkbox--off
Checkbox is off
Markup 
    <div class="rounded-box m-15 bg-gray-dark fg-gray-light">
        <div class="play-pause [modifier class] m-20 size-ultra"></div>
    </div>
Source: src/css/components/play-pause.less, line 1

3.8 #components.closingX .closing-x

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

TODO: Refactor as part of window / plugin classes Basic closing element, by default in rh corner of its parent element. By default it has display: none and must be made visible manually upon opening window or whatever.

Example
Markup 
<div class="closing-x" style="display: block; position: relative;"></div>
Source: src/css/components/closing-x.less, line 1

3.9 #components.ddmenu .drop-down-menu

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

White information window with rounded corners, absolutely positioned. Requires open or show class to become visible, and to set up width. closing-x element is optional.

Examples
Default styling

Closed:

  • 24h
  • 12h

In opened state:

  • 24h
  • 12h

.open-up
opens drowp down menu up

Closed:

  • 24h
  • 12h

In opened state:

  • 24h
  • 12h

Markup 
<p>Closed: <div class="drop-down-menu notap" data-content="24h">
                <ul class="animation">
                    <li data-do="set,24h" class="selected">24h</li>
                    <li data-do="set,12h">12h</li>
                </ul>
            </div></p>
        <p>In opened state:
        <div class="drop-down-menu [modifier class] notap opened" data-content="24h">
                <ul class="animation show">
                    <li data-do="set,24h" class="selected">24h</li>
                    <li data-do="set,12h">12h</li>
                </ul>
            </div></p>
Source: src/css/components/drop-down-menu.less, line 1

3.10 #components.form .form-group

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

Basic form group

Examples
Default styling
This is a note or error message
.size-xs
10px
This is a note or error message
.size-s
12px
This is a note or error message
.size-m
14px
This is a note or error message
.size-l
16px
This is a note or error message
.size-xl
18px
This is a note or error message
.size-xxl
20px
This is a note or error message
.size-xxxl
24px
This is a note or error message
.error
error
This is a note or error message
Markup 
<div class="form-group [modifier class]">
          <label>Name</label>
          <input type="text" placeholder="Name">
          <small>This is a note or error message</small>
         </div>
Source: src/css/components/forms.less, line 1

3.11 #components.menuitems .menu-items

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

Simple menu with icons that works well in dark-content also

<nav class="menu-items {{modifier_class}}">
    <a data-icon=",">Vzdálenost a plánování</a>
    <a data-icon="U">Widget na stránku</a>
    <a data-icon="">Sledování hurikánů</a>
</nav>
Examples
Default styling
.size-s
12px
.size-m
14px
.size-l
16px
.size-xl
18px
.size-xxl
20px
Markup 
    <section class="mt-10 mb-10 bg-white rounded-box">
        <nav class="menu-items [modifier class]">
            <a data-icon=",">Vzdálenost a plánování</a>
            <a data-icon="U">Widget na stránku</a>
            <a data-icon="">Sledování hurikánů</a>
        </nav>
    </section>
    <section class="mt-10 mb-10 fg-gray-light bg-gray-dark rounded-box dark-content">
        <nav class="menu-items [modifier class]">
            <a data-icon=",">Vzdálenost a plánování</a>
            <a data-icon="U">Widget na stránku</a>
            <a data-icon="">Sledování hurikánů</a>
        </nav>
    </section>
Source: src/css/components/menu.less, line 1

3.12 #components.rbox .rounded-box

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

Just box with rounded square

Examples
Default styling
hello world. This is just box with rounded square. Just box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded square
.size-xs
10px
hello world. This is just box with rounded square. Just box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded square
.size-s
11px
hello world. This is just box with rounded square. Just box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded square
.size-l
16px
hello world. This is just box with rounded square. Just box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded square
Markup 
<div class="rounded-box bg-red fg-white size-xs [modifier class]">
             hello world. This is just box with rounded square. Just box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded squareJust box with rounded square</div>
Source: src/css/components/rounded-box.less, line 8

3.13 #components.scroll Scrolling

Customm scrollbars

Source: src/css/components/scroll.less, line 1

3.13.1 #components.scroll.custom-scrollbar .custom-scrollbar

Styles vertical scrollbar so it has decent and uniform look on all browsers.

Source: src/css/components/scroll.less, line 33

3.13.2 #components.scroll.horizontal .horizontal-scroll

Implements horizontal scrolling with hidden scrollbar, that should be used for touch devices, where some content exceeds width of a device.

Source: src/css/components/scroll.less, line 10

3.14 #components.sinput .search-input

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

Unified search input with cancel button, so far prepared only for dark mode.

    <div class="search-input">
        <input type="text" placeholder="Search something..." />
        <div class="search-input__cancel fg-white">Cancel search</div>
    </div>
Example
Cancel search
Markup 
<div class="search-input rounded-box bg-gray-dark" style="max-width: 400px;">
            <input type="text" placeholder="Search something..." />
            <div class="search-input__cancel fg-white">Cancel search</div>
        </div>
Source: src/css/components/search-input.less, line 1

3.15 #components.switch .switch

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

UI switch component.

To change background of non selected items use .bg- class.

Use our handy .size- classes to change the size of the switch.

    <nav class="switch switch--variant-red-light size-s">
        <a class="switch__item selected">first option</a>
        <a class="switch__item">second option</a>
        <a class="switch__item">third option</a>
    </nav>
Examples
Default styling
Light mode:
Dark mode:
.switch--compact
Compact version with smaller paddings
Light mode:
Dark mode:
.switch--nowrap
Disables text wrapping in switch__item(s)
Light mode:
Dark mode:
.switch--wrap
Enables to wrap items in multiple lines
Light mode:
Dark mode:
.switch--variant-uiswitch
Just handy shortcut to style main UI switches on map, with .fg-yellow and .bg-transparent
Light mode:
Dark mode:
.switch--variant-red-light
Red light version of selected item for less prominent switches on dark surfaces
Light mode:
Dark mode:
.switch--variant-red
Red version of selected item for most prominent switches on light surfaces
Light mode:
Dark mode:
.switch--stretch
Stretches items to fill the whole width of the switch
Light mode:
Dark mode:
Markup 
     <section class="mt-10 mb-10 bg-white rounded-box">
        Light mode:
        <div class="m-20 mb-40">
            <nav class="switch [modifier class] fg-gray-dark bg-gray-light">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
        <div class="m-20 mb-40">
            <nav class="switch [modifier class] fg-gray">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
    </section>
    <section class="mt-10 mb-10 fg-gray-light bg-gray-dark rounded-box dark-content">
        Dark mode:
        <div class="m-20 mb-40">
            <nav class="switch [modifier class] bg-gray">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
        <div class="m-20 mb-40">
            <nav class="switch [modifier class]">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
    </section>
Source: src/css/components/switch.less, line 1

3.15.1 #components.switch.01 Switch sizes

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

Use our handy .size- classes to change size of the switch.

Examples
Default styling
.size-xs
10px
.size-s
11px
.size-m
14px
.size-l
16px
.size-xl
18px
Markup 
    <nav class="switch switch--color-red-light [modifier class] fg-gray-dark bg-gray-light">
        <a class="switch__item selected">first option</a>
        <a class="switch__item">second option</a>
        <a class="switch__item">third option</a>
    </nav>
Source: src/css/components/switch.less, line 166

3.15.2 #components.switch.3 .switch-mobile-wrapper

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

Wraps .switch on mobileTablet device to fill 100% of width with possibillity of horizontal scroll, if size of the switch exceeds the width of the screen.

<div class="switch-mobile-wrapper">
    <nav class="switch switch--variant-uiswitch">
        <a class="switch__item selected">first option</a>
        <a class="switch__item">second option</a>
        <a class="switch__item">third option</a>
    </nav>
</div>
Example
Markup 
    <section id="device-mobile">
        <div class="switch-mobile-wrapper">
              <nav class="switch switch--variant-uiswitch">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
    </section>
Source: src/css/components/switch-mobile-wrapper.less, line 1

3.16 #components.tooltip [data-tooltip]

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

CSS only on hover tooltip (works on desktop only).

Use data-tooltip="text" or data-tooltip-src="PHRASE" for untranslated phrase.

By default displays tooltip bellow parent component, otherwise use .tooltip-- positioning classes.

Tooltip uses ::after pseudo class so it can be combined with data-icon

<span class="btn clickable tooltip--left"
        data-tooltip="This is tooltip">Hover over me</span>
Examples
Default styling
Hover over me
:hover
Default position of tooltip
Hover over me
:hover.tooltip--left
Left position of tooltip
Hover over me
:hover.tooltip--right
Upper position of tooltip
Hover over me
:hover.tooltip--up
Upper position of tooltip
Hover over me
Markup 
<div class="centered">
    <span class="btn clickable [modifier class]"
        data-tooltip="This is tooltip">Hover over me</span>
</div>
Source: src/css/components/data-tooltip.less, line 1

3.17 #components.window .window

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

White information window with rounded corners, absolutely positioned. Requires open or show class to become visible, and to set up width. closing-x element is optional.

Examples
Default styling
This is hook element
Lorem ipsum, lorem, ipsum
.transparent-window
transparent window
This is hook element
Lorem ipsum, lorem, ipsum
.rh-bottom-pin
pin to bottom right corner (applied only to .transparent-window)
This is hook element
Lorem ipsum, lorem, ipsum
Markup 
<div class="btn" style="margin: 100px 0;">This is hook element
             <div class="window open">
             <div class="closing-x"></div>
             Lorem ipsum, lorem, ipsum</div>
         </div>
Source: src/css/components/window.less, line 18

3.18 #components.window2 .drop-down-window

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

White information widnow with rounded corners, relativelly positioned. Requires open class to become visible, and to set up width.

Examples
Default styling
This is hook element
Lorem ipsum, lorem, ipsum
.down
position of opening elemnt is down
This is hook element
Lorem ipsum, lorem, ipsum
.right
position is opening pin rigth
This is hook element
Lorem ipsum, lorem, ipsum
.left
position of opening element is left
This is hook element
Lorem ipsum, lorem, ipsum
Markup 
<div class="btn" style="margin: 100px 0;">This is hook element
             <div class="drop-down-window [modifier class] open">
             <div class="closing-x"></div>
             Lorem ipsum, lorem, ipsum</div>
         </div>
Source: src/css/components/window.less, line 80