open-index/open-npm huggingface dataset:
npm package: @octorchard/buttonz
Description: buttonz is a tiny (~1kB) hand-crafted CSS button library written in Sass.
Author: octorchard
Latest version: 1.2.2

# buttonz

> _A CSS Button library_

Hey there! Buttonz is a beautiful set of button styles for the modern web. It can be used by anyone wanting to enhance the look of their buttons without writing a _thousand_ lines of code. Buttonz is also responsive for mobile screens!

Buttonz is aimed to be tiny (~1kB) and very productive so that you can kick start by just adding a single CSS file to your existing project.

Though, it is recommended to also use [`modern-normalize`](https://github.com/sindresorhus/modern-normalize).


## Usage

### Transpile it *yourself*

```sh
git clone https://github.com/octorchard/buttonz
cd buttonz
sass src/main.scss build/buttonz.css --style compressed -c
```

`build/buttonz.css` is the minified CSS file. Along with it is the source map (which is not necessary to use).

### Get it from the releases page

Head over to [releases](https://github.com/octorchard/buttonz/releases) and download the `buttonz-vX.Y.Z.zip` file which contains the minified CSS file and the source map.

(Note: starting from `v1.1.0`, the CSS and the sourcemap are available separately, there is no `.zip`)

## Images

No styling:

![No styling](https://github.com/octorchard/buttonz/blob/main/preview-images/normal.png?raw=true)

With the `btn` class:

![With btn class](https://github.com/octorchard/buttonz/blob/main/preview-images/styled.png?raw=true)

Some extra colors as well - `orange`, `emerald`, `aqua`, `purple`, `rose`, `white`:

![Extra colors](https://github.com/octorchard/buttonz/blob/main/preview-images/colors.png?raw=true)

And sizes! 3 extra - `medium`, `large` and `huge`:

![Sizes](https://github.com/octorchard/buttonz/blob/main/preview-images/sizes.png?raw=true)

Links with the `.btn` class are also styled:

![Links](https://github.com/octorchard/buttonz/blob/main/preview-images/links.png?raw=true)

Disabled buttons have a lighter background (either add the `disabled` attribute or the `disabled` class):

![Disabled](https://github.com/octorchard/buttonz/blob/main/preview-images/disabled.png?raw=true)

All the color variants also have a lighter background if they are disabled:

![Disabled](https://github.com/octorchard/buttonz/blob/main/preview-images/disabled-color.png?raw=true)

```html
<a href="/" class="btn">This is a link!</a>
```

Hope you like it!

License: [Unlicense](https://unlicense.org/)
npm package: @octorchard/crown
Description: 👑 A tiny JS function to easily create elements
Author: octorchard
Latest version: 1.1.0

# crown

> An easier way to make new elements

```js
let el = crowm(
  "div#header.fade-in",
  { title: "This is a div!" },
  { backgroundColor: "#11191f", color: "white" }
);

document.body.appendChild(el);
```

Let's face it - creating vanilla elements is tedious, especially if you want to assign multiple classes, IDs, styles and attributes. Sounds like a lot of code! But that's where `crown` comes into the picture.

Crown is a tiny (~1kb) JavaScript function that can help you make elements and assign them classes and IDs using CSS selector syntax. It also lets you set the `innerHTML` of the element, and add attributes and inline styles to the element.

It uses the good 'ol `document.createElement` function, and adds attributes as required. Crown also `return`s the HTML element, so you can append it to the DOM.

## Usage

### Importing

#### Using `npm`

```sh
npm i @octorchard/crown
```

```js
import crown from "@octorchard/crown";

crown(<args>)
```

Note: this package is ESM-only.

#### Get it from the releases

Head over to [the releases](https://github.com/octorchard/crown/releases) and grab the latest `crown.js` and the sourcemap, if you want it.

#### Transpile it _yourself_

```sh
git clone https://github.com/octorchard/crown
cd crown
esbuild --bundle index.js --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=build/crown.js
```

`build/crown.js` is the output. Feel free to tweak the `--target`.

### New elements

```js
let el = crown(<selector>, <innerHTML>, <attributes>, <styles>)
```

where

- `selector` is a CSS selector string (containing only a base element, `.classes` and `#ids`),

- `innerHTML` is a string containing the text content of the element

- `attributes` is an `Object` of `{ attr1: "value", attr2: "value", ... }` attributes which are to be added to the element

- `styles` is an object of CSS styles (`{ property: "value", ... }`). The properties must me in camelCase, just like in React.

The returned value is a HTML element.

## Commands

Build:

`esbuild --bundle index.js --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=build/crown.js`

Thanks!