jonathantneal/MediaClass

Stars
111
Rank 314,510 (Top 7 %)
Language
JavaScript
Created over 12 years ago
Updated over 11 years ago

jonathantneal/MediaClass

jonathantneal

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Javascript-Powered Cross-browser Media Queries and Events

MediaClass

MediaClass adds and removes responsive classnames to the document or individual elements.

What queries does it support, exactly?

width / height / aspect-ratio / orientation
device-, this-, min-, max-, below-, and above-.
em, in, pt, px, and %.

MediaClass("mobile", "(max-width: 480px)");

So, how do I use it?

Then, when the page is at or below 480px in width.

<html class="mobile">

Additionally, selectors and a this syntax target elements and their measurements.

MediaClass("small", ".widget:media(this-max-width: 480px)");

Then, when the element is at or below 480px in width.

<div class="widget small"></div>

What else does it do?

The above or below syntax expands targeting. mobile-small triggers when the browser window is below 20em (320px) in width.

MediaClass("mobile-small", "(max-width: 20em)");

Assign the query to a variable.

var mq = MediaClass("mobile-small", "(max-width: 20em)");

Change it.

mq.media = "(below-width: 20em)");

Remove it.

mq.remove();

What's the license?

MIT

And you are?

MediaClass is a project by Jonathan Neal.

flexibility

A JavaScript polyfill for Flexbox

svg4everybody

Use external SVG spritemaps today

closest

Return the closest element matching a selector up the DOM tree

media-player

A tiny, totally cross browser, accessible, fully customizable media player

fitie

An object-fit polyfill for Internet Explorer

EventListener

EventListener Polyfill for IE

http-client-hints

Hurray for server-side content negotiation

google-fonts-complete

A complete list of Google Web Fonts and their sources

wp-svg-spritemap

Use SVGs in WordPress — Manage an SVG spritemap

html5-invoice

Creates invoices on the fly, anywhere, without any additional software.

convert-colors

Convert Colors converts colors between RGB, HEX, HSL, HWB, LAB, LCH, and more

posthtml-inline-assets

Inline external scripts, styles, and images in HTML

array-flat-polyfill

A polyfill for Array.prototype.flat and Array.prototype.flatMap

color-names

Many, many names of colors

document-promises

Document loading states as Promises

regexp-escape

Escape strings for use within a regular expression

dsc

A 0.3kB JavaScript library for creating DOM structures (JSX compatible, JSDOM compatible)

css-font-weight-names

A JSON Object of css font weight names mapped to their numeric font weight value

browserstack-app

BrowserStack client for Windows, Mac, and Linux

usestate-js

React useState in vanilla JavaScript

viewsource

Yo dawg, we heard you like viewing the source, so we put our source in the source so you can view source while you view source.

element-qsa-scope

Return elements matching a selector relative to the current node

closest-color

Get the closest color

Polyfills-for-IE8

Please move to https://github.com/jonathantneal/polyfill

posthtml-md

Easily use context-sensitive markdown within HTML

posthtml-aria-tabs

Write accessible tabs with minimal markup

posthtml-schemas

Add schema.org microdata to your markup super easy

layout-webfont

A tiny "no space" font designed for inline-block layouts

mdcss-theme-github

GitHub theme for mdcss

post-npm-install

npm install when package.json dependencies have changed post-merge

preloadfill

A polyfill for the preload link type [rel="preload"]

hfill

A speculative polyfill to use the h element in HTML

angular-sticky

Keep any element on your page visible

wget.sh

A cloud-based app installer

website-checklist

All those things to remember, all those questions to ask.

upsite

Just put up a site

rat

The results of how different markup is read by accessible technology

watch-size

Watch the size changes of a DOM element

h-element-spec

Use contextual headings in HTML

readase

Read Adobe Swatch (ASE) files

match-media-range

Use ranges in media queries passed to window.matchMedia

practical-styles

A collection of meaningful properties and functional classes designed to help you write cleaner, scalable, and easier to maintain CSS

html5shim

HTML5 Shim: a javascript compatibility workaround for Internet Explorer <9 and the display of HTML5 elements.

dom-create-node

Creates DOM Nodes from a CSS Selectors

scrollr

WebKit-based touch scroller

AudioContext

AudioContext Polyfill

rapid

A simple tool for rapidly creating components

mdcss-theme

A boilerplate for mdcss themes

httpe

An http & https compatible module. Simultanious ports & protocols. Set & generate certificates & charsets & mimetypes. Glob & chain requests. Stream & process files.

Cross-Browser-CSS3-Rule-Generator

Generates cross-browser CSS3 rules

practical-custom-selectors

realistic and reusable custom selectors

soberatio

Go home, aspect ratios. You’re drunk.

postcss-wp

Generate WordPress PHP files from CSS files

astro-with-postcss

svgc

Convert SVG spritemaps into CSS stylesheets

event-observer

Treat DOM events like Arrays

eslit

Write templates with embedded JavaScript expressions

media-expressions-spec

Use media queries within values in CSS

harmonize.css

A presentational layer

posthtml-lorem

Add lorem ipsum placeholder text to any document

screenplay.css

CSS for Brilliant Screenplays

custom-elements-module

A recompiled polyfill for HTML Custom Elements

element-merge

Merge the contents of 2 DOM elements

html5css

A stylesheet of the HTML5 Presentational Requirements and Recommendations from the spec

keyboard-focus

Detect when an element has received focus from a keyboard

storybook-addon-css-user-prefs

wip addon for storybook

jshtml

A javascript templating system for browsers and nodejs

domose

Old Fashioned DOM Sugar

nextjs-with-cqfill

Demo of NextJS with CQFill

carousel

A tiny, highly accessible, easily customizable carousel

urlicon

beautifies web address inputs with informative glyphs and tastefully recomposed urls

babel-plugin-transform-globals

Transform global variables in JavaScript

stylelint-config-dev

A shareable configuration package for stylelint

reshape-md

Use Markdown in HTML

parent-node-replace-all

Remove all child nodes from a ParentNode while allowing the insertion of a new set of nodes

countries

Useful information about every country, packaged as objects

directory-fonts-complete

Generate a complete list of fonts and their sources from a directory

babel-plugin-jsx-imports

Automatically add the necessary imports when a file contains JSX

jshape

Shape any value in JavaScript

reshape-tape

Quickly test Reshape plugins

hitch-element-queries

Proposed Element Query syntax realized in Hitch

this-is-a11y

Accessible markup for the web

marble-css

A set of UI components behind Electric and WeDeploy.

console

A console for old Internet Explorer

parse-yaml

zero-dependency module for parsing YAML and Front Matter

posthtml-plugin-boilerplate

Create new PostHTML plugins

mdn-browser-compat-lite

A smaller version of mdn-browser-compat-data, with only the essentials!

babel-plugin-func-wrap

Wrap the whole script in a function — export as CommonJS, ES Modules, IIFE, or a global variable

astro-youtube-component

Astro YouTube Component

js-focus-ring

Deliver a consistent focus experience to browsers

astro-module-html

css-media-interface-style-test

Test media at-rule with color-scheme

kcc

Map key codes to codes in JavaScript

ok

super fast bash shortcuts

normalize

bootstrap-fonts-complete

A complete list of Bootstrap Fonts and their sources

astro-css-units

astro-stitches

astro-cqfill

Astro + Container Queries

vvssl

A command line utility to quickly setup https for any Vagrant site