media-queries

There are 5 repositories under media-queries topic.

• evrone / postcss-px-to-viewport

  A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.

  css-scalemedia-queriesmobile-designpixel-unitspostcssrem-unitstarovhviewport-unitsvw
  Language:JavaScript 2951

• artsy / fresnel

  An SSR compatible approach to CSS media query based responsive layouts for React.

  media-queriesnextjsreactreact-18responsivessr
  Language:TypeScript 1213

• GoogleChromeLabs / dark-mode-toggle

  A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

  custom-elementscustom-elements-v1dark-modedark-mode-switcherdark-mode-toggledark-themedark-theme-switcherdark-theme-togglemedia-queriesprefers-color-schemesupported-colorweb-components
  Language:JavaScript 1157
• react-sizes

  renatorib / react-sizes

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

  reacthochigh-order-componentmedia-queriesresponsive
  Language:JavaScript 722

• mg901 / styled-breakpoints

  Simple and powerful breakpoints for styled components and emotion.

  styled-componentsbreakpointsbreakpointmedia-queriescss-in-jscss-in-reactmediareactemotiontypescriptpreactmedia-querystyled-media-queryresponsive-designresponsive-layout
  Language:JavaScript 545

• stowball / eqio

  A simple, tiny alternative to element/container queries

  javascriptcssresponsive-designelement-queriescontainer-queriesmedia-queries
  Language:JavaScript 427

• flexdinesh / react-socks

  🎉 React library to render components only on specific viewports 🔥

  breakpointslibrarymedia-queriesreactviewport
  Language:JavaScript 426

• lolmaus / breakpoint-slicer

  Slice media queries with ease

  media-queriesmedia-querybreakpoint-slicerbreakpointbreakpointsresponsive-web-designresponsive-designsassscsssass-mixinsscss-mixins
  Language:SCSS 345

• kristerkari / react-native-css-modules

  Style React Native components using CSS, PostCSS, Sass, Less or Stylus.

  react-nativecss-modulescsssasspostcsslessstylusmedia-queriesviewport-unitscss-variables
  323

• Valexr / Slidy

  📸 Sliding action script

  sveltejsjavascripttypescriptcarouselsliderslideshowreactjsmalinajsmedia-queriessolidjsvuejswebcomponentanimationseasings
  Language:TypeScript 294
• tailwindcss-theme-variants

  JNavith / tailwindcss-theme-variants

  Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS

  tailwindcsstailwindcss-pluginthemingmedia-queriescss-selectorsprefers-color-schemedark-mode
  Language:TypeScript 181

• wswmsword / postcss-mobile-forever

  一款 PostCSS 插件，将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.

  postcsscss-scalemedia-queriesmobile-designpixel-unitsviewport-unitsresponsive-web-designcsspostcss-px-to-viewportmobile-firstmobile-forever
  Language:JavaScript 180
• postcss-sort-media-queries

  yunusga / postcss-sort-media-queries

  PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.

  postcsscsspostcss-pluginmedia-queriesmediaquerydesktop-firstmobile-firstcombine-media-querysort-media-querysortcss-optimizationsresponsive-csscss-mqpackermqnode-css-mqpacker
  Language:JavaScript 143

• Dan503 / mq-scss

  Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.

  mixinsmedia-queriesresponsivebreakpointsscss-mixinsscsssassmediaquerymixinmq-scssbreakpointaspect-ratiodevice-ratiomq-variableratio
  Language:CSS 124

• mvrlin / nuxt-viewport

  🌈 Define custom viewports for your Nuxt project

  media-queriesnuxtnuxt-moduleviewport
  Language:TypeScript 105

• pauloapi / media-queries-scss-mixins

  Media Queries SCSS Mixins

  media-queriesflex-layoutscss-mixinscss
  Language:SCSS 85

• dvpnt / styled-media-helper

  :nail_care: Helps manage media queries with styled components

  styled-componentsmedia-queriescssbreakpointbreakpointscss-in-jscssinjscss-in-reactmediamedia-query
  Language:JavaScript 76

• CyberAP / vue-component-media-queries

  MatchMedia component library for Vue

  vuenuxtmatchmediamedia-queriesssr
  Language:TypeScript 74
• react-breakpoints

  envato / react-breakpoints

  Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer "web design's unicorn" 🦄

  resize-observerelement-queriesmedia-queriesreactreact-hookshooksperformancebreakpoints
  Language:TypeScript 72

• xelaok / svelte-media-query

  CSS media queries in Svelte

  sveltesvelte3media-queries
  Language:Svelte 52

• ryanve / actual

  Determine actual CSS media query breakpoints via JavaScript

  javascriptmedia-queriesmedia-querybreakpoints
  Language:JavaScript 51

• dimitrinicolas / postcss-inline-media

  Media queries shortcut, built on PostCSS, example: font-size: 20px @1200 18px @480 16px;

  postcsspostcss-pluginmedia-queriesshortcutcss
  Language:JavaScript 48

• flatanimals / vue-media-queries

  Vue 2.0 media query helpers

  vuemedia-queriesvue-mixinbulmamaterializecssbootstrapbootstrap4
  Language:JavaScript 48

• senvolodymyr / rupture-sass

  Better media queries mixins library for SASS

  rupturemedia-queriesmixins
  Language:SCSS 47

• dyakovk / jest-matchmedia-mock

  🃏 Mock for fully testing any media queries with Jest

  jestjest-mockmatchmediamedia-queriestypescript
  Language:TypeScript 43

• ItsWendell / emotion-native-extended

  Better styling support for Emotion (React Native): Media queries, relative units, percents, operations and more...

  css-in-jscss3emotionexpomedia-queriesreactreact-nativereact-native-webresponsivestyled-componentsstylesheet
  Language:TypeScript 43
• Fluid-Size

  black7375 / Fluid-Size

  :triangular_ruler::iphone::computer::desktop_computer: A method of fluidly resizing in various devices based on visual angle. (with SASS) :revolving_hearts: :eyes:

  sassscssdesignbreakpointbreakpointsresponsivemedia-queries
  Language:SCSS 42

• Ashwin7mak / Hipster-Startup-Website

  A single page static website template for a startup company.

  html5css3media-queriesbootstrap3
  Language:HTML 38

• andrew--r / breakpoint

  A tiny API wrapper around window.matchMedia

  microjsmedia-queriesapi-wrapper
  Language:JavaScript 35

• arccoza / postcss-if-media

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

  postcsspostcss-pluginsmedia-queriescss
  Language:JavaScript 35
• Styled-Responsive-Media-Queries

  ahmadawais / Styled-Responsive-Media-Queries

  Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.

  emotioncss-in-jsstyledstyled-componentsresponsivemedia-queries
  Language:JavaScript 33

• kimmelsg / cj-resized

  Return different values based on browser width

  mediamedia-querieswidthreact
  Language:JavaScript 33

• levchak0910 / css-media-splitter

  The tool extracts all media at-rules into dedicated files and download them only when the user device matches the media query.

  cssmedia-queriesnuxtnuxt-modulevitevite-plugin
  Language:TypeScript 29

• jofftiquez / vue-media-query-mixin

  A vue mixin to get current media query, xs, sm, md and lg.

  vuevuejsvuejs2vue-mixinmixinsmedia-querieshacktoberfest
  Language:JavaScript 28

• CarlosIgreda / Awesome-Books

  In this project, I will build a basic website that allows users to add/remove books from a list. I will achieve that by using JavaScript objects and arrays. I will also need to dynamically modify the DOM and add basic events.

  cssdom-manipulationflexboxgrid-layouthtmljavascriptmedia-queries
  Language:JavaScript 27

• ElForastero / pulsar-core

  🚀 Handy dynamic styles utilities for React Native and React Native Web.

  recat-nativereact-native-webpulsar-corereactstylesheetdynamicstylesheetmedia-queriesvariantspulsar
  Language:TypeScript 27