RevaCSS

RevaCSS is a modern, native-web framework designed with an HTML and CSS-first approach, enabling the development of consistent interfaces using native HTML elements. This framework simplifies design management by allowing developers to set design defaults at a parent level while ensuring that components inherit these settings. Local adjustments can be made easily when unique configurations are necessary.

Key Features

• Efficient Design Management: Utilize inherited data-* attributes to apply shared design settings, reducing repeated design decisions.
• Native Interactions: The framework relies on native browser behavior for elements like buttons, forms, and popovers, ensuring no JavaScript runtime is required.
• Flexible Customization: Incorporate CSS custom properties, tokens, and low-specificity selectors that facilitate oversights and maintain style coherence.
• Adaptive Appearance: RevaCSS supports light, dark, and system themes with eight coordinated color palettes and options for Glass and Veil materials, tailoring designs to user preferences.
• Lightweight Framework: The minified core of RevaCSS adheres to a strict size limit of 15 KiB gzipped, with additional assets like fonts and icons kept separate.

Usage Examples

To get started, integrate RevaCSS with static pages or server-rendered templates by downloading the core CSS file:

<link rel="stylesheet" href="reva.min.css">

You can further customize the appearance through shared attributes:

<section data-theme="dark" data-palette="violet" data-size="large">
  <button type="button">Save changes</button>
  <button type="button" class="secondary" data-size="small">Back</button>
</section>

Demos

Explore various layouts to see RevaCSS in action:

• Forma · Marketing website: Features responsive navigation, pricing, and contact forms.
• Workspace · Dashboard: Showcases application shells and metrics monitoring.
• Fieldnotes · Journal: Displays articles and category pages in a structured format.
• Still · Shop: Includes product pages and galleries implemented with native selections.

Documentation and References

Comprehensive documentation can be found on the official site, covering installation, styling options, and API references, as well as guidance on how to implement various extensions, such as:

• Glass and Veil for unique visual effects.
• Motion for enhancing user interactions and popover effects.
• Icon Set for integrating SVG icons into applications.

RevaCSS stands as a robust framework ready to enhance web development with its innovative approach to styling and structure.