@geolid/ui-kit
Version:
Geolid UI Kit
130 lines (91 loc) • 4.36 kB
Markdown
<h1 align="center">Geolid UI Kit</h1>
<p align="center">
<strong>A boostrap like front kit based on https://getuikit.com/</strong>
</p>
[![CircleCI][circleci-badge]][circleci-link]
[![CSS size][css-size-badge]][unpkg-link]
[![JS size][js-size-badge]][unpkg-link]
[![npm version][npm-version-badge]][npm-link]
* [Installation](#installation)
* [Usage](#usage)
* [Release Process](#release-process)
* [Developpment](#developpment)
<p align="center">
<img src="screenshot.png"/>
</p>
## Installation
### Quick start with CDN
```html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/@geolid/ui-kit/dist/css/ui-kit.min.css" />
<script src="https://unpkg.com/@geolid/ui-kit/dist/js/ui-kit.min.js"></script>
</head>
<body>
</body>
</html>
```
### CDN
**CSS**
| Type | |
|:------------------------|:----------------------------------------------------------------------|
| Dev, latest | https://unpkg.com/@geolid/ui-kit/dist/css/ui-kit.css |
| Dev, version fixed | https://unpkg.com/@geolid/ui-kit@0.0.1/dist/css/ui-kit.css |
| Minified, latest | https://unpkg.com/@geolid/ui-kit/dist/css/ui-kit.min.css |
| Minified, version fixed | https://unpkg.com/@geolid/ui-kit@0.0.1/dist/css/ui-kit.min.css |
**JS**
| Type | |
|:------------------------|:----------------------------------------------------------------------|
| Dev, latest | https://unpkg.com/@geolid/ui-kit/dist/js/ui-kit.js |
| Dev, version fixed | https://unpkg.com/@geolid/ui-kit@0.0.1/dist/js/ui-kit.js |
| Minified, latest | https://unpkg.com/@geolid/ui-kit/dist/js/ui-kit.min.js |
| Minified, version fixed | https://unpkg.com/@geolid/ui-kit@0.0.1/dist/js/ui-kit.min.js |
### NPM
npm install --save @geolid/ui-kit
## Usage
Documentation can be found here https://getuikit.com/docs/javascript
But to just to know if it works you can try this in your browser console:
```javascript
UIkit.notification('Hello');
```
## Release process
**⚠️ Release should be always done on the master branch**
1) `npm version <version>` The version number follow the [semver](https://semver.org/) pattern
2) `npm publish`
3) That's it, the ui kit is updated on npm and the CDN
Here are the detailed steps behind these 2 commands:
* Run tests and linter
* Bump the new version number in package.json
* Build JS and CSS
* Run the bundlesize check
* Create a commit with all the freshly build files. The commit message is simply the new version number.
* Create a git tag
* Push the commit and the tag
* Publish the new version on npm registry
## Developpment
### Requirements
* node `>= 8.2.0`
### Installation
git clone git@github.com:Geolid/ui-kit.git
cd ui-kit
npm install && npm start
### Dev server
npm start
And then you can access html examples files here -> [http://localhost:8080/tests/](http://localhost:8080/tests/)
### Build
Build both production and developpement files:
npm run build
### Adding a new html example
1) First create the html file in `tests/`
2) Add the name of the file into the list in file `tests/js/index.js`
[circleci-badge]: https://circleci.com/gh/Geolid/ui-kit/tree/master.svg?style=svg&circle-token=4640a580a7e89f7e70dcd781182c2185c8ae1e49
[circleci-link]: https://circleci.com/gh/Geolid/ui-kit/tree/master
[css-size-badge]: http://badge-size.now.sh/https://unpkg.com/@geolid/ui-kit/dist/css/ui-kit.min.css?compression=gzip&label=CSS+gzip+size
[js-size-badge]: http://badge-size.now.sh/https://unpkg.com/@geolid/ui-kit/dist/js/ui-kit.min.js?compression=gzip&label=JS+gzip+size
[unpkg-link]: https://unpkg.com/@geolid/ui-kit/dist/
[npm-version-badge]: https://img.shields.io/npm/v/@geolid/ui-kit.svg
[npm-link]: https://www.npmjs.com/package/@geolid/ui-kit