Skip to main content
SimilarExport ZIP
100%

Gist 4e2713779a93371b2ba61c7cf3c0841b

✓ Published0🌍 Public
HHerbCaudill
Last edited Mar 1, 2020
Created on Mar 1, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Custom CSS for Dynalist

This example shows how to customize the appearance and typography of Dynalist, a hierarchical note-taking app, through custom CSS. It demonstrates how to style tags, notes, code blocks, the current line highlight, page headers, heading levels (H1, H2, H3), and bullet points, while also resizing the CSS textarea and setting its font to a monospace stack. The code relies on plain CSS, including pseudo-classes like `:hover` and structural selectors such as `.Node-noteContainer > [class*='Node']` and `.Node-self.is-collapsed.is-parent > .Node-bullet`, without external libraries. It uses font families like 'Fira Code' and 'Menlo', with opacity, border-radius, and padding for visual refinement.

HHerbCaudill
69% match
Loading thumbnail…

A stylesheet for a very compact and post-it-colored Jira sprint board

This example presents a compact, kiosk-like Jira Kanban board styled for post-it-note readability. The stylesheet filters URLs to a specific rapidView board and applies custom colors to page headers, swimlanes, and issue cards, using CSS custom properties and attribute selectors. It hides irrelevant controls via `display: none`, reduces padding and font sizes for a tighter layout, and truncates long summaries with `-webkit-line-clamp`. Completed tasks shrink, overlap, and become semi-transparent using `opacity`, while assignees are absolutely positioned to the top-right corner.

BBastiTee
63% 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
61% match
Loading thumbnail…

Gist 467901440093a9904541

This example demonstrates a Gulp task that automates the generation of critical CSS for a WordPress theme. It shows the process of downloading a remote stylesheet, analyzing its rules, and extracting only the styles needed for above-the-fold rendering of a specific page. The task uses the `request` library to fetch the CSS file, `criticalcss` to parse and evaluate the rules against the target URL, and the Node.js `fs` module to write the resulting critical CSS to a local file.

GGolodhros
61% match
Loading thumbnail…

CSS Colors from Mozilla

This example shows a simple React app that renders two text elements: a large "Hello React!" message and a smaller "...with CSS" line in rebeccapurple, based on the CSS Colors from Mozilla documentation. The main component uses JSX within a `<g>` element, though the code does not employ SVG-specific behavior. Styling is handled entirely through an external stylesheet (`index.css`), which sets font sizes and text alignment, while the React DOM library mounts the component to the `#root` div. The page loads React and ReactDOM from a CDN, and the bundled script runs client-side.

DDavid Allyn
60% match
Loading thumbnail…

Theme Experiment

This example displays a color palette and typography system as a static SVG composition, using a custom theme object to define blues, yellows, greens, and grays. It renders square swatches in two rows, separated by a line, followed by text samples for headline, subheadline, and body styles. The code uses d3.v4 selections and appends rectangles, lines, and text elements via methods like `attr` and `style`. The rendering approach is direct SVG manipulation with a Lato font from Google Fonts, and the layout is computed from explicit dimensions and spacing constants.

CCurran Kelleher
59% match
Loading thumbnail…

HTML+CSS jotdown notes misc

This example shows a GitHub-style file listing row where not-yet-loaded text is indicated by grey skeleton screen placeholders. Skeleton loading blocks replace commit message and timestamp content using CSS `clip-path` insets and a background gradient with a looping `skeleton-loading` animation. The markup is structured with ARIA roles for grid rows and cells, and an inline SVG octicon folder icon renders the directory indicator. The code demonstrates a pure HTML+CSS technique for improving perceived performance without JavaScript.

GGerHobbelt
59% match
Loading thumbnail…

Gist 1b1889baaec2adffe574

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

GGolodhros
59% match