Displaying 1 to 20 from 32 results

neat - A lightweight and flexible Sass grid

  •    CSS

Neat is a fluid grid framework with the aim of being easy enough to use out of the box and flexible enough to customize down the road. Alternatively, you can install Neat with Bower.

enquire.js - Awesome Media Queries in JavaScript

  •    Javascript

enquire.js is a lightweight, pure javascript library (with no dependencies) for programmatically responding to media queries. This should be enough to get you going, but please read the full enquire.js documentation if you wish to learn about the other cool features.

react-responsive - Media queries in react for responsive design

  •    Javascript

The best supported, easiest to use react media query module. This module is pretty straightforward: You specify a set of requirements, and the children will be rendered if they are met. Also handles changes so if you resize or flip or whatever it all just works.

myth - A CSS preprocessor that acts like a polyfill for future versions of the spec.

  •    Javascript

CSS the way it was imagined. Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It's like a CSS polyfill.




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.

eqio - A simple, tiny alternative to element/container queries

  •    Javascript

eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s. It uses IntersectionObservers under-the-hood (so is well supported in “good” browsers and easily polyfilled in others) to apply appropriately named classes to the component when necessary.

react-sizes - :left_right_arrow: Hoc to easily map window sizes to props.

  •    Javascript

React Sizes is a high-order component with a high performance that transform window sizes (width and height) into props. You can check inside your component, for example, if user's window is less than 480 pixels of width, and add a custom content. It can be very powerful for when you need to display different content for mobile and desktop. But it's not limited to this case. Just use that at your needs.

postcss-custom-media - PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS

  •    Javascript

PostCSS plugin to transform W3C CSS Custom Media Queries syntax to more compatible CSS.Checkout tests for more examples.


postcss-media-minmax - Writing simple and graceful Media Queries!

  •    Javascript

The min-width, max-width and many other properties of media queries are really confusing. I want to cry every time I see them. But right now according to the new specs, you can use more intuitive <= or >= to replace the min-/max- prefixes in media queries.V2.1.0 began to support > or < symbol.

breakup - Conditional media query includes in Sass

  •    CSS

Breakup is a Sass component that allows you to create multiple CSS files from a single Sass partial by wrapping your code within breakpoint blocks. It allows you to abstract what your Sass partials folder looks like from what CSS files you create. Because of this you can easily create per-breakpoint CSS files (e.g. base, mobile, tablet and desktop) and fallback files where no styles are wrapped (e.g. for oldIE which does not support media queries). The current trend towards OOCSS using Sass results in many small partials -- one per object. This is excellent for readability and reducing mental overhead until the complication of creating per-media query stylesheets, and oldIE stylesheets (where media queries are unsupported) appears. The simplest solution is to create even more partials named for each component's breakpoint (e.g. _component.scss & _component_wide.scss) but this results in a proliferation of partials which shall rapidly introduce noise to your partials folder.

mq-sass - Sass library to manage responsive breakpoints and generate media queries

  •    CSS

mq-sass is a Sass library to help you manage your responsive breakpoints and easily generate media queries. Also available as a Ruby gem to use within your Rails application—see below for more information.

ember-element-query - Element queries for Ember

  •    HTML

This Ember addon lets you apply styles to elements conditionally based on their own width, instead of using media queries based on window width. It lets you implement reusable responsive components — with encapsulated styles, decoupled from their parent context. Such components will realign their content depending on how much space is available to them.

postcss-neat - PostCSS plugin that provides a semantic and fluid grid framework.

  •    Javascript

PostCSS-Neat is a fluid grid framework built with the aim of being easy enough to use out of the box and flexible enough to customize down the road. See the demo page for a full list of features.

slinky - Add JavaScript tests to <link> tags to toggle stylesheets

  •    HTML

Similar to how you can add media queries to <link> tags with the media="" attribute, Slinky lets you define a custom data-selector="" and data-test="" attributes to any <link> tag to define an element to watch, and a JavaScript test to evaluate from the context of the matching element. Note that in these examples I've included media="none" so the stylesheets default to being hidden - for progressive enhancement if you wish to default to the stylesheets applying unless they need to be hidden by JS, you can leave the media="none" off and the stylesheet will load by default, instead of remain hidden by default.

postcss-if-media - A PostCSS plugin to inline or nest media queries within CSS rules & properties.

  •    Javascript

A PostCSS plugin for adding ?if media queries inside rules and inline with property values. A great way to keep style values for different media queries neatly organized and grouped together under their natural rules. Use with PostCSS Media Minmax and PostCSS Custom Media for best effect (be sure to place postcss-if-media before postcss-media-minmax, and postcss-custom-media, or any other media query plugins). The plugin provides ?if media QUERY as an inline declaration and a nested block, where QUERY is any valid media query.

gulp-combine-media-queries

  •    Javascript

Inspired from grunt-combine-media-queries. Combine matching media queries into one media query definition. Useful for CSS generated by preprocessors using nested media queries.

react-matchmedia-connect - Higher order components for matchMedia

  •    Javascript

createMatchMediaConnect lets you register a set of media queries. If one of the queries changes, you component will be updated. createResponsiveConnect expects a list of breakpoints and creates the respective media queries with createMatchMediaConnect. You'll get a isMin<Size> and isMax<Size> property for each breakpoint as well as a isPortrait and isLandscape property.

react-media-context - React higher-order component (HOC) to provide context for the currently matched media query

  •    Javascript

React higher-order component (HOC) to provide context for the currently matched media query. Most other responsive React HOCs tend to work on the principle of showing and hiding children based on media queries. With this component, you can alter styling and functionality of components responsively.