a simple sass library for managing media queries in responsive design
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
LICENSE
README.md
mediaMogul.sass
mediaMogul.scss

README.md

mediaMogul.sass

About:

a simple sass library for managing media queries in responsive design

How To Use:

/**
 * include mediaMogul.[sass/scss]
 */
@import 'mediaMogul.*';

/**
 * @param $definition    ['ss', '>ss', 'xs', '>xs', '<sm', '<=sm', 'sm', '>=sm', '>sm', '<md', '<=md', 'md', '>=md', '>md', '<lg', 'lg', '<xl', 'xl']
 * @param $mediatype     mediatype e.g. 'screen', 'print', 'all'
 */
@include mq($definition, [$mediatype: 'all']) {
 ...
}

example:

@import 'mediaMogul.scss';

.wrapper {
  width: 100%;
  @include mq('>=sm') {
    margin-left: auto;
    margin-right: auto;
  }
  @include mq('sm') {
    max-width: 640px;
  }
  @include mq('>=md') {
    max-width: 960px;
  }
}

would compile to

.wrapper {
  width: 100%;
}
@media all and (min-width: 768px) {
  .wrapper {
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 768px) and (max-width: 991px) {
  .wrapper {
    max-width: 640px;
  }
}
@media all and (min-width: 992px) {
  .wrapper {
    max-width: 960px;
  }
}

settings

breakpoint definitions follow the same format as Bootstrap allowing for out of the box integration. If you would like to mediaMogul with another framework or custom breakpoints the below variables should be set before mediaMogul is included in the project. support for custom definitions is in the pipeline

$default-mediatype: 'all' !default;
$screen-xs:         480px !default;
$screen-sm:         768px !default;
$screen-md:         992px !default;
$screen-lg:         1200px !default;
$screen-xl:         1920px !default;

todo

  • convert default mediatype to variable
  • custom definition support
  • convert ss definition to xxs
  • support for range definitions md-lg