Skip to main content
SimilarExport ZIP
100%

Generated by SassMeister.com.

✓ Published0🌍 Public
LLucyI
Last edited Jun 30, 2015
Created on Jun 30, 2015

This example demonstrates a modular scale for typography, applying a consistent proportional size and margin rhythm to headings and paragraphs. A Sass loop through the heading elements h6 to h1 assigns font sizes computed by the Modular Scale library, with negative margins creating a tight vertical rhythm. The body’s line-height is set to the golden ratio (1.61803) via `$ms-ratio`, and headings use `white-space: nowrap` and `overflow: hidden` to preserve their single-line layout. Latin filler text shows the scaling effect across all levels.

AI-generated description

Similar vizzes

Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a responsive web page layout using the Susy framework for Sass, showing how a seven-column grid reconfigures at a wider breakpoint into a twelve-column layout with distinct regions for banner, navigation, main content, summary, and footer. The page includes a visible grid background overlay generated by Susy's `susy-grid-background` mixin, which displays column and gutter proportions. The layout uses Susy mixins like `container`, `span-columns`, `prefix`, and `pad`, while the HTML provides semantic structural elements for comparison.

LLucyI
65% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a Sass (SCSS) utility-class generator that creates a custom design-token system and applies multiple generated classes to a single element. It shows how `@mixin`, `@extend`, `map.set`, `map.get`, and `unique-id()` are used to dynamically define and store reusable mixins for padding, margin, text color, and background-color. The code iterates over token maps for sizes (40, 48, 56) and colors (red, blue, green), generating CSS custom properties with fallback values (e.g., `var(--size-40, 2.5rem)`). The final `.element` rule combines these mixins via `@include apply-mixin`, resulting in compiled CSS that sets padding, margin, color, and background-color. The example’s output is visible in the generated `output.css` file, which uses an expanded output style with Dart Sass 1.32.12.

HHypercubed
62% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates how Sass preprocessing turns SCSS source code into standard CSS, using the SassMeister.com web tool. The input SCSS defines a `solidblock` mixin that mixes a background color with white at 40%, then applies it to `.block` and `.block-blue` classes, resulting in rendered HTML blocks with gray and white backgrounds. The snippet also shows nested selectors with a hover pseudo-class and a `$primary-color` variable. The CSS output and rendered HTML are displayed alongside the original SCSS and HTML files, illustrating the compilation pipeline from gist-embedded input to final styled output.

IIsaKiko
60% match
Loading thumbnail…

line svg

This example demonstrates how CSS and inline styles interact to control the appearance of an HTML heading, using the Atkinson Hyperlegible font. A blue `h1` element overrides a green CSS rule and a purple text class, while a hover state increases the font size and adds a red fill with reduced opacity. The page renders a largely empty SVG element, with magenta-colored bars and text styled through CSS classes. The code relies on standard HTML5, CSS styling, and the Google Fonts API to load the typeface, with React not visibly used in this minimal static page.

Ppoppy
58% match
Loading thumbnail…

Pseudo Horizontal

This example uses CSS and JavaScript to render a minimalist typographic composition within an SVG canvas. It presents four vertically stacked black rectangles of decreasing widths, each paired with a large letter (A, B, C, D) on the left. The layout creates a pseudo-horizontal effect, suggesting a progressive narrowing of space. The code directly uses SVG elements like `rect` and `text`, styled with the Share Tech font, to achieve the visual hierarchy without any external data or interaction.

Aa0x0
57% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a Sass mixin and map system that dynamically generates utility classes for spacing and colors, then applies them to a single `.element` via a custom `apply-mixin` function. It shows how `map.set`, `unique-id`, and `@extend` are used to create modular, reusable CSS without hardcoding selectors. The code defines mixins like `define-mixin` for padding, margin, text color, and background color, pulling values from a `$tokens` map. The output CSS shows the compiled rules for `.element`, which uses the generated utilities. The source is a SCSS file processed by Dart Sass, with no JavaScript or external data.

HHypercubed
57% match
Loading thumbnail…

Gist de30f3fbfcf277da051e

This example demonstrates a text-balancing technique that adjusts the spacing of words within a paragraph to create a visually even, block-like layout. It shows how justified text can be manipulated so that each line fills the container width more uniformly, improving the appearance of dense typographic blocks. The code relies on the jQuery library and a custom `smartresize` event handler to recalculate text wrapping on window resize. It also implements a debouncing function to limit the frequency of resize-triggered updates, ensuring smooth performance during interactive adjustments. The underlying logic inspects the element’s computed text-align property to conditionally apply justification, while preserving the original DOM structure through careful tag and span manipulation.

CCindyJonesHulfachor
57% match
Loading thumbnail…

Base CSS document with google fonts, Eric Meyer's reset.css, Ethan Schoonover's solarized palette and some basic responsive code.

This example demonstrates a clean, typography-focused HTML/CSS foundation for a data-visualization project. It imports the "Roboto Slab" and "Exo 2" fonts via Google Fonts, resets default browser styling with Eric Meyer's reset.css, and applies Ethan Schoonover's Solarized color palette. The code uses standard CSS properties, including a responsive `.container` class with a media query for narrow screens, and sets up basic typography and spacing for a chart area. It does not implement any JavaScript or dynamic visualizations, serving only as a base stylesheet for future graphical work.

AAbsarF
57% match