extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'meters'
  - var parent = 'experimentals'
  - var title = 'Meters - Experimentals - Spectre.css CSS Framework'
  - var description = 'Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('meters', 'Meters')
    include ../_layout/_ad-g.pug

    p Meters represent the value within the known range.

    .docs-demo.columns
      .column.col-3.col-xs-12
        meter.meter(value="20" min="0" max="100")
      .column.col-3.col-xs-12
        meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
      .column.col-3.col-xs-12
        meter.meter(value="85" min="0" low="30" high="80" max="100")
      .column.col-3.col-xs-12
        meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- Meter is green when low < value < high -->
          <meter class="meter" value="20" min="0" max="100"></meter>
          <meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
          <!-- Meter is yellow when value < low  or high < value -->
          <meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
          <!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
          <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug