octod/native-elements

Native HTML Elements with CSS superpowers. 🕶

Native Elements - Demo 1 - Demo 2 - Demo 3

🚧 Work in progress

This project is under development, use at your own risk.

• Native Elements - Live Demo
  • Install
  • Installation
    • With a bundler
    • Inside HTML
  • Customize elements
  • About outline

Install

Install the package with your package manager:

yarn add @native-elements/core

Installation

To enable your HTML superpowers, import the main, bundled CSS file in your project:

With a bundler

import '@native-elements/core'

Inside HTML

<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@native-elements/core/dist/native-elements.min.css">

Customize elements

Currently we provide a basic theme with all the custom properties used by the handled elements. To customize things, copy the theme file to your application :root {} selector, and change the variables you want.

:root {
  /* Custom palette */
  --accent-color: hotpink;
  --secondary-color: rebeccapurple;

  /* Native Elements settings */
  --ne-hr-background: var(--secondary-color);
  --ne-links-foreground: var(--accent-color);
}

Check the full theme file

⚠️ NOTE: The --accent-color property has been added to the theme just to simplify the accent color customization. By default elements don't use this property

About outline

Native Elements adds by default the outline indicator to any link elements when they are on :focus state.

Since the outline is useful for the keyboard navigation, you should never completely hide it. We strongly suggest to control when to hide the outline, for example using what-input you can do this by including it in your JavaScript file, then add this CSS snippet:

[data-whatintent='mouse'] a:focus,
[data-whatintent='mouse'] a:visited:focus {
  outline: none;
}

By this way the outline indicator will be visible only when the users is using the keyboard as input to navigate through the page.