@nuiverse/core

Nuiverse UI is an open-source design system of Nuinalp for products and digital experiencies, consists in a serie of resources and principies for create a awesome and rich experience.

The Nuiverse UI core package is a series of individual styles and web components built with StencilJS.

🛠 Status: In Development

Nuiverse is currently in development.

Features

• Tiny, highly optimized components built with Stencil
• No build or compiling required
• Simply add the static files to any project
• Lazy-loaded components without configuration
• Asynchronous rendering

How to use

Vanilla HTML

Easiest way to start using Nuiverse UI Core is by adding a script tag to the CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nuiverse/core@latest/dist/nuiverse-ui/nuiverse-ui.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@nuiverse/core@latest/dist/nuiverse-ui/nuiverse-ui.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@nuiverse/core@latest/dist/nuiverse-ui/nuiverse-ui.css" rel="stylesheet">

Install in project via NPM

$ npm install @nuiverse/core@latest

Any Nuiverse UI component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as document.createElement('nv-button').

Framework Bindings

The @nuiverse/core package can by used in simple HTML or by Vanilla JavaScript without any framework at all. The bindings for other frameworks like Vue, React or Angular is under development.

Documentation

The documentation is in currently development, an initial version is avalible on the GitLab repo, Portuguese only. The english documentation are in development. But you can to see our tecnical documentation, avalible inside in all our components folders generated by Stencil.

Components available

• Alert
• Avatar
• Badge
• Breadcrumbs
• Button
• Checkbox
• Card
• Chip
• Code
• Collapse
• Dialog
• Embed
• Grid
• Label
• List
• Loader
• Navigation view
• Progress
• Radio
• Rating
• Scroll
• Select
• Slider
• Sub-header
• Switch
• Table
• Tabs
• TextField
• Toast
• Tooltip
• Upload

We also have a modifiers, a series of individual css classes for personalize and make easy to construct a projetc. You can to check our tests pages for more information, the documentation about this is availible soon.

• Borders
• Clearfix
• Colors
• Display
• Flex
• Float
• Image replacement
• Overflow
• Position
• Screen readers
• Shadows
• Sizing
• Spacing
• Text
• Typography
• Vertical align
• Visibility

Project setup

git clone https://gitlab.com/nuinalp/nuiverse/nuiverse-ui.git
cd nuiverse-ui

and run:

npm install
npm start

To build the components for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Future Goals

Our goal is to make a best open-source design language of the world. In the next weeks and months our are work for add more features, new components, more flexibilit, more documentation, improve the currently components, add more accebility and fix all possibles bugs.

Support

Do you have a question? Please open an issue on our main repo.

License

BSD Clause 3

Copyright (c) 2019 The Nuinalp Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.