🍰Custom Media

Custom media allows you to use variables as media queries in CSS.

Variables are defined in 📂 /assets/css/src/_custom-media.css .

In WP Rig Toolkit breakpoints values were adjusted and extended to be compatible with Bulma Barebone or Bulma framework.

/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 **/

/* Menu queries */
@custom-media --narrow-menu-query screen and (max-width: 1007px);
@custom-media --wide-menu-query screen and (min-width: 1008px);

/* Special queries */
@custom-media --content-query screen and (min-width: 48em);
@custom-media --sidebar-query screen and (min-width: 60em);

/* Responsive queries */
@custom-media --mobile-query screen and (max-width: 768px);
@custom-media --tablet-query screen and (min-width: 769px);
@custom-media --widescreen-query screen and (min-width: 1216px);
@custom-media --fullhd-query screen and (min-width: 1408px);