Skip to main content

​
Overview

Forge provides extensive customization options to make your dashboard truly yours. From visual theming to precise widget positioning, you have complete control over how your workspace looks and feels.

​
Theming

Forge supports comprehensive theming with light and dark modes, plus customizable color schemes.

​
Dark Mode

Forge can automatically switch between light and dark modes based on your system preferences. This ensures your dashboard always matches your operating system’s appearance.

​
Color System

The theme system uses CSS variables for consistent, customizable colors:

Background Colors

  • Primary: Main background color
  • Secondary: Secondary surfaces and cards
  • Tertiary: Hover states and subtle backgrounds
  • Brand: Accent color for important elements

Text Colors

  • Primary: Main text color
  • Secondary: Muted text for less important content
  • Tertiary: Subtle text for hints and placeholders
  • Inverted: Contrast text for dark backgrounds

Semantic Colors

  • Error: Red for errors and destructive actions
  • Warning: Yellow/orange for warnings
  • Success: Green for successful actions
  • Info: Blue for informational messages

Border & Effects

  • Border: Consistent border colors
  • Ring: Focus indicator colors
  • Fill: Icon and graphic fills
  • Outline: Outline colors for focused elements
Theme colors are defined in CSS variables, making it easy to create custom themes or adjust the existing color palette to match your preferences.

​
Layout System

Forge uses a responsive grid system that adapts to different screen sizes while maintaining precise control over widget positioning.

​
Grid-Based Layout

The dashboard uses a grid layout where each widget occupies a specific position:
1

Grid Structure

The desktop view uses a multi-column grid where widgets can span multiple grid cells both horizontally and vertically.
2

Widget Positioning

Each widget has positionX and positionY coordinates that determine its location on the grid.
3

Widget Sizing

Widgets have width and height values that define how many grid cells they occupy.
4

Auto-Layout

The system prevents overlapping widgets and provides visual feedback when positioning widgets.

​
Responsive Breakpoints

Full grid layout with multiple columns:
  • Widgets maintain custom positions
  • Drag-and-drop enabled for repositioning
  • Grid overlay visible in edit mode
  • Optimal for large screens and multi-tasking
Each widget type has predefined sizes for different screen sizes. The system automatically applies the appropriate size based on the current viewport.

​
Drag-and-Drop

Forge’s drag-and-drop system makes it easy to arrange your dashboard exactly how you want it.

​
How It Works

1

Enable Edit Mode

Click the “Edit” button in the navigation to activate drag-and-drop functionality.
2

Start Dragging

Click and hold on any widget header to begin dragging. The widget becomes semi-transparent to indicate it’s being moved.
3

Position Widget

Drag the widget across the grid. Valid drop zones are highlighted as you hover over them.
4

Drop Widget

Release the mouse button to place the widget in its new position. The layout updates automatically.
5

Save Changes

Exit edit mode to save your new layout. Changes persist across sessions.

​
Drag-and-Drop Features

Visual Feedback

  • Dragging widgets become semi-transparent
  • Valid drop zones highlight on hover
  • Grid cells show availability
  • Smooth animations during transitions

Collision Detection

  • Prevents widget overlap
  • Smart positioning suggestions
  • Snaps to grid for precise alignment
  • Reverts to original position if drop is invalid

Touch Support

  • Full touch screen support
  • Long-press to initiate drag on mobile
  • Touch-optimized drop zones
  • Haptic feedback on supported devices

Accessibility

  • Keyboard navigation support
  • Screen reader compatible
  • Clear visual indicators
  • Configurable activation distance

​
Advanced Positioning

For precise widget placement:
  1. Grid Overlay: In edit mode, a subtle grid overlay helps align widgets perfectly
  2. Snap to Grid: Widgets automatically snap to grid cell boundaries for clean layouts
  3. Drop Zones: Only valid positions are highlighted, preventing invalid placements
  4. Auto-Save: Position changes are saved immediately when you drop a widget
Drag-and-drop is only available on desktop views. On mobile and tablet, widgets use a fixed stacked layout for optimal viewing.

​
Layout Best Practices

​
Organization Strategies

Place your most important widgets at the top of your dashboard:
  • Frequently accessed information first
  • Time-sensitive widgets (meetings, inbox) in prominent positions
  • Reference widgets (weather, clock) in supporting positions

​
Visual Balance

Create an aesthetically pleasing dashboard:
  1. Spacing: Leave some empty space between widgets for breathing room
  2. Alignment: Align widget edges where possible for a clean look
  3. Size Variation: Mix large and small widgets to create visual interest
  4. Symmetry: Consider balanced layouts for a professional appearance
Take a screenshot of your ideal layout before making major changes. This helps you remember what worked well if you want to revert.

​
Customization Tips

​
For Productivity

  • Keep the most frequently used widgets in the top-left (natural reading start point)
  • Use larger widgets for primary tasks, smaller ones for reference information
  • Group task management widgets (Todo, Kanban) together for workflow efficiency

​
For Information Display

  • Place passive information widgets (Weather, Clock, Crypto) in peripheral areas
  • Use the GitHub Heatmap widget as a visual anchor point
  • Position the Frame widget for embedded tools where you’ll reference them most

​
For Focus

  • Minimize visual clutter by limiting the number of widgets per dashboard
  • Use multiple dashboards instead of cramming everything into one view
  • Hide widgets you rarely use by moving them to dedicated dashboards

​
Next Steps

Widget System

Explore all available widgets and their capabilities

Integrations

Connect external services to unlock more widget functionality

Build docs developers (and LLMs) love

Get started for freeTalk to us