1 #flower Flower

The Flower component is a responsive flower, with one variation

  • The “tulip” variant

and the following states:

  • mobile (the default)
  • desktop (screen sizes larger than 60em)
  • hover/focus
  • is-pollinating (state triggered by JavaScript)
  • night-time skin (global state or “theme” in SMACSS)

To view all of these state variations, the user will need to change the viewport width and hover/focus over the component.

After looking at all the variants and states of the component, head over to the “Flower (deconstructed)” page to see the flower component’s parts (elements).

1.1 #flower.base Flower

The default styling of the flower component with its default HTML elements.

Examples
Default styling
.flower--tulip
The tulip variant. Just add this class to the same HTML element that has .flower.
.flower--responsive
The responsive variant includes a media query state to add “desktop” styling to the flower for large screens.
.flower--print
The print variant is a duplicate of the @media print state.
:hover
The hover state (same as the focus state.)
.flower--tulip:hover
Tulip variant with hover/focus state.
.is-pollinating
A state triggered when JavaScript adds this class. 
<div class="flower [modifier class]">
  <div class="flower__petals">
    <div class="flower__face"></div>
  </div>
  <div class="flower__stem">
    <div class="flower__leaves"></div>
  </div>
</div>

1.2 #flower.bed Flower (with bed)

The styling of the flower component with an extra .flower__bed HTML element wrapping the component.

Examples
Default styling
.flower--tulip
The tulip variant. 
<div class="flower__bed [modifier class]__bed">
  <div class="flower [modifier class]">
    <div class="flower__petals">
      <div class="flower__face"></div>
    </div>
    <div class="flower__stem">
      <div class="flower__leaves"></div>
    </div>
  </div>
</div>

1.3 #flower.skin-night Flower (at night)

If you want to affect all/most components on a page, you can add a skin/theme class to the body or html elements so that a component can react to its parent's classes.

In the night-time skin for the flower component, we add a is-night class to a parent HTML element of the component.

Example 
<div class="is-night">
  <div class="flower [modifier class]">
    <div class="flower__petals">
      <div class="flower__face"></div>
    </div>
    <div class="flower__stem">
      <div class="flower__leaves"></div>
    </div>
  </div>
</div>