Awesome Open Source

Programming Languages

Search results for media queries

media-queries x

122 search results found

Flex Layout ⭐ 5,917

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API

Css Element Queries ⭐ 3,931

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.

Postcss Px To Viewport ⭐ 2,706

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.

Include Media ⭐ 2,541

📐 Simple, elegant and maintainable media queries in Sass

Fresnel ⭐ 1,173

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

Dark Mode Toggle ⭐ 1,123

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

Conditioner ⭐ 1,015

💆🏻 Frizz free, context-aware, JavaScript modules

React Sizes ⭐ 730

↔️ Hoc to easily map window sizes to props.

Styled Breakpoints ⭐ 542

Simple and powerful breakpoints for styled components and emotion.

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

A simple, tiny alternative to element/container queries

React Socks ⭐ 400

🎉 React library to render components only on specific viewports 🔥

Darkmodejs ⭐ 395

Utility package for managing Dark Mode on the web

Breakpoint Slicer ⭐ 332

Slice media queries with ease

📸 Sliding action script

React Native Css Modules ⭐ 247

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

Mediacheck ⭐ 238

Control JS with mediaqueries

Vue Media ⭐ 186

A CSS media query component for Vue.js

Tailwindcss Theme Variants ⭐ 180

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

Awesome Web Styling ⭐ 144

Awesome Web Styling with CSS Animation Effects ⭐️

Postcss Sort Media Queries ⭐ 143

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

Container Query ⭐ 135

A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.

Nuxt Mq ⭐ 132

vue-mq module for Nuxt.js.

React Media Match ⭐ 129

React made responsible - media queries backed by state machinery

Mq Scss ⭐ 118

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

Postcss Mobile Forever ⭐ 115

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

Nuxt Viewport ⭐ 91

🌈 Define custom viewports for your Nuxt project

React Breakpoints ⭐ 75

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

Styled Media Helper ⭐ 69

💅 Helps manage media queries with styled components

Vue Component Media Queries ⭐ 62

MatchMedia component library for Vue

Color Scheme Change ⭐ 55

Detect system color scheme changes on the web (Dark Mode)

Media Queries Scss Mixins ⭐ 54

Media Queries SCSS Mixins

Awesome_extensions ⭐ 53

An extension to the widget that helps to reduce the boilerplate and adds some helpful methods. and you can make responsive design.

Vue Media Loader ⭐ 48

Enable `media` attribute on Vue SFC styles

Vue Media Queries ⭐ 48

Vue 2.0 media query helpers

Rupture Sass ⭐ 47

Better media queries mixins library for SASS

Determine actual CSS media query breakpoints via JavaScript

Postcss Inline Media ⭐ 43

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

Emotion Native Extended ⭐ 41

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

Svelte Media Query ⭐ 38

CSS media queries in Svelte

Breakpoint ⭐ 35

A tiny API wrapper around window.matchMedia

Styled Responsive Media Queries ⭐ 34

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

Cj Resized ⭐ 34

Return different values based on browser width

Mobx React Matchmedia ⭐ 33

A React HOC with mediaqueries for responsive layout

Postcss If Media ⭐ 31

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

Super Query ⭐ 29

🎠 A super media-query for styled-components. Intuitive and easy of use.

Jest Matchmedia Mock ⭐ 27

🃏 Mock for fully testing any media queries with Jest

Fluid Size ⭐ 26

📐📱💻🖥️ A method of fluidly resizing in various devices based on visual angle. (with SASS) 💞 👀

Vue Media Query Mixin ⭐ 26

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

React Context Responsive ⭐ 26

A package that provides a responsive context to your application, using React Context API.

Svelte Media Queries ⭐ 24

A ✨light✨ and magical Svelte component for CSS media queries🐹

Media Blender ⭐ 24

Easy and predictable SASS/SCSS media queries

React Responsive ⭐ 22

🔍 <Only /> displays some contents for particular screen sizes

☁️🎨 An experimental universal, customizable styling and animation library for React Native. (beta)

Capstone Project ⭐ 22

In this capstone project, I'm going to build is based on an online website for a conference using HTML, CSS and JavaScript.

Awesome Books ⭐ 21

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.

Portfolio Setup And Mobile First ⭐ 20

In this project, I will build a portfolio website from scratch for mobile and desktop version using HTML, CSS and JavaScript.

Awesome Books Es6 ⭐ 19

In this project, I will restructure your Awesome books app code. The goal is to make it more organized by using modules. I will also practice the ES6 syntax that I have learned.

A fine API to manage media queries in JS with ease. It has first-class integration with VueJS.

React Native Css Modules With Media Queries Example ⭐ 18

An example app to show how CSS Media Queries work in React Native.

Breakpoint Helper ⭐ 17

Small helper library to work with layout breakpoints in Javascript.

Fluid React ⭐ 17

Grid system for React, and more

Polyglot Talk ⭐ 17

As a polyglot who speaks French, Spanish, English, and Chinese, I am excited to share my experiences and insights on the importance of language learning in today's global society. In my talk, I will explore how learning multiple languages can broaden our perspectives, foster empathy and understanding, and open up new opportunities.

Pulsar Core ⭐ 16

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

Mesto Project ⭐ 16

Course project of Yandex.Practicum. Theme: Adaptive and responsive make up, API, OOP.

Dhalsim Js ⭐ 15

Dhalsim is a media query for javascript

📏 A reasonable breakpoint scale using @custom-media

Humans is designed for mobile and desktop for human users. And it is vue-based implementation. To help developer to build UI quickly.

Belfius Banking ⭐ 13

HTML - CSS - JS

Ifbreakpoint ⭐ 13

ifbreakpoint.js : if Bootstrap 4 breakpoint (media query) is X do something

Use Media Query Hook ⭐ 12

react use-media-query-hook

Handy Media Query ⭐ 12

A handy CSS media query methods of JS

Js.device.selector ⭐ 11

ES6 class and jQuery Plugin to get the current Device Type and Display Type of a Browser while making CSS Breakpoints available in JavaScript.

Afcon2022 Cameroon ⭐ 11

A 3-page website built using semantic HTML5 elements, Bootstrap4 as well as plain CSS3. The pages start with a header section that uses the Bootstrap4 navbar classes to make it responsive.

My Videos ⭐ 11

My Videos is a responsive React.js application with video sections, custom categories, channel pages, and can play videos directly from this app.

Add JavaScript tests to <link> tags to toggle stylesheets

Simple_grid ⭐ 10

Inspired by bootstrap , This is dynamic grid layout that you can use Like a bootstrap grid, and the size is following material UI break points. But, don't to worry you can customize your break point like here. This package purely using mediaquery, don't worry about the render.

Lit Media Query ⭐ 10

Web component for media queries (like iron-media-query) implemented with LitElement.

Breakpoint ⭐ 10

Sass functions and mixins to use media queries rules.

Media Engine ⭐ 10

Media queries engine written in pure JS!

Listen to media query updates in JavaScript

React Hook Media Query ⭐ 10

A React hook to match media queries

At Rule Packer ⭐ 10

Merge media queries (@media), @supports, and other duplicate At-rules together under a single block.

React Media Material Ui ⭐ 10

An easy way to use breakpoints from your material-ui theme with react-media

React Native Web Responsive ⭐ 10

Universal media queries for React Native and web

💻 A tiny (1.2kb gzipped) media query utility for programmatic control of screen viewports.

React Breakpoints Hook ⭐ 9

React hook for responsive design logic

🌈 CSS Framework written in Stylus inspired by Tailwind and NIB

Stylebuddy ⭐ 9

🐻 Generate encapsulated css inline styles which are extremely configurable.

Lazy Responsive Templates ⭐ 9

LAZY Responsive Templates

React Screen Size ⭐ 9

Media_manager_responsive ⭐ 9

REDAXO-Addon mit nützlichen Methoden im Umgang mit dem Picture-Element, Responsive Bilder, SVG-Ausgabe, u.v.m.

Vue Responsiveness ⭐ 9

Tiny plugin for managing responsiveness breakpoints in Vue3 apps.

Html Capstone Project Shop ⭐ 8

A beautiful and responsive musical instruments shop built with business specifications based on the design by Mohammed Awad. CSS Flexbox, Grid, and Media Queries were used among other industry-standard tools. Made with HTML5 and CSS3. Totally responsive. Based on the design by Mohammed Awad.

React With Responsive ⭐ 8

📱↔️ 🖥️ Responsive Media Query Higher-Order Component (HOC) for React

React Match Breakpoints ⭐ 8

Lightweight, performant, and easy to use media query library for React 📱 💻 🖥️

Origamid_html_e_css_para_iniciantes ⭐ 8

Front End, HTML, Tags, Acessibilidade, CSS, Grid Layout, Flexbox, Media Queries, Responsivo, VS Code e mais.

Mediaquery ⭐ 7

Turns human readable breakpoints into correct mediaqueries

A universal minimal media controller for Windows

Use Window Width Breakpoints ⭐ 7

A React hook for using window width breakpoints.

1-100 of 122 search results

Privacy | About | Terms | Follow Us On Twitter

Copyright 2018-2024 Awesome Open Source. All rights reserved.