Above¶

Description: An above mixin can be created in a medias Object with an Object key that matches +<query:helper | raw:value>.

ctr('.test', {
  width: 200px
  medias: {
    // query:helper
    '+sm': {
      width: 100px
    }
    // raw:value
    '+1050px': {
      width: 300px
    }
  }
})

.test:
  width: 200px
  medias:
    # query:helper
    +sm:
      width: 100px
    # raw:value
    +1050px:
      width: 300px

.test {
  width: 200px;
}
@media (min-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 1050px) {
  .test {
    width: 300px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    // query:helper
    '+sm': {
      width: 100px
    }
    // raw:value
    '+1050px': {
      width: 300px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 1050px) {
  .test {
    width: 300px;
  }
}

.test:
  width: 200px
  medias:
    # query:helper
    +sm:
      width: 100px
    # raw:value
    +1050px:
      width: 300px

Notes

• Key must be a String
• +<raw:value> === (min-width: <raw:value>))
• +<query:helper> === (min-width: <query:helper>))

At¶

Description: An at mixin can be created in a medias Object with an Object key that matches <query:helper>.

ctr('.test', {
  width: 200px
  medias: {
    'sm': {
      width: 100px
    }
    'lg': {
      width: 300px
    }
  }
})

.test:
  width: 200px
  medias:
    sm:
      width: 100px
    lg:
      width: 300px

.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test {
    width: 300px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    'sm': {
      width: 100px
    }
    'lg': {
      width: 300px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test {
    width: 300px;
  }
}

.test:
  width: 200px
  medias:
    sm:
      width: 100px
    lg:
      width: 300px

Notes

• Key does not have to be a String, but it should be
• <query:helper> === (min-width: <query:helper-prv>) and (max-width: <query:helper>)

Below¶

Description: A below mixin can be created in a medias Object with an Object key that matches -<query:helper | raw:value>.

ctr('.test', {
  height: 200px
  medias: {
    '-sm': {
      width: 100px
    }
    '-1050px': {
      width: 300px
    }
  }
})

.test:
  height: 200px
  medias:
    -sm:
      width: 100px
    -1050px:
      width: 300px

.test {
  height: 200px;
}
@media (max-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (max-width: 1050px) {
  .test {
    width: 300px;
  }
}

ctr('.test', {
  height: 200px
  medias: {
    '-sm': {
      width: 100px
    }
    '-1050px': {
      width: 300px
    }
  }
})

.test {
  height: 200px;
}
@media (max-width: 600px) {
  .test {
    width: 100px;
  }
}
@media (max-width: 1050px) {
  .test {
    width: 300px;
  }
}

.test:
  height: 200px
  medias:
    -sm:
      width: 100px
    -1050px:
      width: 300px

Notes

• Key must be a String
• -<raw:value> === (max-width: <raw:value>)
• -<query:helper> === (max-width: <query:helper>)

Between¶

Description: A between mixin can be created in a medias Object with an Object key that matches <query:helper:min | raw:value:min>-<query:helper:max | raw:value:max>.

ctr('.test', {
  height: 200px
  medias: {
    // query:helper
    'xs-md': {
      width: 100px
    }
    // raw:value
    '1050px-1800px': {
      width: 300px
    }
  }
})

.test:
  height: 200px
  medias:
    # query:helper
    xs-md:
      width: 100px
    # raw:value
    1050px-1800px:
      width: 300px

.test {
  height: 200px;
}
@media (min-width: 400px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 1050px) and (max-width: 1800px) {
  .test {
    width: 300px;
  }
}

ctr('.test', {
  height: 200px
  medias: {
    // query:helper
    'xs-md': {
      width: 100px
    }
    // raw:value
    '1050px-1800px': {
      width: 300px
    }
  }
})

.test {
  height: 200px;
}
@media (min-width: 400px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}
@media (min-width: 1050px) and (max-width: 1800px) {
  .test {
    width: 300px;
  }
}

.test:
  height: 200px
  medias:
    # query:helper
    xs-md:
      width: 100px
    # raw:value
    1050px-1800px:
      width: 300px

Notes

• Key does not have to be a String, but it should be
• <raw:value:min>-<raw:value:max> === (min-width: <raw:value:min>) and (max-width: <raw:value:max>)
• <query:helper:min>-<query:helper:max> === (min-width: <query:helper:min>) and (max-width: <query:helper:max>)

Query¶

Description: Additional media query conditions can be created in a mixin Object through the query Object.

ctr('.test', {
  width: 200px
  medias: {
    // query:helper
    '-md': {
      query: {
        max-height: 'md'
      }
      width: 300px
    }
    // raw:value
    '+800px': {
      query: {
        min-height: '800px'
      }
      width: 400px
    }
  }
})

.test:
  width: 200px
  medias:
    # query:helper
    -md:
      query:
        max-height: md
      width: 300px
    # raw:value
    +800px:
      query:
        min-height: 800px
      width: 400px

.test {
  width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
  .test {
    width: 300px;
  }
}
@media (min-width: 800px) and (min-height: 800px) {
  .test {
    width: 400px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    // query:helper
    '-md': {
      query: {
        max-height: 'md'
      }
      width: 300px
    }
    // raw:value
    '+800px': {
      query: {
        min-height: '800px'
      }
      width: 400px
    }
  }
})

.test {
  width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
  .test {
    width: 300px;
  }
}
@media (min-width: 800px) and (min-height: 800px) {
  .test {
    width: 400px;
  }
}

.test:
  width: 200px
  medias:
    # query:helper
    -md:
      query:
        max-height: md
      width: 300px
    # raw:value
    +800px:
      query:
        min-height: 800px
      width: 400px