Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
BBastiTee
Last edited Jan 29, 2021
Created on Nov 5, 2018

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.

AI-generated description

Similar vizzes

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
64% 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
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
58% match
Loading thumbnail…

Tailwindcss play link https://play.tailwindcss.com/jJ7APsi5d8 ide window prime for embedding some code

This example showcases a Tailwind CSS-based user interface for a code editor window, rendered as an SVG. It demonstrates a responsive layout with a top toolbar containing window controls and a sidebar toggle button, alongside a document title linking to a GitHub source file. The code uses Tailwind utility classes for styling, including grid layouts, flexbox, and custom pseudo-element effects for hover states. A reset button triggers a visual refresh, while the interface is designed with accessibility features like ARIA labels and focus states. The layout adapts across breakpoints, showing hidden elements on smaller screens.

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

Colours Page

This example displays a grid of named CSS colors, each rendered as a rounded rectangle with its name printed in bold text. The visualization uses a static CSV file (`colours2.csv`) containing color names, and the D3.js library to create an SVG element for each entry. The code places each color swatch and label sequentially, using D3’s `select`, `append`, and `attr` methods to build the layout. It also applies a text-shadow class to improve label legibility, and the resulting page is a reference guide for color names usable in web contexts.

Dd3noob
56% match
Loading thumbnail…

Colours Page

A gallery of CSS color names rendered as a grid of rounded rectangles, each labeled with its own name. The page reads a CSV file listing color names and displays them grouped by hue families. Using D3 v6 and SVG, the code appends a small `<svg>` per color, fills a rectangle with the named color via the `style` property, and adds a text label with a white shadow for legibility. The layout is a simple vertical list rather than a compact mosaic, and a few colors are omitted from the source data.

Dd3noob
56% match