README
¶
Open Props CSS Framework for Go
A minimal, classless CSS framework for Go web applications, built on Open Props design tokens. Create beautiful dashboard interfaces with semantic HTML—no classes required.
Features
- 🎨 Dual theme support: Automatic light/dark theme switching based on system preferences
- 📦 Zero JavaScript: Pure CSS solution, no runtime dependencies
- 🏗️ Classless by default: Semantic HTML looks great out of the box
- 📱 Responsive: Mobile-first design that works on all devices
- 🚀 Go-native: Embedded CSS files with simple HTTP handlers
- 🎯 Dashboard-ready: Pre-styled navigation and layout components
Installation
go get github.com/riclib/open-props-css
Quick Start
package main
import (
"net/http"
"github.com/riclib/open-props-css/uicss"
)
func main() {
// Serve the CSS file
http.Handle("/static/dashboard.css", uicss.CSSHandler())
// Optional: Serve readable CSS for development
http.Handle("/static/dashboard.readable.css", uicss.ReadableCSSHandler())
// Serve the interactive stylebook
http.Handle("/stylebook", uicss.StylebookHandler())
// Your application routes...
http.HandleFunc("/", dashboardHandler)
http.ListenAndServe(":8080", nil)
}
In your HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/dashboard.css">
</head>
<body>
<nav>
<h1>My App</h1>
<ul>
<li><a href="#" class="active">Dashboard</a></li>
<li><a href="#">Settings</a></li>
</ul>
</nav>
<main>
<header>
<h2>Overview</h2>
<button class="primary">New Item</button>
</header>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project Alpha</td>
<td><span class="badge success">Active</span></td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
API
uicss.CSSHandler() http.Handler
Returns an HTTP handler that serves the compiled CSS file with appropriate caching headers.
uicss.ReadableCSSHandler() http.Handler
Returns an HTTP handler that serves a non-minified, readable version of the CSS for development and debugging.
uicss.StylebookHandler() http.Handler
Returns an HTTP handler that serves an interactive stylebook showcasing all available components and styles.
uicss.CSS() string
Returns the raw CSS as a string for inline embedding or custom processing.
uicss.ReadableCSS() string
Returns the non-minified CSS as a string for development environments.
Type-Safe CSS Variables (op package)
The op package provides Go-native access to all Open Props CSS variables:
import "github.com/riclib/open-props-css/op"
// Use type-safe CSS variables
style := fmt.Sprintf("color: %s; padding: %s;",
op.Color.Blue(6), // "var(--blue-6)"
op.Size(4)) // "var(--size-4)"
// Build complex styles with the fluent API
buttonStyle := op.NewStyle().
Background(op.Color.Primary()).
Color("white").
Padding(op.Size(3)).
BorderRadius(op.Radius(2)).
String()
Available APIs:
- Colors:
op.Color.Red(5),op.Color.Background(), etc. - Sizes:
op.Size(4),op.SizeFluid(3), etc. - Typography:
op.Font.Size(3),op.Font.Weight(6), etc. - Animations:
op.Animation.FadeIn(),op.Animation.Bounce(), etc. - And more: Shadows, borders, gradients, easing functions
See CSSREF.md for complete documentation.
Theme Support
The framework automatically respects the user's system theme preference. You can also manually control the theme:
<!-- Auto theme (default) -->
<html>
<!-- Force light theme -->
<html class="light">
<!-- Force dark theme -->
<html class="dark">
Semantic HTML Structure
The framework is designed to work with semantic HTML:
<nav>- Automatically styled as a sidebar<main>- Content area with proper spacing<header>- Page headers with flex layout<table>- Styled data tables with hover states<button>- Styled buttons with hover/active states<form>elements - Inputs, selects, and textareas
Optional CSS Classes
While the framework is classless by default, some optional classes are available:
Buttons
.primary- Primary action button.secondary- Secondary action button.small,.large- Size modifiers
Components
.badge- Inline status indicators.card- Content containers.alert- Notification messages.active- Active navigation state
Utilities
.text-muted- Muted text color.text-center,.text-right- Text alignment.flex,.grid- Layout helpers.mt-1to.mt-4- Margin top spacing.gap-1to.gap-4- Flex/grid gap spacing
Development
To modify the CSS:
- Clone the repository
- Install dependencies:
npm install - Edit CSS files in
src/ - Build:
npm run build - Test:
go run cmd/demo/main.go
Demo
Run the demo server to see all components:
go run cmd/demo/main.go
Then visit:
- Dashboard demo: http://localhost:8080/
- Interactive stylebook: http://localhost:8080/stylebook
License
MIT
Credits
Built on top of Open Props by Adam Argyle.
Directories