Weather

Weather

Layout Variations

See how this plugin adapts across different mashup views. Each view shows a single instance to demonstrate how the layout responds to available space.

Full View

77° Temperature ( 2:56 AM)
Temperature
80° Feels Like
Humidity
45% Humidity
Sunny Right Now
Today weather condition
Partly cloudy Feb 19
UV Index
High (8) UV
Temperature
70° Low
86° High
Tomorrow weather condition
Light Rain Feb 20
UV Index
Moderate (5) UV
Temperature
65° Low
79° High

Weather

Las Vegas 
<div class="layout layout--col gap--space-between">
  <div class="grid grid--cols-6">
    <div class="row row--center col--span-2 portrait:col--span-6 col--end">
      <img class="w--[22cqw] h--auto portrait:w--auto portrait:h--[40cqh] lg:w--[28cqw] lg:h--[28cqw] lg:portrait:w--auto lg:portrait:h--[33cqh]" src="https://trmnl.com/images/plugins/weather/wi-day-sunny.svg">
    </div>
    <div class="col col--span-2 portrait:col--span-3 col--end">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xxxlarge lg:value--giga" data-fit-value="true">77°</span>
          <span class="label">Temperature ( 2:56 AM)</span>
        </div>
      </div>
    </div>
    <div class="col col--span-2 portrait:col--span-3 col--end gap--medium">
      <div class="item">
        <div class="meta"></div>
        <div class="icon">
          <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="Temperature" src="https://trmnl.com/images/plugins/weather/wi-thermometer.svg">
        </div>
        <div class="content">
          <span class="value value--xsmall lg:value--large">80°</span>
          <span class="label">Feels Like</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="icon">
          <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="Humidity" src="https://trmnl.com/images/plugins/weather/wi-raindrops.svg">
        </div>
        <div class="content">
          <span class="value value--xsmall lg:value--large">45%</span>
          <span class="label">Humidity</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="icon">
          <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" src="https://trmnl.com/images/plugins/weather/wi-day-sunny.svg">
        </div>
        <div class="content">
          <span class="value value--xsmall lg:value--base">Sunny</span>
          <span class="label">Right Now</span>
        </div>
      </div>
    </div>
  </div>
  <div class="divider"></div>
  <div class="grid">
    <div class="col gap--large">
      <div class="grid">
        <div class="item col--span-3 grow">
          <div class="meta"></div>
          <div class="icon">
            <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="Today weather condition" src="https://trmnl.com/images/plugins/weather/wi-day-cloudy.svg">
          </div>
          <div class="content">
            <span class="value value--xsmall lg:value--base">Partly cloudy</span>
            <span class="label">Feb 19</span>
          </div>
        </div>
        <div class="item col--span-3 grow">
          <div class="meta"></div>
          <div class="icon portrait:hidden">
            <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="UV Index" src="https://trmnl.com/images/plugins/weather/wi-hot.svg">
          </div>
          <div class="content">
            <span class="value value--xsmall lg:value--base">High (8)</span>
            <span class="label">UV</span>
          </div>
        </div>
        <div class="row col--span-3 grow">
          <div class="item">
            <div class="meta"></div>
            <div class="icon portrait:hidden">
              <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="Temperature" src="https://trmnl.com/images/plugins/weather/wi-thermometer.svg">
            </div>
            <div class="content">
              <div class="flex flex--row gap--xlarge portrait:gap">
                <div class="content">
                  <span class="value value--xsmall lg:value--base">70°</span>
                  <span class="label">Low</span>
                </div>
                <div class="content">
                  <span class="value value--xsmall lg:value--base">86°</span>
                  <span class="label">High</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid">
        <div class="item col--span-3 grow">
          <div class="meta"></div>
          <div class="icon">
            <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="Tomorrow weather condition" src="https://trmnl.com/images/plugins/weather/wi-day-showers.svg">
          </div>
          <div class="content">
            <span class="value value--xsmall lg:value--base">Light Rain</span>
            <span class="label">Feb 20</span>
          </div>
        </div>
        <div class="item col--span-3 grow">
          <div class="meta"></div>
          <div class="icon portrait:hidden">
            <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="UV Index" src="https://trmnl.com/images/plugins/weather/wi-hot.svg">
          </div>
          <div class="content">
            <span class="value value--xsmall lg:value--base">Moderate (5)</span>
            <span class="label">UV</span>
          </div>
        </div>
        <div class="row col--span-3 grow">
          <div class="item">
            <div class="meta"></div>
            <div class="icon portrait:hidden">
              <img class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" alt="Temperature" src="https://trmnl.com/images/plugins/weather/wi-thermometer.svg">
            </div>
            <div class="content">
              <div class="flex flex--row gap--xlarge portrait:gap">
                <div class="content">
                  <span class="value value--xsmall lg:value--base">65°</span>
                  <span class="label">Low</span>
                </div>
                <div class="content">
                  <span class="value value--xsmall lg:value--base">79°</span>
                  <span class="label">High</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="title_bar">
  <img class="image" alt="" src="https://trmnl.com/images/plugins/weather--render.svg">
  <h1 class="title">Weather</h1>
  <span class="instance">Las Vegas</span>
</div>

Half Horizontal

Weather condition
77° Temperature 2:56 AM
Sunny Right Now
69.5° - 86.2° L/H
High (8) UV
Light Rain Tomorrow
65.2° - 79.1° L/H
Moderate (5) UV
Weather condition
77° 2:56 AM
Sunny Right Now
69.5° - 86.2° L/H
High (8) UV
Light Rain Tomorrow
65.2° - 79.1° L/H
Moderate (5) UV

2:56 AM

Las Vegas 
<div class="layout layout--col gap--space-between">
  <div class="grid grid--cols-4 portrait:hidden">
    <div class="row row--center lg:col">
      <img class="w--[22cqw] h--auto portrait:w--auto portrait:h--[20cqh] lg:w--[24cqw] lg:h--[24cqw] lg:portrait:w--auto lg:portrait:h--[18cqh]" alt="Weather condition" src="https://trmnl.com/images/plugins/weather/wi-day-sunny.svg">
    </div>
    <div class="col">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xxxlarge lg:value--giga" data-fit-value="true">77°</span>
          <span class="label">Temperature</span>
          <span class="label">2:56 AM</span>
        </div>
      </div>
    </div>
    <div class="col gap--medium">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--base">Sunny</span>
          <span class="label">Right Now</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small">69.5° - 86.2°</span>
          <span class="label">L/H</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small">High (8)</span>
          <span class="label">UV</span>
        </div>
      </div>
    </div>
    <div class="col gap--medium">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--base">Light Rain</span>
          <span class="label">Tomorrow</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small">65.2° - 79.1°</span>
          <span class="label">L/H</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small">Moderate (5)</span>
          <span class="label">UV</span>
        </div>
      </div>
    </div>
  </div>
  <div class="grid grid--cols-2 landscape:hidden">
    <div class="row row--center">
      <img class="w--[28cqw] h--[28cqw] portrait:w--auto portrait:h--[36cqh] lg:w--[38cqw] lg:h--[38cqw] lg:portrait:w--auto lg:portrait:h--[40cqh]" alt="Weather condition" src="https://trmnl.com/images/plugins/weather/wi-day-sunny.svg">
    </div>
    <div class="col">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xxxlarge portrait:value--xxlarge lg:value--giga lg:portrait:value--xxxlarge" data-fit-value="true">77°</span>
          <span class="label">2:56 AM</span>
        </div>
      </div>
    </div>
  </div>
  <div class="divider landscape:hidden"></div>
  <div class="grid grid--cols-2 portrait:gap landscape:hidden">
    <div class="col gap--medium">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small lg:value--base">Sunny</span>
          <span class="label">Right Now</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--base lg:portrait:value--small">69.5° - 86.2°</span>
          <span class="label">L/H</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--base lg:portrait:value--small">High (8)</span>
          <span class="label">UV</span>
        </div>
      </div>
    </div>
    <div class="col gap--medium">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small lg:value--base">Light Rain</span>
          <span class="label">Tomorrow</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--base lg:portrait:value--small">65.2° - 79.1°</span>
          <span class="label">L/H</span>
        </div>
      </div>
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--base lg:portrait:value--small">Moderate (5)</span>
          <span class="label">UV</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="title_bar">
  <img class="image" alt="" src="https://trmnl.com/images/plugins/weather--render.svg">
  <h1 class="title">2:56 AM</h1>
  <span class="instance">Las Vegas</span>
</div>

Half Vertical

Weather condition
77° Temperature 2:56 AM
Sunny Right Now
69.5° - 86.2° L/H
High (8) UV
Light Rain Tomorrow
65.2° - 79.1° L/H
Moderate (5) UV

2:56 AM

Las Vegas 
<div class="layout layout--col gap--space-between">
  <div class="grid grid--cols-2 portrait:grid--cols-1">
    <div class="row row--center">
      <img class="w--[46cqw] h--[46cqw] portrait:w--auto portrait:h--[22cqh] lg:w--[46cqw] lg:h--[46cqw] lg:portrait:w--auto lg:portrait:h--[32cqh]" alt="Weather condition" src="https://trmnl.com/images/plugins/weather/wi-day-sunny.svg">
    </div>
    <div class="col">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xxlarge lg:value--giga lg:portrait:value--mega" data-fit-value="true">77°</span>
          <span class="label">Temperature</span>
          <span class="label">2:56 AM</span>
        </div>
      </div>
    </div>
  </div>
  <div class="divider"></div>
  <div class="grid grid--cols-2 portrait:grid--cols-1 portrait:gap">
    <div class="col gap--medium">
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small lg:value--base">Sunny</span>
          <span class="label">Right Now</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small lg:portrait:value--small">69.5° - 86.2°</span>
          <span class="label">L/H</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small lg:portrait:value--small">High (8)</span>
          <span class="label">UV</span>
        </div>
      </div>
    </div>
    <div class="divider landscape:hidden"></div>
    <div class="col gap--medium">
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small lg:value--base">Light Rain</span>
          <span class="label">Tomorrow</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small lg:portrait:value--small">65.2° - 79.1°</span>
          <span class="label">L/H</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xsmall lg:value--small lg:portrait:value--small">Moderate (5)</span>
          <span class="label">UV</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="title_bar">
  <img class="image" alt="" src="https://trmnl.com/images/plugins/weather--render.svg">
  <h1 class="title">2:56 AM</h1>
  <span class="instance">Las Vegas</span>
</div>

Quadrant

Weather condition
77°
Sunny
69.5° - 86.2°
High (8)

2:56 AM

Las Vegas 
<div class="layout">
  <div class="grid grid--cols-2 portrait:grid--cols-1 gap--none lg:portrait:gap">
    <div class="col">
      <div class="row row--center">
        <img class="w--[46cqw] h--auto portrait:w--auto portrait:h--[50cqh] lg:w--[46cqw] lg:h--[46cqw] lg:portrait:w--auto lg:portrait:h--[46cqh]" alt="Weather condition" src="https://trmnl.com/images/plugins/weather/wi-day-sunny.svg">
      </div>
      <div class="hidden lg:flex lg:portrait:hidden h--full">
        <div class="item grow">
          <div class="meta"></div>
          <div class="content">
            <span class="value value--xsmall lg:value--base">Sunny</span>
            <span class="label hidden lg:visible">Right Now</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col gap lg:portrait:grid lg:portrait:grid--cols-2">
      <div class="item grow">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--large lg:value--xxxlarge" data-fit-value="true">77°</span>
          <span class="label hidden lg:visible">Temperature</span>
        </div>
      </div>
      <div class="visible lg:hidden lg:portrait:flex h--full">
        <div class="item grow">
          <div class="meta"></div>
          <div class="content">
            <span class="value value--xsmall lg:portrait:value--base">Sunny</span>
            <span class="label hidden lg:visible">Right Now</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xxsmall lg:value--small">69.5° - 86.2°</span>
          <span class="label hidden lg:visible">L/H</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--xxsmall lg:value--small">High (8)</span>
          <span class="label hidden lg:visible">UV</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="title_bar">
  <img class="image" alt="" src="https://trmnl.com/images/plugins/weather--render.svg">
  <h1 class="title">2:56 AM</h1>
  <span class="instance">Las Vegas</span>
</div>

Shared

This plugin uses a shared file that contains shared CSS styles and/or JavaScript logic used across all layout variations.

Lunar Calendar

Lunar Calendar

Lunar phases and moon cycle information shown across different view sizes

Previous
Examples Index