Gist cd123280ba7f94c5893a

100%

Gist cd123280ba7f94c5893a

✓ Published0🌍 Public

Last edited Feb 4, 2012

Created on Jul 31, 2014

This example demonstrates responsive web design breakpoints using Twitter Bootstrap’s scaffolding system, showing how layout adjustments occur across device widths from landscape phones to large desktops. The code defines media query ranges in the `rwd.css` file, including max-width 480px, max-width 768px, and min-width 768px to 940px, plus a default 940px and min-width 1210px. It references a table image from Skitch illustrating the responsive behavior. The implementation relies on standard CSS media queries rather than JavaScript libraries, with Bootstrap’s predefined classes controlling grid and visibility at each breakpoint.

AI-generated description

Similar vizzes

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

76% match

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

75% match

Loading thumbnail…

NICAR 2015: Bootstrap: Responsive, mobile-first framework

This example shows how to build a responsive, mobile-first website using Twitter Bootstrap, based on a NICAR 2015 workshop presentation. It demonstrates setting up a project folder, linking Bootstrap’s CSS and JavaScript via CDN or local files, and adding custom styles with a separate stylesheet. The code uses Bootstrap’s grid system with media queries for extra small, small, medium, and large devices, and includes a basic HTML template with jQuery plugins. The material is presented as a step-by-step tutorial with code snippets and links to Bootstrap’s documentation.

Aandreaangeli

70% match

Loading thumbnail…

Gist 877067372de2e94cb6ada63db5ee3015

This example demonstrates a responsive CSS grid system built with Sass, showing how a six-column block scales proportionally within a twelve-column layout. The code defines reusable `grid-width` and `context-width` functions to calculate column dimensions based on configurable gutter and width values, while the `the-grid` mixin applies the resulting percentage width to any element. The `.block` class uses this mixin with six columns, producing a fluid layout that adapts to its container. The implementation relies on Sass’s function and mixin features, with no external JavaScript libraries or data sources involved.

Aangelicahl88

69% match

Loading thumbnail…

Minimal reponsive javascript framework

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.

SSimonS

68% match

Loading thumbnail…

Gist 7acc476942fa72698250

This example displays a CSS-based baseline grid overlay designed for aligning web layouts to a 16-column, 22-pixel vertical rhythm across a 960-pixel total width. The code uses linear gradients in WebKit, Mozilla, and Opera vendor prefixes to render red vertical column lines at 60-pixel intervals and cyan horizontal baseline lines at 22-pixel intervals. It relies on background-size and background-position properties to position the grid precisely, with the columns offset 10 pixels from the left edge. The visualization demonstrates a reusable CSS class for visual debugging of typographic and layout alignment in responsive design workflows.

Aallyraza

66% match

Loading thumbnail…

Responsive Images #css #style

This example demonstrates a pure CSS technique for making images responsive and retina-ready. It uses the `img` element with `max-width: 100%`, `display: block`, and `height: auto` to ensure images scale fluidly within their containers while maintaining aspect ratio. The comment notes that for retina displays, the width and height attributes should be set to half the original file dimensions. The CSS relies solely on standard style rules, with no JavaScript libraries or external APIs, and applies globally to all images in the document.

TTimeBandit

64% match

Loading thumbnail…

`prefers-color-scheme`

This example demonstrates several CSS techniques for responsive and adaptive web design, including the `prefers-color-scheme` media query for dark mode, `@font-face` for embedding a custom webfont, and nested media queries for serving different background images based on viewport width and device pixel ratio. It also shows a method for canceling parent padding using negative margins and `calc()`, alongside Stylus mixins like `sourceorder()` and `vcenter()` for table-based layout and vertical centering. The code references Codepen examples and MDN documentation for these CSS APIs.

Aabernier

63% match