conditioner - 💆🏻 Frizz free, context-aware, JavaScript modules

•    Javascript

---

Conditioner provides a straight forward Progressive Enhancement based solution for linking JavaScript modules to DOM elements. Modules can be linked based on contextual parameters like viewport size and element visibilty making Conditioner your perfect Responsive Design companion. Mount a component (like a Date Picker, Section Toggler or Carrousel), but only do it on wide viewports and when the user has seen it.

conditioner es6 import responsive amd module-loader mediaqueries webpack browserify requirejs media-queries media-query module dynamic design context conditions shampoo

gridlex - Just a CSS Flexbox Grid System

•    CSS

---

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules. The concept is simple: you need to wrap your .col in a .grid.

css sass grid css3 scss css-grid flexbox-grid col mediaqueries flexbox

gulp-extract-media-queries - Plugin extracts css rules inside of media queries and saves it to separated files

•    Javascript

---

Plugin extracts css rules inside of media queries and saves it to separated files. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their tags will still download even if their media queries would return false (they will not apply, however).

gulpplugin mediaqueries

postcss-unmq - Remove media queries from CSS while preserving rules that match a hard-coded viewport

•    Javascript

---

UnMQ removes media queries from CSS while preserving rules that match a hard-coded viewport. This can be useful for outputting desktop CSS for older browsers like Internet Explorer 8. You can define your own viewport for media queries to be evaluated against. Think of the options as the current state of a device and browser.

postcss css postcss-plugin mediaquery mediaqueries internet explorer ie mq strip

mediaquery - Turns human readable breakpoints into correct mediaqueries

•    Javascript

---

Turns human readable breakpoints into correct mediaqueries. This is particularly useful when working with window.matchMedia or when you work with CSS dinamically using JavaScript.

mediaqueries breakpoint mediaquery responsive breakpoints step media css

vue-mq - 📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue

•    Javascript

---

Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue. After installing the plugin every instance of Vue component is given access to a reactive $mq property. Its value will be a String which is the current breakpoint.

vuejs vuejs2 media mediaqueries viewport breakpoints

grunt-pleeease - Grunt plugin for postprocess CSS with ease.

•    Javascript

---

This plugin requires Grunt. In your project's Gruntfile, add a section named pleeease to the data object passed into grunt.initConfig().

gruntplugin pleeease css mediaqueries

gulp-no-media-queries - Export the css without mediaqueries matching maximum page width.

•    Javascript

---

Export the css without mediaqueries matching maximum page width. See no-media-queries for documentation.

gulpplugin media queries mediaqueries

gulp-pleeease - Gulp plugin for postprocess CSS with ease

•    Javascript

---

See pleeease.io for documentation. You can use Sass, LESS or Stylus.

gulpplugin media queries mediaqueries pleeease

help-media-queries - This tool help you to easily recognize your active media query and display additional screen info

•    CSS

---

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.

css mediaqueries helper sass scss tooltip media query queries tool

sensible - Maintain media-queries where they belong; in the SASS/SCSS and make them available with the same name space in your JS without polluting your HTML

•    CSS

---

Maintains media-queries where they belong; in the SASS/SCSS and make them available with the same name space in JS without polluting the HTML

sass scss responsive css responsiveness mediaqueries mediaquery matchmedia