Geolid UI Kit
A boostrap like front kit based on https://getuikit.com/
Installation
Quick start with CDN
<!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:
UIkit.notification('Hello');Release process
-
npm version <version>The version number follow the semver pattern npm publish- 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/
Build
Build both production and developpement files:
npm run build
Adding a new html example
- First create the html file in
tests/ - Add the name of the file into the list in file
tests/js/index.js