HTML elements with CSS superpowers. 🔥
Native Elements (NE) is not a CSS framework, no bundlers required or tons of configurations to set. You can consider it as a customizable plug-n-play library for your site which helps you easily style all the available HTML elements using CSS custom properties, classes, attributes, or whatever you want in less than 6 kB
. You can also build your class-based CSS framework on top of it.
Features
This library is built using modern CSS feature and best practices, the compiled version supports only the latest two Chrome, Safari, Firefox, and Edge versions and this is possible thanks to Browserslist
Modern
Built on top of PostCSS takes advantage of exciting new CSS features, like custom and logical properties. If you use it from source, you can define custom selectors and mixins to make styling even easier.
Framework agnostic
In the age of Flexbox, CSS grid, and other exciting layout features, there is less and less need for a bloated CSS framework. What you do need is a simple foundation on top of which to build your styles.
If you're using the compiled version, just drop it inside your application main style. It's just CSS, so it works with React, Vue, Angular and Svelte.
Easy theming
With our theme builder tool you can create, tweak, and export your theme easily. In the future, we'll share new premade themes.
Making a theme
Thanks to the Theme Builder app you can create your color palette, visually change and preview all the available custom properties, and download a ready-to-use theme that you can include in your project.
Using themes
Once you have your set of custom properties, there few ways to use it. You can put the custom properties inside the global :root
of your css, or scope it inside a custom selectors.
Global themes
When you put your theme inside the :root
selector it will be applied to all the elements of your page. This is useful when you have one theme active at time:
:root {
--accent-color: hsl(220, 100%, 50%);
--ne-global-background: hsl(0, 0%, 100%);
--ne-global-foreground: hsl(0, 0%, 0%);
--ne-body-font-family: sans-serif;
--ne-root-font-size: 100%;
--ne-body-font-size: 1.125rem;
--ne-selection-foreground: hsl(0, 0%, 100%);
--ne-selection-background: hsl(233, 64%, 72%);
--ne-outline-width: 2px;
--ne-outline-color: var(--accent-color);
--ne-basic-line-height: 1.5;
--ne-headings-scale: 1.25;
--ne-quote-font-size: 2rem;
--ne-cite-foreground: var(--accent-color);
--ne-cite-font-size: 1rem;
--ne-cite-start-sign: '—';
--ne-links-foreground: var(--accent-color);
--ne-links-active-foreground: hsl(233, 64%, 52%);
--ne-del-foreground: hsl(337, 74%, 31%);
--ne-del-background: hsl(0, 100%, 94%);
/* ... */
}
Scoped themes
The CSS's cascade is very useful to make scoped themes, it affects custom properties like other properties.
If you want to divide your theme into multiple pieces, you can wrap the custom properties inside separate selectors. Every element inside that selector will inherit the theme, while elements outside it will use their default style.
:root[data-theme="dark"] {
--accent-color: hsl(220, 100%, 50%);
--ne-global-background: hsl(0, 0%, 100%);
--ne-global-foreground: hsl(0, 0%, 0%);
--ne-body-font-family: sans-serif;
--ne-root-font-size: 100%;
--ne-body-font-size: 1.125rem;
/* ... */
}
.NeumorphicTheme {
--accent-color: hsl(220, 100%, 50%);
--ne-global-background: hsl(0, 0%, 100%);
--ne-global-foreground: hsl(0, 0%, 0%);
--ne-body-font-family: sans-serif;
--ne-root-font-size: 100%;
--ne-body-font-size: 1.125rem;
/* ... */
}
When to use it
- You're working on projects for modern and secure web browsers
- You're not going to mix other CSS frameworks
- You want to save time sacrificing a bit of flexibility.
Top comments (5)
That's really neat. I just created a very small project to try it out : random-cat-facts
What do you think?
It would be nice to be able to access the demo from the demo folder online. So that we can have a better idea of the full capabilities of native elements
Have you tried the theme builder? It shows you all the elements when you click "Preview and Download" (the demo page is just an html file with all the elements)
app.native-elements.dev
Ah yes that's what I was looking for thanks