@byte-ui/restyle

v0.2.0

Published

3 months ago

Classless CSS reset for modern web apps

0High
0Medium
0Low

afomera

css reset classless styles minimal forms byte-ui

@byte-ui/restyle

A quiet, classless CSS reset for modern web apps

Restyle is an opinionated CSS reset that provides sensible defaults for HTML elements without requiring any classes. Perfect for building new websites and apps from scratch, or as a foundation for your design system.

Features

🎨 Classless - Style HTML elements directly, no classes needed
🌙 Dark mode - Automatic dark mode via prefers-color-scheme
♿ Accessible - WCAG AA compliant colors and focus states
📱 Responsive - Mobile-first and responsive by default
🎯 Minimal - Small footprint, ~4KB gzipped
🔧 Customizable - CSS custom properties for easy theming
🚀 Modern - Built for evergreen browsers

Installation

Via CDN

Standard (classless only):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@byte-ui/restyle/dist/restyle.min.css">

Plus (includes utility classes):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@byte-ui/restyle/dist/restyle-plus.min.css">

Via npm

npm install @byte-ui/restyle

Then import in your CSS:

Standard:

@import '@byte-ui/restyle';

Plus (with utilities):

@import '@byte-ui/restyle/plus';

Or import individual modules:

@import '@byte-ui/restyle/reset';
@import '@byte-ui/restyle/base';
@import '@byte-ui/restyle/typography';
@import '@byte-ui/restyle/forms';
@import '@byte-ui/restyle/tables';
@import '@byte-ui/restyle/elements';

/* Optional utilities */
@import '@byte-ui/restyle/utilities';

Usage

Just include the stylesheet and start writing semantic HTML. All elements are styled automatically:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@byte-ui/restyle/dist/restyle.min.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This is automatically styled with Restyle.</p>

  <form>
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="[email protected]">

    <button type="submit">Submit</button>
  </form>
</body>
</html>

Customization

Restyle uses CSS custom properties for easy theming. Override these variables to customize the look:

:root {
  /* Colors */
  --color-text: hsl(220, 10%, 15%);
  --color-text-muted: hsl(220, 10%, 45%);
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-subtle: hsl(220, 15%, 98%);
  --color-border: hsl(220, 15%, 88%);
  --color-border-hover: hsl(220, 15%, 70%);
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-hover: hsl(220, 90%, 48%);
  --color-focus: hsl(220, 90%, 56%);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
    Consolas, monospace;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 2px 4px 0 rgb(0 0 0 / 0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

Custom Theme Example

:root {
  --color-primary: hsl(280, 80%, 55%); /* Purple theme */
  --font-family: 'Inter', sans-serif;
  --radius-md: 0.5rem; /* More rounded corners */
}

Dark Mode

Restyle uses modern CSS light-dark() function and color-scheme for automatic theme switching. By default, it respects the user's system preference.

Automatic (Default)

:root {
  color-scheme: light dark; /* Allows automatic switching */
  --color-text: light-dark(hsl(220, 10%, 15%), hsl(220, 15%, 92%));
}

Manual Override

Force a specific theme by setting color-scheme on the HTML element:

/* Force light mode */
html {
  color-scheme: light;
}

/* Force dark mode */
html {
  color-scheme: dark;
}

Or via JavaScript:

// Force dark mode
document.documentElement.style.colorScheme = 'dark';

// Force light mode
document.documentElement.style.colorScheme = 'light';

// Auto (system preference)
document.documentElement.style.colorScheme = 'light dark';

Browser Support

The light-dark() function is supported in:

Chrome/Edge 123+
Firefox 120+
Safari 17.5+

For older browsers, colors will default to the first (light mode) value.

What's Included

Restyle provides thoughtful defaults for:

Reset - Browser normalization and box-sizing
Base - Root variables and document styles with improved focus states
Typography - Headings, paragraphs, lists, links, code
Forms - Inputs, buttons, selects, checkboxes, radios, ranges
Tables - Clean table styling with hover states
Elements - Details/summary, dialog, and other semantic HTML
Utilities (Optional) - Helper classes for layout and display

Focus Improvements

Restyle uses :focus-visible to show focus outlines only for keyboard navigation, not mouse clicks. This provides a better user experience while maintaining accessibility.

Details/Summary

Styled disclosure widgets with custom arrows and smooth animations:

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed!</p>
</details>

Dialog

Native HTML dialogs with backdrop blur and animations:

<dialog id="my-dialog">
  <header><h3>Dialog Title</h3></header>
  <article><p>Dialog content...</p></article>
  <footer>
    <form method="dialog">
      <button>Close</button>
    </form>
  </footer>
</dialog>

<script>
  document.getElementById('my-dialog').showModal();
</script>

Utility Classes (Optional)

Import @byte-ui/restyle/utilities for helpful classes:

.sr-only - Screen reader only (visually hidden)
.container - Max-width content wrapper
.flex, .grid - Display utilities
.text-center, .text-right - Text alignment
.gap-sm, .gap-md, .gap-lg - Gap utilities

<div class="container">
  <div class="flex gap-md">
    <button>One</button>
    <button>Two</button>
  </div>
</div>

Browser Support

Restyle supports all evergreen browsers:

Chrome/Edge (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)

Internet Explorer is not supported.

Philosophy

Restyle is designed to be:

Quiet - Provides sensible defaults without being opinionated about your design
Minimal - Only styles what's necessary, leaving room for your custom styles
Accessible - WCAG AA compliant colors and focus states out of the box
Modern - Leverages modern CSS features like custom properties and :focus-visible

Use with Byte UI

Restyle works great on its own or alongside Byte UI web components:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@byte-ui/restyle/dist/restyle.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@byte-ui/core/dist/autoloader.js"></script>

Development

# Install dependencies
npm install

# Build CSS
npm run build

# Watch for changes
npm run dev

License

MIT License - see LICENSE for details

Byte UI Core - Web component library
Byte UI Docs - Full documentation and examples

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@byte-ui/restyle

Features

Installation

Via CDN

Via npm

Usage

Customization

Custom Theme Example

Dark Mode

Automatic (Default)

Manual Override

Browser Support

What's Included

Focus Improvements

Details/Summary

Dialog

Utility Classes (Optional)

Browser Support

Philosophy

Use with Byte UI

Development

License

Related