---
title: Respond
---

p.
  A longer description about the respond mixin provided by this style guide.
  Let's clarify where to use these mixins, why and how. And show some fancy
  examples!

pre.hljs
  code.less
    :highlight
      .respond(@device, @rules);

dl
  dt @device
  dd Device on which the @rules should apply. See table below.
  dt @rules
  dd Rules to apply

table.table--docs
  caption Available devices
  tr
    th Device name
    th Media query
  tr
    td medium
    td min-width: 768px
  tr
    td large
    td min-width: 1024px
  tr
    td print
    td print


pre.hljs
  code.less
    :highlight
      .custom-responsive-block {

        background: red; // default

        .respond('medium', {

          background: green; // on medium and larger devices

        })

        .respond('large', {

          background: blue; // large devices

        })

      }

---
title: Respond
---

p.
  A longer description about the respond mixin provided by this style guide.
  Let's clarify where to use these mixins, why and how. And show some fancy
  examples!

pre.hljs
  code.less
    :highlight
      .respond(@device, @rules);

dl
  dt @device
  dd Device on which the @rules should apply. See table below.
  dt @rules
  dd Rules to apply

table.table--docs
  caption Available devices
  tr
    th Device name
    th Media query
  tr
    td medium
    td min-width: 768px
  tr
    td large
    td min-width: 1024px
  tr
    td print
    td print


pre.hljs
  code.less
    :highlight
      .custom-responsive-block {
        background: red; // default

        .respond('medium', {
          background: green; // on medium and larger devices
        })

        .respond('large', {
          background: blue; // large devices
        })
      }

Clean up code examples in docs
Clean up code examples in docs
