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

  •        10

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.

https://pqina.nl/conditioner

Tags
Implementation
License
Platform

   




Related Projects

breakpoint - Really simple media queries in Sass

  •    CSS

Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best. Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.

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.

pure - A set of small, responsive CSS modules that you can use in every web project.

  •    HTML

Now, all Pure CSS files should be built into the `pure/build/` directory. Allfiles that are in this build directory are also available on the CDN. The namingconventions of the files in the `build/` directory follow these rules:* `[module]-core.css`: The minimal set of styles, ususally structural, that provide the base on which the rest of the module's styles build.* `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` + `[module]-[feature].css` from the `src/[module]/` dir. This i

Webpack - A bundler for javascript and friends

  •    Javascript

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Steal - Universal module loader

  •    Javascript

steal is unique because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats (unlike most other module loaders, which only support one of these formats at a time). In JavaScript, the word "modules" refers to small units of independent, reusable code. They are the foundation of many JavaScript design patterns, and can look like this in ES6.


breakpoint-slicer - A very quick and efficient syntax for Breakpoint

  •    CSS

Along with Respond To, Breakpoint Slicer is an alternative syntax for Breakpoint. It offers a powerful yet very simple way to slice your media queries. See those spans between breakpoints? Let's name them "slices".

sass-mq - A Sass mixin that helps you compose media queries in an elegant way.

  •    CSS

mq() is a Sass mixin that helps you compose media queries in an elegant way. Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: see who uses Sass MQ.

css-element-queries - CSS-Element-Queries Polyfill

  •    Javascript

Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+). It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported) size while not causing performance lags due to event based implementation. It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.

dependo - Visualize your CommonJS or AMD module dependencies in a force directed graph report.

  •    HTML

Visualize your CommonJS, AMD, or ES6 module dependencies in a force directed graph report - powered by D3.js. Let me introduce dependo - A small visualization tool that draws an force directed graph of JavaScript dependencies pulled from a codebase of CommonJS, AMD, or ES6. Behind the scene I’m using a wonderful library named node-madge, to extract the dependencies and combined with the power of D3.js I draw a beautiful zoomable directed graph.

react-media - CSS media queries for React

  •    Javascript

react-media is a CSS media query component for React.A <Media> component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.

element-queries-spec - A spec for a Container-Style Element Query Syntax

  •    HTML

This spec aims to define a syntax for scoped styles and element queries in a container query style, as well as the related selectors, functions, and units that make scoped styles and element queries versatile and powerful way to write layout-independent responsive conditions for elements in CSS. As a reference for the syntax described in the spec, I have included a JavaScript plugin that reads the proposed syntax and displays the desired behaviour of the proposed functionality.

breakpoint - Breakpoint is a column based media query generator and responsive image framework.

  •    Javascript

Breakpoint is a grid system and responsive image solution. It's based on the concept that columns shouldn't stretch but get added or taken away as the screen changes size. This concept was taken from the Frameless Grid system developed by Joni Korpi. The Breakpoint grid is also floatless by using inline-block cells and border box sizing. This layout technique is taken from Griddle by Nicolas Gallagher. Breakpoint generates media queries at column break points that you determine. You can also label your media queries which allows JavaScript to pair them with responsive image sources. If you want to use Breakpoint for responsive images you need jQuery and EventEmitter. While not a requirement, you can get enhanced deferreds/callbacks when working with responsive images by installing imagesLoaded.

lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration

  •    Javascript

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.

responsive-comments - A client-side solution to conditional loading.

  •    Javascript

ResponsiveComments was designed to bring simple conditional loading to the client side. Through the use of HTML comments, markup can be introduced to progressively enhance an experience as various media queries or feature detections evaluate to true. For more information and examples check out responsivecomments.com. To get started using ResponsiveComments, add a [data-responsive-comment-media] attribute containing a valid media query to any element containing children that you wish to conditionally load. The ResponsiveComments concept will only work in a progressivelty enhanced experience so make sure you use minimum width media queries.

react-transform-hmr - A React Transform that enables hot reloading React classes using Hot Module Replacement API

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. A React Transform that enables hot reloading React classes using Hot Module Replacement API. Hot module replacement is supported natively by Webpack and available in Browserify with browserify-hmr.

almond - A minimal AMD API implementation for use after optimized builds

  •    Javascript

A replacement AMD loader for RequireJS. It provides a minimal AMD API footprint that includes loader plugin support. Only useful for built/bundled AMD modules, does not do dynamic loading. Some developers like to use the AMD API to code modular JavaScript, but after doing an optimized build, they do not want to include a full AMD loader like RequireJS, since they do not need all that functionality. Some use cases, like mobile, are very sensitive to file sizes.

madge - Create graphs from your CommonJS, AMD or ES6 module dependencies

  •    Javascript

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and give you other useful info. Joel Kemp's awesome dependency-tree is used for extracting the dependency tree. Read the changelog for latest changes.

Responsive-Web-Design-II - All things responsive: Devices, viewports, media queries, adaptive, fluid, and how to build them

  •    HTML

You have experienced building fixed layout web pages, adaptive web pages, and now it's time to go fully responsive! Using your new knowledge with responsive units, contstraints, and media queries you are now prepared to take on today's fully reponsive website project.

responsive-html-email-template - Responsive HTML email template designed to work on all major email platforms and smartphones

  •    HTML

This template is designed to work on all major email platforms. It is built with media query, making it responsive for smartphones that support media query. It serves as a foundation that has been tested and thoroughly reviewed for compatibility, making it very easy to customize and make changes. Using MailChimp's html email template (blue-print) as the foundation, this template is an improved version with more row options, redefined structure and many fixes for Outlook, Yahoo, Hotmail, Gmail, e.t.c.

minipack - 📦 A simplified example of a modern module bundler written in JavaScript

  •    Javascript

As front-end developers, we spend a lot of time working with tools like Webpack, Browserify, and Parcel. Understanding how those tools work can help us make better decisions on how we write our code. By understanding how our code turns into a bundle and how that bundle looks like we can also debug it better.