ErisUI 2 is a very simple and easy to use UI Framework for building pretty and speedy user interfaces.
ErisUI 2 has many custom elements to speed up your development:
eui-avatar: User avatar component.eui-button: Versatile button component with various styles.eui-checkbox: Custom styled checkbox.eui-chip: Compact elements for representing inputs, attributes, or actions.eui-code: Code snippet display.eui-icon: Icon component for displaying SVG icons.eui-input: Styled input fields.eui-app-nav: Main application navigation sidebar.eui-nav-item: Individual navigation items for the app nav.eui-loader: Loading spinners and indicators.eui-progressbar: Visual progress indicators.eui-switch: Toggle switch component.
ErisUI is available using JSDelivr CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/3r1s-s/erisui-2@dist/erisui.css">
<script src="https://cdn.jsdelivr.net/gh/3r1s-s/erisui-2@dist/erisui.js"></script>This code snippet is a buildless example that loads ErisUI from a CDN.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/3r1s-s/erisui-2@dist/erisui.css">
<script src="https://cdn.jsdelivr.net/gh/3r1s-s/erisui-2@dist/erisui.js"></script>
</head>
<body>
<div style="padding: 20px;">
<h1>Hello World!</h1>
<eui-button>Button</eui-button>
</div>
</body>This code snippet is an example of a basic app using ErisUI.
<head>
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/3r1s-s/erisui-2@dist/erisui.css?cache">
<script src="https://cdn.jsdelivr.net/gh/3r1s-s/erisui-2@dist/erisui.js?cache"></script>
</head>
<body class="">
<div id="app">
<eui-app-titlebar name="Title"></eui-app-titlebar>
<eui-app-nav></eui-app-nav>
<div class="app-wrapper">
<div class="main-wrapper">
<div class="main" id="main">
</div>
</div>
</div>
</div>
</body>