Gist 9044854

100%

✓ Published0🌍 Public

Last edited Feb 17, 2014

Created on Feb 17, 2014

This visualization displays the media queries from all stylesheets on the page as a flat list of text strings, extracted directly from the browser’s CSSOM. It shows each unique media condition—such as screen widths or print rules—in the order they appear across linked and embedded stylesheets. The code uses the native `document.styleSheets` collection and iterates over `cssRules`, filtering for rules that have a `media` property and pushing the first media query string into an array. No external libraries are used; it relies solely on vanilla JavaScript DOM APIs.

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

68% match

Loading thumbnail…

Gist 16d0e6050f60256517db942d1fe29703

This example demonstrates a technique for remotely fetching and inspecting CSS stylesheets, particularly extracting image URLs from `srcset` attributes and resolving cross-origin stylesheet rules. The code uses the Fetch API with a CORS proxy to retrieve stylesheet contents, then parses `srcset` strings with a custom regular expression to collect image candidates. It also leverages `document.styleSheets`, `cssRules`, and a temporary `<style>` element to access rule data, while caching processed elements in a `WeakSet` to avoid duplication. The visualization output is logged to the console, showing the collected stylesheet rules and image URLs from the current page.

NN0taN3rd

67% 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

62% match

Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith

61% match

Loading thumbnail…

Gist cd123280ba7f94c5893a

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.

Aalessioalex

60% match

Loading thumbnail…

Gist f9294831c623824d1181

This example provides a set of Sass mixins for implementing the CSS Flexible Box Layout (Flexbox) module, covering core properties like display, flex, align-items, flex-direction, flex-wrap, order, and justify-content. It includes vendor-prefixed declarations for older WebKit, Mozilla, and Microsoft browsers, ensuring cross-browser compatibility. The mixins also offer ready-to-use alignment utilities, such as flex-align-center, flex-align-stretch, flex-align-top, and flex-align-bottom, which combine the necessary flexbox properties to quickly position items within a container. The code does not include any data or visualization, serving purely as a reusable styling toolkit.

Aalexiscollado

60% 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

60% 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

59% match