npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

kron-ui

v0.6.9

Published

Kron Ui Framework

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

kamiidevkamiidevleobarzinjeleobarzinjemosti94mosti94

Keywords

Readme

Kron UI

Logo

Kron UI is a simple UI Framework that helps create beautiful Layouts, with simple Components. This is part of DataFrameworks Exam @ HIOF GROUP 18

Installation

npm install kron-ui
or
yarn add kron-ui

Getting Started

  • Vanilla Javascript
  • React

Vanilla JavaScript Setup

If you are unsure how to install, you will need a package manager. Easiest way is to install NodeJS to get Npm chances are you already have this installed aswell, you can check you version by writing node -v in the terminal. Make sure you have a version > 13. With Node you get npm.

npm init
or
yarn init

After initialization, install Kron-UI as shown in the installation above. And you can starting importing Kron-UI by refrencing to it with the script tag :

<script src="node_modules/kron-ui/dist/kron-ui/kron-ui.js"></script>

Your <head> should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awsome Site</title>
    <script src="node_modules/kron-ui/dist/kron-ui/kron-ui.js"></script>
</head>

Thats it! You have Kron UI setup in your project.

React Setup

Coming soon-

Components & Properties

All components uses the appearance attribute for their styles, and some have component specific attributes that is documentet for each component below.

Colors

Colors are used within the appearance property as well as for color intensity, example:

<kron-componenttype appearance='blue4'></kron-componenttype>

blue is the color and 4 is the intensity of the color blue. Put togheter we get blue4. All the colors have an intensity from 1 to 10.

Colors Available
  • Red
  • Blue
  • Green
  • Yellow
  • Pink
  • Brown
  • Grey
  • Gray

Components

Button

<kron-button>Im a button!<kron-button></kron-button></kron-button>

Button

Properties kron-button | properties | attributes | | ---------- | ------------------------------- | | appearance | color,b-color,h-color,bg-none |

| attributes | examples | | ------------------------ | ------------------------------------ | | color = background color | blue10 : color + intensity(1-10) | | b-color = border color | b-blue10 : b-color + intensity(1-10) | | h-color = hover color | h-blue10 : b-color + intensity(1-10) | | bg-none = no border | bg-none |

Example usage
<kron-button appearance="blue7 b-blue3 h-green3">Styled Button!</kron-button>
<kron-button appearance="bg-none">Styled Button!</kron-button>

Menu

Menu is only activated by hovering for now.

  <kron-menu menu='Sort By'>
    <a href='=asc'>Ascending Order</a>
    <a href='=desc'>Descending Order</a>
  <kron-menu>

Menu

Properties kron-menu | properties | attributes | | ---------- | ------------------------------------------------------ | | appearance | color,b-color,h-color,sm,md,lg,font-sm,font-md,font-lg | | menu | "text" |

|attributes | examples | | ----------------------- | ----------------------------------------------- | |color = background color | blue10 : color + intensity(1-10) | |b-color = border color | b-blue10 : b-color + intensity(1-10) | |h-color = hover color | h-blue10 : b-color + intensity(1-10) | |sm = small button size | sm | |md = medium button size | md | |lg = large button size | lg | |font-sm = small font size| font-sm | |font-md = medium font size | font-md | |font-lg = large font size | font-lg |

  Example Usage
  <kron-menu menu='Sort By' appearance='blue3 b-blue5 h-green3 sm font-sm'>
  <a href='=asc'>Ascending Order</a>
  <a href='=desc'>Descending Order</a>
  <kron-menu>

Navbar

<kron-navbar> </kron-navbar>

Properties kron-navbar | properties | attributes | | ---------- | ------------------------------- | | appearance | color,hover-c, | | navlogo | "Text" | | contactlogo| "Text" |

|attributes | examples | | ----------------------- | ----------------------------------------------- | |color = background color | blue10 : color + intensity(1-10) | |hover-c = hover color | hover-b10 : hover color + intensity(1-10) |

Example usage
<kron-navbar appearance="blue5 hover-b8" contactlogo="Contact us!" navlogo="Testpage">
  <a href="#"> Home </a>
  <a href="#"> Page 2 </a>
</kron-navbar>

Navbar

Box

<kron-box> </kron-box>

Properties kron-box | properties | attributes | | ---------- | ------------------------------- | | appearance | color,hover-c, flex-row-wrap, flex-column-wrap |

Attributes for kron-box | Attributes | Example | | ------ | ------- | | color = background color| blue10 : color + intensity(1-10) | | hover-c = hover color | hover-b10 : hover + color + intensity(1-10) | | flex-row-wrap | vertically placing the divs | | flex-column-wrap | horisontally placing the divs |

Example usage
 <kron-box appearance="flex-row-wrap blue1 hover-y10">
  <div> This</div>
  <div> is </div>
  <div> the same </div>
  <div> Component</div>
</kron-box>

<kron-box appearance="flex-column-wrap blue10 hover-r10">
  <div> as</div>
 <div>this one </div>

box

Article

<kron-article>
  <h2>header<h2>
  <p> lorum ispom</p>
</kron-article>

Article

Properties kron-article | properties | attributes | | ---------- | ------------------------------- | | appearance | serif, sans-serif, monospace, fantasy, large, medium, small, right, center, left, textRight, textLeft, textCenter |

| attributes | explanation | example | | -------------------------- | ------------------------------------------------------------- |-------- | | serif = font-family | Times New Roman + Times + serif | sans| | sans-serif = font-family | Arial + Helvetica + sans-serif | sans-serif| | monospace = font-family | Courier New + Courier + monospace | monospace | | fantasy = font-family | Copperplate + Papyrus | fantasy | | large = font-size | big font size | large | | medium = font-size | medium font size |medium | | small = font-size | small font size | small | | center left right = placement website | floating center, floating left, floating right |center | |color = background color | all the available color| blue10 : color + intensity(1-10) | | textRight = text-align right | places in the right side of the article tagg | textRight| | textLeft = text-align left | places in the left side of the article tagg | textLeft| | textCenter = text-align Center | places in the middle side of the article tagg | textCenter|

<kron-article appearance="large serif center red1">
  <h2>header</h2>
  <p>lorum ipsom</p>
</kron-article>

Figure

<kron-figure></kron-figure>

Figure

Properties kron-figure | properties | attributes | | ---------- | ------------------------------- | | appearance | serif, sans-serif, monospace, fantasy right, center, left | | appearance-Image | radius, size | | img| src: enters image address | | alt| string value if image doesnt show | | appearance-Fig |figcaption-10 to figcaption-60 |

| attributes | explanation | example | | -------------------------- | ------------------------------------------------------------- |-------- | | serif = font-family | Times New Roman + Times + serif | sans| | sans-serif = font-family | Arial + Helvetica + sans-serif | sans-serif| | monospace = font-family | Courier New + Courier + monospace | monospace | | fantasy = font-family | Copperplate + Papyrus | fantasy | | radius = radius size image | radius-size10: radius intensity increasing 10 each time to 60 |radius-20 | | size = size image | size increasing 10 each time to 60 |size-10 | | figcaption = center figacption| size increase from 10 each time to 60 |figcaption-10| | large = font-size | big font size | large | | medium = font-size | medium font size |medium | | small = font-size | small font size | small | | center left right = placement website | floating center, floating left, floating right |center |

|propterties in appearance-Fig| example | |img = src | put in image adresse | "https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" |alt = alt for descriping the image | "change text inside quotation marks" |

<kron-figure
  appearance="center"
  appearance-Image="size-40"
  appearance-Fig="figcaption-40"
  img="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg"
  text="bilde fra fjell"
>
</kron-figure>

Form

<kron-form></kron-form>

Form

Properties kron-form | properties | attributes | | ---------- | ------------------------------- | | appearance | serif, sans-serif, monospace, fantasy right, center, left, large, medium, small | | image |true = having picture, false = remove picture |

| attributes | explanation | example | | ------------------------------------- | ------------------------------------------------------------- |------- | | serif = font-family | Times New Roman + Times + serif | serif | | sans-serif = font-family | Arial + Helvetica + sans-serif |sans-serif| | monospace = font-family | Courier New + Courier + monospace |monospace | | fantasy = font-family | Copperplate + Papyrus |fantasy | | radius = radius size image | radius-size10: radius intensity increasing 10 each time to 60 | radius-30 | | size = size image | size increasing 10 each time to 60 |size 30| | large = font-size | big font size |large | | medium = font-size | medium font size |medium | | small = font-size | small font size |small | | center left right = placement website| floating center, floating left, floating right |center |

Nesting comopnents kron-form show you the ability for nestin the components. Its importants that you add div slot="name" for adding kron-figure inside the form or whant get the kron-figure to work. Remember that you can follow the documentation for the kron-figure for adding styling for the component.

<kron-form appearance="large serif center" image="true">
  <div slot="start">
    <kron-figure slot="img" appearance="center" img="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" appearance-Image="size-40 radius-50" />
  </div>
  <h2>registrer bruker</h2>
  <input type="text" name="fornavn" placeholder="  Fornavn" required />
  <button>knapp</button>
</kron-form>

Adding it all up

Adding all the different components togheter creating a our own example ecommerce page. Code: https://pastebin.com/QfxSngAA

All