Skip to main content
100%

Convert SketchApp line height to CSS

✓ Published0🌍 Public
Aackuser
Last edited Jul 18, 2018
Created on Feb 4, 2022

This example shows how to convert a SketchApp line-height value into a CSS line-height for web styling. It demonstrates the formula `line-height: calc(33/18)`, where the Sketch line-height is divided by the font size, using the CSS `calc()` function. The code defines a `.text` class with `font-size: 18px` and the calculated line-height, relying on standard CSS syntax rather than a JavaScript library.

AI-generated description

Similar vizzes

Loading thumbnail…

Making cool lines in Sketch

A generative drawing built with the Sketch JavaScript API draws a symmetric, web-like pattern of red lines on a black artboard. The example shows how four nested loops create a series of straight ShapePath segments, each with semi-transparent red borders, that collectively form a repeating geometric motif. It demonstrates programmatic layer creation, setting frame and style properties, and using the `adjustToFit` method to size the group. The code uses `sketch.getSelectedDocument`, `Artboard`, `Group`, and `ShapePath` to generate the composition directly within Sketch's document model.

KKevinGutowski
57% 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
56% match
Loading thumbnail…

Gist fa954043cfef0a0c69112a156ff518c2

This example is a CSS code snippet that addresses a mobile browser viewport bug. The code demonstrates a workaround for iPhones where the CSS `100vh` unit incorrectly calculates the viewport height, failing to account for the browser's bottom menu overlay. The fix is implemented by declaring a `min-height` property twice on the `body` element: first with the standard `100vh` value, and then with the `-webkit-fill-available` value for WebKit-based browsers. Additionally, the `html` element receives a `height` of `-webkit-fill-available` to ensure full-page coverage.

KKopylovVitalik
55% 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
55% match
Loading thumbnail…

Gist 9d6f5a0980393c12aca5243aae8947e0

This example demonstrates how to modify font attributes for a selected range of text within a Sketch document using the Sketch JavaScript API. It applies small-caps styling by accessing the text layer’s editing delegate and text storage, then constructs an `NSFontFeatureSettingsAttribute` dictionary to adjust the font descriptor. The code specifically uses `NSFontFeatureTypeIdentifierKey` and `NSFontFeatureSelectorIdentifierKey` for the `kLowerCaseType` and `kLowerCaseSmallCapsSelector` settings, then creates a new `NSFont` with `NSFontDescriptor` and applies it to the selected range via `addAttributes:range:`.

KKevinGutowski
55% match
Loading thumbnail…

Gist 4e2713779a93371b2ba61c7cf3c0841b

This example shows a custom stylesheet for the note-taking and knowledge-management app Roam Research, which uses the app’s CSS variables and element selectors to alter the interface’s typography, spacing, and visual hierarchy. It sets the main font to Roboto, then applies the monospaced Fira Code font to headings and page titles, adjusts the weight and letter-spacing of different heading levels, and reduces spacing below the page title. The code also lightens bullets, vertical guides, and sidebar backgrounds, hides the “SHORTCUTS” heading, and truncates breadcrumb text with ellipses, using selectors like `.roam-block-container h1` and `.rm-reference-main button` to target specific components. The styles rely on standard CSS, including pseudo-elements and attribute selectors, and do not use any JavaScript libraries or data APIs.

HHerbCaudill
55% match
Loading thumbnail…

Change font size programmatically

This example demonstrates how to programmatically change the font size of a selected text layer within a Sketch document. It shows the direct manipulation of a text layer’s typographic properties through the Sketch JavaScript API. The code uses the `sketch` library to access the document, retrieves the first selected layer, and applies a new font size using `NSFont.fontWithDescriptor_size` with a value of 12. After modifying the layer’s `_object`, it calls the inspector controller’s `reload()` method to refresh the UI and reflect the change.

KKevinGutowski
54% match
Loading thumbnail…

HTML CSS, and SVG

This example demonstrates the fundamental drawing capabilities of SVG within an HTML document, showcasing the creation and styling of primitive shapes including circles, rectangles, lines, and paths. The code employs the `transform` attribute to scale and translate entire groups of elements, applying both global and group-level CSS styling through a linked stylesheet. The SVG canvas is set to 960 by 500 pixels, with the root group scaled by 1.5 to enlarge the displayed content. Custom CSS classes like `.lines` define specific stroke properties for line and path elements, while inline attributes and presentation attributes control individual shape fills and borders. The example is rendered entirely through native HTML and SVG structure, with no external graphics libraries required.

YYifu Chen
54% match