CSS Generators

Here are zero-dependency one-page CSS tools for rapid development without extra third-party libraries:

• Coolors — Color palette generator
• CSS Grid Generator — Visual CSS grid builder
• CSS Glass — Glassmorphism generator
• CSS Gradient — Gradient creation tool

Customized Scrollbar

A clean CSS snippet to customize Chrome’s default scrollbar:

/* Width */
::-webkit-scrollbar {
  background: var(--accent-cyan);
  width: 8px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #7a7a7a;
}

Icons

• FontAwesome Solid Icons
• FontAwesome with Vue Docs

Mockups & Diagramming

• Penpot — Open-source design & prototyping tool (Figma alternative)
• Excalidraw — Virtual whiteboard for sketching diagrams
• draw.io — Architecture, UML, and sequence diagrams

Note: PenPot, Excalidraw, and Draw.io are open-source. Excalidraw and Draw.io run purely on the client-side with no remote server storage unless manually enabled.

User Onboarding & Syntax Highlighting

• driver.js — Lightweight user onboarding tours
• highlight.js — Client-side syntax highlighting for code blocks

Markdown Conversion Tools

• marked.js — Fast client-side Markdown to HTML parsing
• pandoc — Universal document converter for command-line file transformations