https://github.com/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-scale media-queries mobile-design pixel-units postcss rem-units taro vh viewport-units vw

Last synced: 29 Oct 2024

https://github.com/artsy/fresnel

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

media-queries nextjs react react-18 responsive ssr

Last synced: 14 Oct 2024

https://github.com/GoogleChromeLabs/dark-mode-toggle

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

custom-elements custom-elements-v1 dark-mode dark-mode-switcher dark-mode-toggle dark-theme dark-theme-switcher dark-theme-toggle media-queries prefers-color-scheme supported-color web-components

Last synced: 28 Oct 2024

https://github.com/googlechromelabs/dark-mode-toggle

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

custom-elements custom-elements-v1 dark-mode dark-mode-switcher dark-mode-toggle dark-theme dark-theme-switcher dark-theme-toggle media-queries prefers-color-scheme supported-color web-components

Last synced: 14 Oct 2024

https://github.com/renatorib/react-sizes

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

high-order-component hoc media-queries react responsive

Last synced: 14 Oct 2024

https://github.com/mg901/styled-breakpoints

Simple and powerful breakpoints for styled components and emotion.

breakpoint breakpoints css-in-js css-in-react emotion media media-queries media-query preact react responsive-design responsive-layout styled-components styled-media-query typescript

Last synced: 14 Oct 2024

https://github.com/stowball/eqio

A simple, tiny alternative to element/container queries

container-queries css element-queries javascript media-queries responsive-design

Last synced: 25 Oct 2024

https://github.com/flexdinesh/react-socks

🎉 React library to render components only on specific viewports 🔥

breakpoints library media-queries react viewport

Last synced: 30 Oct 2024

https://github.com/lolmaus/breakpoint-slicer

Slice media queries with ease

breakpoint breakpoint-slicer breakpoints media-queries media-query responsive-design responsive-web-design sass sass-mixins scss scss-mixins

Last synced: 29 Oct 2024

https://github.com/kristerkari/react-native-css-modules

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

css css-modules css-variables less media-queries postcss react-native sass stylus viewport-units

Last synced: 11 Oct 2024

https://github.com/valexr/slidy

📸 Sliding action script

animations carousel easings javascript malinajs media-queries reactjs slider slideshow solidjs sveltejs typescript vuejs webcomponent

Last synced: 10 Oct 2024

https://github.com/wswmsword/postcss-mobile-forever

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

css css-scale media-queries mobile-design mobile-first mobile-forever pixel-units postcss postcss-px-to-viewport responsive-web-design viewport-units

Last synced: 12 Oct 2024

https://github.com/JNavith/tailwindcss-theme-variants

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

css-selectors dark-mode media-queries prefers-color-scheme tailwindcss tailwindcss-plugin theming

Last synced: 30 Oct 2024

https://github.com/JakeNavith/tailwindcss-theme-variants

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

css-selectors dark-mode media-queries prefers-color-scheme tailwindcss tailwindcss-plugin theming

Last synced: 16 Aug 2024

https://github.com/yunusga/postcss-sort-media-queries

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

combine-media-query css css-mqpacker css-optimizations desktop-first media-queries mediaquery mobile-first mq node-css-mqpacker postcss postcss-plugin responsive-css sort sort-media-query

Last synced: 30 Oct 2024

https://github.com/mvrlin/nuxt-viewport

🌈 Define custom viewports for your Nuxt project

media-queries nuxt nuxt-module viewport

Last synced: 01 Nov 2024

https://github.com/ryanve/actual

Determine actual CSS media query breakpoints via JavaScript

breakpoints javascript media-queries media-query

Last synced: 27 Oct 2024

https://github.com/xelaok/svelte-media-query

CSS media queries in Svelte

media-queries svelte svelte3

Last synced: 10 Oct 2024

https://github.com/ashwin7mak/hipster-startup-website

A single page static website template for a startup company.

bootstrap3 css3 html5 media-queries

Last synced: 11 Oct 2024

https://github.com/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:

breakpoint breakpoints design media-queries responsive sass scss

Last synced: 03 Aug 2024

https://github.com/ahmadawais/styled-responsive-media-queries

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

css-in-js emotion media-queries responsive styled styled-components

Last synced: 19 Oct 2024

https://github.com/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.

css media-queries nuxt nuxt-module vite vite-plugin

Last synced: 31 Oct 2024

https://github.com/jofftiquez/vue-media-query-mixin

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

hacktoberfest media-queries mixins vue vue-mixin vuejs vuejs2

Last synced: 21 Oct 2024

https://github.com/elforastero/pulsar-core

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

dynamicstylesheet media-queries pulsar pulsar-core react react-native-web recat-native stylesheet variants

Last synced: 28 Oct 2024

https://github.com/nash403/fine-mq

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

matchmedia media-queries media-query mobile mobile-first mq nuxt nuxt-mq responsive rwd vue-plugin

Last synced: 02 Nov 2024

https://github.com/kristerkari/react-native-css-modules-with-media-queries-example

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

css css-modules demo-app example example-app media-queries react-native

Last synced: 29 Oct 2024

https://github.com/mosalem149/online-exam-platform_debi-project

A modern, responsive online exam platform featuring sign-up/login functionality, timed exams, progress tracking, flagged questions, and result submission. Built with HTML, CSS, and JavaScript for an interactive and user-friendly experience.

animated-gif api bootstrap5 css3 flex font-awesome front-end-development google-fonts html5 javascript keyframe-animation localstorage media-queries online-exam-system online-examination-system responsive signup-login-page web-design web-development

Last synced: 10 Oct 2024

https://github.com/abongsjoel/afcon2022-cameroon

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.

bootstrap4 css3 flex-box html5 media-queries

Last synced: 13 Oct 2024

https://github.com/nicolas-cusan/breakpoint-helper

Small helper library to work with layout breakpoints in Javascript.

breakpoint breakpoint-changes breakpoint-helper css css-breakpoints layout-breakpoints media-queries responsive responsive-design sass

Last synced: 28 Oct 2024

https://github.com/kiosion/svelte-breakpoints

Svelte component and helper functions for creating easy responsive layouts with CSS media queries.

css-media-queries media-queries responsive svelte svelte-component svelte5 sveltejs sveltekit

Last synced: 31 Oct 2024

https://github.com/kristerkari/react-native-css-media-query-processor

Match style objects containing CSS Media Queries with React Native

css css-parser media-queries react-native stylesheets transform

Last synced: 29 Oct 2024

https://github.com/diegomura/media-engine

Media queries engine written in pure JS!

engine media media-queries media-query

Last synced: 13 Oct 2024

https://github.com/codemonk-digital/vue-responsiveness

Tiny plugin for managing responsiveness breakpoints in Vue3 apps.

bootstrap5 bulma chakra-ui ionic-framework master-css material-design material-ui materializecss media-queries quasar-framework responsiveness semantic-ui skeleton ssr tailwindcss vue vue3 vuetify windicss

Last synced: 21 Oct 2024

https://github.com/hamzaezzra/multishot

A browser extension that screenshots a page in multiple media queries / device sizes with a single click.

chrome-extension extension extension-chrome javascript media-queries open-source screen-capture screenshots screenshotting

Last synced: 24 Oct 2024

https://github.com/panoply/qvp

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

match-media media-queries responsive screen viewport

Last synced: 27 Oct 2024

https://github.com/noeldelgado/syringe.js

:syringe: Injects additional CSS at runtime

css css-rules font-face inject injection javascript keyframes media-queries styles stylesheets

Last synced: 22 Oct 2024

https://github.com/meltrust/html-capstone-project-shop

A beautiful and totally responsive musical instruments shop. CSS Flexbox, Grid, and Media Queries were used among other industry-standard tools. Made with HTML5 and CSS3.

css3 html media-queries

Last synced: 18 Oct 2024

https://github.com/holtwick/twindy

🌈 CSS Framework written in Stylus inspired by Tailwind and NIB

css css-framework dark-mode elegant headless media-queries responsive stylus tailwind

Last synced: 27 Oct 2024

https://github.com/chanced/schemable-svelte

svelte action for class decoration derived from media queries or user preferences.

dark-mode light-mode media-queries scheme svelte

Last synced: 23 Oct 2024

https://github.com/anandchowdhary/prefers-color-scheme

🎨 Get a user's preferred color scheme using CSS @​media(prefers-color-scheme)

css media-queries prefers-color-scheme typescript

Last synced: 02 Nov 2024

https://github.com/TyMick/use-window-width-breakpoints

A React hook for using window width breakpoints.

breakpoints hacktoberfest hook hooks javascript media-breakpoints media-queries npm package react responsive responsive-design screen-size screen-width typescript

Last synced: 28 Oct 2024

https://github.com/tywmick/use-window-width-breakpoints

A React hook for using window width breakpoints.

breakpoints hacktoberfest hook hooks javascript media-breakpoints media-queries npm package react responsive responsive-design screen-size screen-width typescript

Last synced: 08 Aug 2024

https://github.com/rikschennink/react-contextual-router

📱Render components based on user context

context javascript media-queries plugin react router

Last synced: 13 Oct 2024

https://github.com/teekaytech/html-css-capstone-project

A static fully-responsive website built for a Forex Trading Company that shows a detailed description of an upcoming conference. Built with HTML5, CSS, Boostrap & Media Queries.

bootstrap4 css3 html5 media-queries

Last synced: 24 Oct 2024

https://github.com/mattphillips/react-point-break

React CSS media queries with breakpoint render props Component and Provider. 🔫

breakpoint css media-queries react react-context render-props

Last synced: 14 Oct 2024

https://github.com/viur-framework/gulp-join-media-queries

gulp-plugin to join media-queries

css gulp gulp-plugin join less madeindortmund mausbrand media-queries nodejs npm package viur

Last synced: 23 Oct 2024

https://github.com/aliencreations/responsiveless

Responsive media queries for LESS

lesscss media-queries mixins orientation

Last synced: 12 Oct 2024

https://github.com/skyv26/portfolio

Portfolio is made with vanilla-js and I did it with my partner. I have added so many user interaction and the most importantly I made it Accessible so that disabled person can be able to navigate through my portfolio.

accessibility branches css3 flexbox-layout github-actions github-pages grid-layout html html5 javascript media-queries portfolio pull-requests responsive-web-design vanilla-js

Last synced: 24 Oct 2024

https://github.com/TyMick/use-window-orientation

A React hook for using window orientation.

hacktoberfest hook hooks javascript landscape media-queries npm orientation package portrait react responsive responsive-design screen-dimension screen-orientation typescript window-dimensions window-orientation

Last synced: 28 Oct 2024

https://github.com/billykwok/facetat

A neat and efficient way to write responsive styles for CSS-in-Js libraries. Like facepaint, but even more powerful.

css css-in-js emotionjs javascript media-queries react responsive

Last synced: 19 Oct 2024

https://github.com/pixelize/react-styled-mediaquery

Simple and practical utility for managing media queries in react with styled components

breakpoints custom-breakpoints media media-queries mediaqueries mediaquery mobile queries query react responsive rwd styled-components styledcomponents tablet

Last synced: 11 Oct 2024

https://github.com/eddiesigner/simple-media-queries

[PostCSS] Simple and mobile first media queries made easy.

css css3 gulp javascript media-queries nodejs npm postcss

Last synced: 31 Oct 2024

https://github.com/lukewarlow/tailwind-mq

Tailwind v3+ plugin that adds various missing media query variants.

color-gamut css dynamic-range forced-colors hacktoberfest inverted-colors media-queries mediaqueries overflow-block overflow-inline prefers-contrast prefers-reduced-data prefers-reduced-transparency scripting tailwind tailwind-variants tailwindcss tailwindcss-plugin update

Last synced: 16 Oct 2024

https://github.com/rafaelrinaldi/media-queries

:arrow_up_down: CSS media queries based on Zurb's Foundation breakpoints

breakpoint cssnext media-queries myth zurb-foundation

Last synced: 29 Oct 2024

https://github.com/ijayabby/thenextweb-clone

This project consists of replicating The Next Web website putting emphasis on how it behaves differently depending on the size of the screen where the website is rendered.

css3 html5 media-queries responsive responsive-design responsive-web-design

Last synced: 21 Oct 2024

https://github.com/ziad-saab/mobx-matchmedia

A MobX observable for window.matchMedia

matchmedia-api media-queries mobx react

Last synced: 17 Oct 2024

https://github.com/noahflk/react-breakout

Lightweight hook for responsive breakpoints in React components

hook media-queries react react-hooks responsive viewport

Last synced: 28 Oct 2024

https://github.com/gregorisoria/sass-mediaquery-singleline

SASS Media queries on a single line

codepen css frontend media-queries mediaquery mixins sass scss

Last synced: 15 Oct 2024

https://github.com/saddamarbaa/microsoft-homepage-clone

==> Microsoft homepage from scratch a responsive layout "Mobile First Design" using HTML5/CSS and a bit of JS, modern CSS features, and techniques including CSS grid, flexbox, and media queries .....

complete-responsive-website css-flexbox css-grid css-units css-variables media-queries

Last synced: 21 Oct 2024

https://github.com/anandchowdhary/prefers-reduced-motion

🙅 Check if a user prefers reduced motion using CSS

css media-queries prefers-reduced-motion typescript

Last synced: 23 Oct 2024

https://github.com/nallenscott/windshear

React hook for just-in-time component rendering, with first-class support for Tailwind CSS ⛵️

breakpoints hooks just-in-time media-queries pinpoint-accuracy react react-hooks tailwind-css viewport-dimensions

Last synced: 11 Oct 2024

https://github.com/jomagene/article-preview-component

Responsive and interactive solution to the Frontend Mentor "Article Preview Component" challenge. Built with semantic HTML, Sass/SCSS, and JavaScript, this project features a responsive layout, hover states, and a share button that toggles social media links for an enhanced user experience.

flexbox media-queries querystring sass tooltip

Last synced: 15 Oct 2024

https://github.com/evavic44/picture-element

A tutorial for explaining how to use the html picture element

css html html5 media-queries picture picture-element picture-tag tutorial tutorial-code

Last synced: 26 Oct 2024

https://github.com/bitstarr/ruleemall

A helper for finding the right CSS breakpoints

css media-queries viewport

Last synced: 16 Oct 2024

https://github.com/hamzashahbaz/responsive-sass-mixin

📱💻🖥 Sass responsive utility mixin for major screen sizes.

css media-queries responsive sass sass-mixins

Last synced: 15 Oct 2024

https://github.com/aldairavelino/colegio-de-saude

Página Web

css3 health html5 media-queries page responsivity school

Last synced: 14 Oct 2024

https://github.com/Lorellana21/Glamping-landing-page

This is my adaptation of the Module 1`s final test aimed to develop a landing page under a given design and to resolve several points. I have used the project I created as an entrepreneur: Glamping Al-Andalus.

css-animations css-flexbox css-grid css3 homepage html5 landing-page layout media-queries sass transition zeplin

Last synced: 24 Oct 2024

https://github.com/anandchowdhary/environment-blending

🧖 Get a user's preference using CSS @​media(environment-blending)

css environment-blending media-queries typescript

Last synced: 23 Oct 2024

https://github.com/diegoivg98/html-css

Ejercicios/ejemplos del OpenBootcamp

animation-css bootstrap cards css forms html media-queries modal openbootcamp pseudo-classes pseudo-elements responsive sass sass-mixins transitions

Last synced: 31 Oct 2024

https://github.com/rudradcruze/leader-board

This project is basically based on gird and flex box. Simple multiple columns layout.

css3 flex-box grid html5 media-queries responsive

Last synced: 25 Oct 2024

https://github.com/saurabhnalepatil/decorative-events

Showcasing his expertise in Event Decoration. Explore a collection of stunning projects and experiences that demonstrate creativity and skill.

angular-cli bootstrap5 css3 emailjs googlefonts html5 media-queries toaster typescript

Last synced: 14 Oct 2024

https://github.com/ericrovell/svelte-media-observer

SvelteJS media queries observer.

media-queries observable observer svelte sveltejs sveltekit

Last synced: 11 Oct 2024

https://github.com/mpopv/pxsmlx

A Sass mixin library for concisely generating sets of single-property media queries

bootstrap-breakpoints breakpoint breakpoints css css3 media-queries mixin-library mixins sass sass-library sass-mixins scss scss-library scss-mixin scss-mixins

Last synced: 15 Oct 2024

https://github.com/rudradcruze/world-cup

This project is about simple world cup projects with multiple articles and matches with responsive. Live Site:

css3 flexbox grid html5 media-queries responsive transition

Last synced: 25 Oct 2024

https://github.com/kor1k/job_contact-lights-web

offer from Yaroslav (Contact Lights)

adaptive css frontend html landing media-queries offer website

Last synced: 21 Oct 2024

https://github.com/nathan-i-martin/react-ui-breakpoints

Easily add media breakpoints to your react project

dynamic-web dynamic-website media-queries npm react react-hooks typescript

Last synced: 12 Oct 2024

https://github.com/anandchowdhary/prefers-reduced-transparency

🎞️ Get a user's transparency preference

css media-queries prefers-reduced-transparency typescript

Last synced: 23 Oct 2024

https://github.com/jxareas/cinemates

A Modern Website consuming the TMDb API powered by Boostrap + Angular.

angular angular-cli angular-material angular2 animations bootstrap client-side component-driven-development eslint media-queries prettier responsive-design responsive-web-design sass tmdb-api typescript user-experience user-interface yarn

Last synced: 13 Oct 2024

https://github.com/zoobereq/secret-agent-supply

Project developed for Codecademy Intensive "Build Websites from Scratch". Utilizes HTML5, CSS3 + Flexbox, Media queries, and responsive design

codecademy codecademy-intensive css css3 flexbox flexbox-css flexbox-grid html-css html5 media-queries responsive-design responsive-web-design

Last synced: 29 Oct 2024

https://github.com/dimitribouteille/sass-no-duplicate-breakpoints

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.

css media-queries responsive responsive-css sass sass-library sass-mixins

Last synced: 31 Oct 2024

https://github.com/ameyjoshi0209/mealmate

Mealmate is an innovative system designed to automate and streamline attendance tracking for messes and cafeterias using unique QR code generation.

bootstrap composer css3 html5 javascript jquery media-queries mysql-database php phpmyadmin qrcode-generator xampp-server

Last synced: 13 Oct 2024

https://github.com/noclist/carps-space

carps space is my personal website where I experiment with modern CSS techniques

css css-animations css-custom-properties css-flexbox css-grid css3 eleventy front-matter html html5 media-queries njk nunjucks sass ssg

Last synced: 12 Oct 2024

https://github.com/codemonk-digital/react-responsiveness

Responsiveness in React made easy.

bootstrap3 bootstrap4 bootstrap5 bulma media-queries reactjs responsiveness ssr tailwindcss

Last synced: 02 Nov 2024

https://github.com/rudradcruze/influencer-gear

This project is about simple photography equipments and blogs.

css3 grid html5 media-queries responsive

Last synced: 25 Oct 2024

https://github.com/daxchen/sass-respond-to

A sass mixin to write media queries with ease!

media-queries mixin respond-to sass

Last synced: 04 Nov 2024

https://github.com/msarmadqadeer/news-page

This is a static news page that I created using HTML5 and CSS3.

css3 html5 media-queries static-page

Last synced: 12 Oct 2024

https://github.com/anandchowdhary/light-level

💡Get a user's light level using CSS @​media(light-level)

css light-level media-queries typescript

Last synced: 23 Oct 2024

https://github.com/sofi-bel/mesto-project

A landing page about traveling.

adaptive-layouts bem css3 flexbox grid html5 javascript js media-queries mobile-first pug relative-units responsive-design responsive-layout scss semantic-layout web-accessibility webpack webpack5

Last synced: 23 Oct 2024

https://github.com/sofi-bel/how-to-learn

A landing page about educational techniques and statistics in teaching.

adaptive-layouts adaptive-web-design bem css3 flexbox grid html5 media-queries mobile-first pug relative-units responsive-layout responsive-web-design scss semantic-layout web-accessibility webpack webpack5 youtube-api

Last synced: 23 Oct 2024

https://github.com/daun/mq-observer

Simple media query observer

css javascript media-queries

Last synced: 15 Oct 2024

https://github.com/sofi-bel/russian-travel

A landing page about Traveling in Russia.

adaptive-design adaptive-layouts bem css3 figma flexbox grid html5 media-queries mobile-first pug relative-units responsive-design responsive-layout responsive-web-design scss semantic-layout web-accessibility webpack webpack5

Last synced: 23 Oct 2024

https://github.com/anandchowdhary/prefers-contrast

🕶️ Check a user's preference using CSS @media(prefers-contrast)

css media-queries prefers-contrast typescript

Last synced: 23 Oct 2024

https://github.com/lankaukk/cat-treat-landing-page

Responsive Landing Page for Public Good's cat food Product 🐱

css cssflexbox html-css media-queries

Last synced: 15 Oct 2024

https://github.com/ashishsingh-30/temporarytest

OneInsure Task

css media-queries reactjs redux shadcn-ui tailwindcss typescript vitejs

Last synced: 31 Oct 2024

https://github.com/saoudi-h/tw-screens

React hooks for using Tailwind CSS breakpoints easily and efficiently.

breakpoint breakpoints css design gatsby hook hooks media-queries mediaquery nextjs npm-package pnpm react remix responsive tailwindcss web

Last synced: 28 Oct 2024

https://github.com/rmoongit/note-balls

NoteBalls! Add and edit your personal notes with vue reactive components!

bulma-css firebase laravel media-queries pinia routers slots vite vue3 vue3-composition-api

Last synced: 15 Oct 2024

https://github.com/georginapuig/popconvert

slot machine and video modal

casino-games css hooks media-queries modal popup react react-components reactjs responsive-design slot-machine

Last synced: 20 Oct 2024

https://github.com/fatihycan/coin-app

async-await coinranking-api css3 dom-manipulation error-handling event-handling fetch-api font-awesome html5 javascript media-queries netlify scss sweetalert2 vite webpack

Last synced: 31 Oct 2024

https://github.com/akramadjab/ecommerce-website

Full stack e-commerce app built using vanilla javascript and commece.js api

api babeljs bem-methodology commercejs css-animations css-flexbox css-grid css3 html5 javascript javascript-es6 javascript-vanilla media-queries parcel parcel-bundler sass scss scss-mixins scss-modules

Last synced: 11 Oct 2024

https://github.com/jacobgrisham/flexbox-layout-with-responsive-design

Hotel Listing Info Page using Sass, a flexbox layout, and responsive design.

bem-css bem-methodology bem-naming css css-animations css-flexbox css3 flexbox media-queries npm-scripts responsive responsive-web-design sass scss

Last synced: 21 Oct 2024