🚧 Work in progress
This project is under development, use at your own risk.
Install the package with your package manager:
yarn add @native-elements/core
To enable your HTML superpowers, import the main, bundled CSS file in your project:
import '@native-elements/core'
<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">
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
--accent-color
property has been added to the theme just to simplify the accent color customization. By default elements don't use this property
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.