# @youseedk/dna

> A CSS Framework to create YouSee websites and applications

Latest version **3.0.1** (published 2021-06-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @youseedk/dna
pnpm add @youseedk/dna
yarn add @youseedk/dna
bun add @youseedk/dna
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2021-06-23 |
| First published | 2019-03-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 415.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | YouSee Digital Warehouse |
| Maintainers | yousee, havgry, grandorf, vercell, razvanmorut |
| Keywords | yousee, css, scss, svg, framework, web |

## Links

- npm: https://www.npmjs.com/package/@youseedk/dna
- Repository: https://github.com/youseedk/dna
- Homepage: https://dna.yousee.dk
- Issues: https://github.com/youseedk/dna/issues
- npm.io page: https://npm.io/package/@youseedk/dna

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2021-06-23
- 2.9.0 — 2021-05-07
- 2.8.0 — 2021-04-27
- 2.7.3 — 2021-04-27
- 2.7.2 — 2021-04-13
- 2.7.0 — 2020-11-18
- 2.6.0 — 2020-10-14
- 2.5.1 — 2020-08-07
- 2.4.0 — 2020-06-03
- 2.3.0 — 2020-03-09
- 2.2.1 — 2020-02-20
- 2.1.1 — 2020-01-06
- 2.1.0 — 2019-12-12
- 2.0.19 — 2019-12-12
- 2.0.18 — 2019-12-12
- … 34 more at https://npm.io/package/@youseedk/dna/versions

## README

<h3 align="center">YouSee DNA </h3>
<p align="center">
  A framework for building YouSee branded websites and applications.
  <br>
  <a href="https://dna.yousee.dk"><strong>YouSee DNA documentation</strong></a> · <a href="https://github.com/youseedk/dna"><strong>YouSee DNA on GitHub</strong></a>
</p>

[![Build Status](https://travis-ci.com/youseedk/dna.svg?branch=master)](https://travis-ci.com/youseedk/dna)
[![npm version](https://img.shields.io/npm/v/@youseedk/dna.svg)](https://www.npmjs.com/package/@youseedk/dna)
[![Last Commit](https://img.shields.io/github/last-commit/youseedk/dna/master.svg)](https://github.com/youseedk/dna)

## Table of contents

- [Install](#install)
- [Contents](#contents)
- [Browser Support](#browser-support)
- [Documentation](#documentation)
- [Local Documentation](#local-documentation)

## Install

- Install with [npm](https://www.npmjs.com/): `npm i @youseedk/dna`
- Install with [yarn](https://yarnpkg.com/): `yarn add @youseedk/dna`

## Contents
In the downloaded package (found in `node_modules/@youseedk/`) you'll find the following directories:

```plaintext
dna/
├── css/
│   ├── base
│   ├── elements
│   ├── icons
│   ├── layout
│   ├── settings
├── scss/
├── svg/
├── ys-bundle.css
└── ys-bundle.min.css
```

The package is designed for two use cases:
1. "As is" — you use `ys-bundle.min.css` which contains all YouSee elements and layout settings.
2. "Custom" - you pick and mix what elements, svg files, font files etc. are needed and include them in a setup of your own choosing.

If you choose option 2, "Custom", please be aware that it is required that you include `ys-base.css` before including any other elements.

For further documentation, please visit the [documentation site](https://dna.yousee.dk)

### CDN
It is also possible to load the bundled css files from a CDN:
`<link rel="stylesheet" type="text/css" href="https://unpkg.com/@youseedk/dna/ys-bundle.min.css" />` will always load the latest version.

If a specific version is needed, insert the version number into the URL, ie.:
`<link rel="stylesheet" type="text/css" href="https://unpkg.com/@youseedk/dna@1.0.0/ys-bundle.min.css" />` will load version 1.0.0.

## Browser Support
Please visit the [documentation site](https://dna.yousee.dk/docs/code-guidelines/browser-support.html)

## Documentation
YouSee DNA's documentation is built with [Fractal](https://fractal.build/), deployed on [GitHub Pages](https://pages.github.com/) using [Travis CI](https://travis-ci.com).

## Local documentation
Clone the repo:
```bash
git clone https://github.com/yousee.dk/dna.git
```

After cloning the repository run the following command to install node modules
```bash
$ npm ci
```

Running the project
```bash
$ npm start
```

That will run the project in development mode and will watch the files for changes. The command will also
print the hostname and port for where the server is runnning.

---
_Source: https://npm.io/package/@youseedk/dna · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._