Skip to main content
SimilarExport ZIP
100%

Minimal reponsive javascript framework

✓ Published0🌍 Public
SSimonS
Last edited Mar 8, 2012
Created on Mar 8, 2012

This example demonstrates a responsive design framework that switches between mobile, tablet, and desktop states based on the browser window's width. It uses jQuery to listen for window resize events, comparing the document width against breakpoints of 768 and 1100 pixels. The code triggers custom 'MOBILE', 'TABLET', and 'DESKTOP' events on the document, attaching show/hide functions to these states via the jQuery `live` API. A 200-millisecond timer minimizes lag during resizing.

AI-generated description

Similar vizzes

Loading thumbnail…

CSS Media Queries for Desktop, Tablet, Mobile.

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

MMistyBlunch
67% match
Loading thumbnail…

Responsive Starter Code

This example demonstrates a minimal responsive visualization template. It shows a single rounded rectangle that always fills the browser window, with its dimensions recalculated on every resize event. The code defines a reusable `myResponsiveComponent` function that takes a container and size properties, then creates or updates an SVG element and its `rect` child using D3 v5’s data-join pattern (`selectAll().data([null])`). It uses `document.body.clientWidth` and `clientHeight` as the size source, and re-renders by attaching a `resize` event listener to the window.

PParamjeet Dhiman
65% match
Loading thumbnail…

useResponsive

This example demonstrates a React hook that tracks the browser viewport width in real time. It shows how components can adapt their layout based on the current window size, updating whenever the user resizes the browser. The code uses the `useState` and `useEffect` hooks from React, along with a `resize` event listener on the `window` object. The hook returns an object containing the current `width` value, which is initially undefined and then populated with `window.innerWidth` on mount and subsequent resize events. The implementation closely mirrors a `useWindowSize` hook, but only tracks width rather than both dimensions.

LLandoLabrum
62% match
Loading thumbnail…

Responsive Starter Code

This example demonstrates a minimal responsive SVG setup using D3 v5. The code creates a single filled rectangle that always fills the browser viewport by reading `document.body.clientWidth` and `document.body.clientHeight`. A custom `myResponsiveComponent` function binds data to an SVG element and appends a rounded rectangle, updating its `width` and `height` attributes on every window resize event. The D3 selection pattern with `.enter().append().merge()` ensures the existing elements are updated efficiently.

CCurran Kelleher
61% match
Loading thumbnail…

Gist c196418fe72b707e3082568ad77439cc

This example demonstrates a responsive CSS grid system built with Sass, showing how column widths, ordering, visibility, and alignment adapt across five breakpoints (xl, lg, md, sm, xs). The layout defines 12-column proportional widths, auto-sizing columns, and utility classes for hiding, showing, and reordering content. It uses Sass `@each` loops and `@media` queries to generate breakpoint-specific styles, with variables like `$size-xl` and `$grid-spacing` controlling the responsive behavior. The grid container adjusts its max-width based on each breakpoint value.

SSamuelRiversMoore
61% match
Loading thumbnail…

Responsive Starter Code

This responsive starter code demonstrates how to build a D3 visualization that adapts to the browser window’s dimensions. It renders a full-screen SVG containing a single rounded rectangle that resizes along with the viewport. The example uses D3 v5 with a reusable component function, `myResponsiveComponent`, which receives width and height from `document.body.clientWidth` and `document.body.clientHeight`. A resize event listener triggers the `render` function, updating the SVG and rectangle attributes via D3’s data-join and merge pattern, ensuring smooth, unobtrusive resizing without redeclaring elements.

JJasmine Ye Han
61% match
Loading thumbnail…

Fullsize.js Prototype

This prototype demonstrates a minimal reusable utility for creating full-screen D3 visualizations that respond to browser resize events. The `fullsize` function appends a fixed-position div, adds an SVG child, and on every resize extracts the div’s dimensions to update the SVG’s width and height attributes, then calls a user-supplied render function. The example renders two diagonal lines forming an X, with coordinates recomputed from the current width and height, using D3 v4’s data join and merge pattern.

CCurran Kelleher
60% match
Loading thumbnail…

Jared's Responsive Margin Convention

This example demonstrates a responsive design pattern where a full-viewport SVG resizes a rounded rectangle to fit the browser window, recalculating on every resize event. It showcases a reusable margin convention function that creates an inner group element translated by specified margins, returning the group and computed inner dimensions. The code uses D3 v5 selection methods like `selectAll`, `enter`, `merge`, and `attr`, along with a custom `myResponsiveComponent` function that binds to the body element and listens for window resizing.

JJared
60% match