afelixnieto/help-media-queries

What's "Help Media Queries"?

With this tool you can handle your responsive project without stress. You will be able to create a set of breakpoints (min-width obviously) that allow you to easily manage your layout .. and your components.

HMQ (Help Media Queries) offer also an useful tooltip sticked at the bottom of the page that will display your active media query, your screen density and the screen/viewport orientation.

HMQ provide also two useful SASS functions that make your media queries easy to write, break() and density()

Here some examples:

With break(..)

.Header {
  background-color: #FF00FF;

  // Green background from 960px width
  @media screen and (break(medium)) {
    background-color: #00FF00;
  }
}

.Menu {
  color: #FF00FF;

  // Green color from 960px width and retina display
  @media screen and (break(medium)) and (density(2x)) {
    color: #00FF00;
  }
}

How?

Install this tool with npm install -D help-media-queries. If you use Yarn, run yarn add --dev help-media-queries

Gulp/Grunt

// Import the functions break() and density()
@import 'node_modules/help-media-queries/src/helpers.scss';
// Import the tooltip flag
@import 'node_modules/help-media-queries/src/tooltip.scss';

Webpack

Inside your scss entry point, import once the tooltip file:

// Import the tooltip flag
@import '~help-media-queries/src/tooltip.scss';

Import media queries functions inside each component scss file:

// Import the functions break() and density()
@import '~help-media-queries/src/helpers.scss';

By default HMQ is active, so make sure to disable it by set $hmq-enable-tooltip to false (before of imports), or by removing the tooltip @import when your are on production!

Settings

You can override this settings in your project.

// Enable or disable the HMQ tooltip (set false when you are on production!)
$hmq-enable-tooltip: true;

// If true the tooltip text color will be random each breakpoint
$hmq-enable-random-color: false;

// Set a dark theme for the tooltip (useful on white background)
$hmq-dark-theme: false;

// This is the default breakpoints map, useful for a wide usage.
$breakpoints: (
  extraSmall : 30em,
  small      : 48em,
  medium     : 60em,
  large      : 80em,
  extraLarge : 100em
);

// Screen densities. You don't need to change this values.
$densities: (
  1x  : '96dpi',
  15x : '144dpi',
  2x  : '192dpi',
  3x  : '288dpi',
  4x  : '384dpi'
);

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!

afelixnieto / help-media-queries