Introducing Native Elements

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.

More on native-elements.dev

Comments

[pierresaid]

That's really neat. I just created a very small project to try it out : random-cat-facts

[Mattia Astorino]

What do you think?

[pierresaid]

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

[Mattia Astorino]

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

[pierresaid]

Ah yes that's what I was looking for thanks