group-css-media-queries - CSS postprocessing: group media queries

  •        47

CSS postprocessing: group media queries. Useful for postprocessing preprocessed CSS files :)

https://github.com/SE7ENSKY/group-css-media-queries

Dependencies:

css-parse : ^2.0.0
css-stringify : ^2.0.0

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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.

include-media - 📐 Simple, elegant and maintainable media queries in Sass

  •    CSS

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax. I spent quite some time experimenting with different libraries and mixins available out there, but eventually all of them failed to do everything I needed in an elegant way. Some of them wouldn't let me mix set breakpoints with case-specific values, others wouldn't properly handle the CSS OR operator and most of them had a syntax that I found complicated and unnatural.

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.


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

media-match - Test css media queries in javascript

  •    Javascript

Test css media queries in javascript. A faster polyfill for matchMedia support. Follow the project on Twitter @mediamatchjs. Both code blocks are valid uses of matchMedia(). The first example shows the caching of a MediaQueryList object and the second shows an alternative usage as well as addListener support. The addListener method is part of the MediaQueryList object, therefore it can be added on the cached version or immediately after matchMedia().

styled-media-query - 💅💍 Better media queries for styled-component

  •    Javascript

Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints. Note: This documentation is for the latest version (v2). We still support v1 syntax but it'll be removed in v3.

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.

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.

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.

device.js - Semantic client-side device detection with Media Queries

  •    Javascript

CSS media queries are an amazing tool for customizing a layout to look differently depending on the device you serve it to. For some inspiration, have a look at mediaqueri.es. In many cases, however, the ability to customize the CSS depending on screen size is not sufficient. You might want a completely different DOM structure, and a separate set of JavaScript depending on the device.

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.

veinjs - Injects CSS into the document (it's a perfectly legal procedure)

  •    Javascript

CSS injection is the process of injecting CSS definitions into a document dynamically. Media Query Support - You can inject media queries and work responsive magic with veinjs dynamically.

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".

Blueprint-VerticalTimeline - A responsive vertical timeline layout with icons and example media queries

  •    CSS

A responsive vertical timeline layout with icons and example media queries.

rupture - Simple media queries in stylus

  •    CSS

Simple media queries for stylus. Note: This project is in early development, and versioning is a little different. Read this for more details.

sassCore - 一份基础的scss库,包括常用reset, mixin, grids, typo, css3, media queries等多个文件,是你sass开发的必备库

  •    CSS

一份基础的scss库,包括常用reset, mixin, grids, typo, css3, media queries等多个文件,是你sass开发的必备库

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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.