Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simplysuperb-dev/ui-kit
🌬️ Web UI kit following simply superb.'s design system, based on Tailwind CSS.
https://github.com/simplysuperb-dev/ui-kit
components tailwind tailwindcss tailwindcss-plugin ui
Last synced: about 1 month ago
JSON representation
🌬️ Web UI kit following simply superb.'s design system, based on Tailwind CSS.
- Host: GitHub
- URL: https://github.com/simplysuperb-dev/ui-kit
- Owner: simplysuperb-dev
- License: mit
- Created: 2021-12-18T00:16:42.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T13:39:56.000Z (8 months ago)
- Last Synced: 2024-11-15T02:14:07.400Z (about 1 month ago)
- Topics: components, tailwind, tailwindcss, tailwindcss-plugin, ui
- Language: JavaScript
- Homepage: https://simplysuperb-dev.github.io/ui-kit/
- Size: 1.08 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ui-kit
TailwindCSS powered UI kit following simply superb.'s design system.
[➡️ Demo available here](https://simplysuperb-dev.github.io/ui-kit/)
## Why
I am building few applications (iOS / Android / Mobile), which share common visual elements, so I am using this kit for
another package containing React components and wanted to wrap common tailwindcss utilities as components.
## Installation
Install the tailwindcss plugin:
```
npm install --save-dev @simplysuperb-dev/ui-kit
```
Then require it in your `tailwind.config.js`:
```js
//tailwind.config.js
module.exports = {
//...
plugins: [
require('@simplysuperb-dev/ui-kit')
],
}
```
## Usage
### Colors
All defined colors are used for generating classes for styling: `.list`, `.link` and `.btn` aswell. Refer to
the [source code](https://github.com/simplysuperb-dev/ui-kit/tree/main/src/components) of each of those components for
their further usage.
List of colors:
- **transparent**: transparent
- **white**: #FFFFFF
- **graphite**: #2e2e2e
- **grey**: #aaaaaa
- **green**: #98b88b
- **green-secondary**: #8ba780
- **porcelain**: #f1f3f4
- **blue**: #8b8fb8
- **blue-secondary**: #5d64a5
- **orange**: #dba475
- **orange-secondary**: #d09562
- **yellow**: #FFC634
- **red**: #cd5f5f
- **red-secondary**: #bf2a2a
### Typography
**Fonts**
- `.font-serif`: Merriweather
- `.font-sans`: Merriweather Sans
**Font Sizes**
- `.text-h1` / `.text-h2` / `.text-h3` / `.text-h4` / `.text-h5` / `.text-h6`: heading styles that should be used in
combination with `.font-serif`
- `.text-subtitle` / `.text-caption` / `.text-overline`: used for adding emphasis
- `.text-base`: resetting the font size
- `.text-button`: used on `.btn` components
### Basic Components
**`.list`**
```html
- home
- about
-
social
```
**`.link`**
```html
Green link
```
**`.btn`**
```html
Default Green
Default Green
Default Green
```
### Form components
Form components must be wrapped inside a `.form-element` div and by adding `has-error` class to that div they will be
styled properly to indicate any validation errors.
Additionally you might use `.form-label` for styling `` elements in forms.
#### `.input`
```html
label
```
#### `.select`
```html
select
Select an option
Milk
Bread
Butter
Beef
```
#### `.textarea`
```html
Textarea
```
#### `.radio`
```html
Are you amazing?
Yes
Heck, Yes!
```
#### `.checkbox`
```html
Yes, I accept the terms I never read
```
### Utilities
### `.ui-outline`
Beautifully styled outline that can be applied on `:hover`, `:focus` or `:active` states.
## Modifying
Run TailwindCSS's watcher before modifying the css:
```
npm run css:dev
```
To preview any changes to the css use:
```
npm run start:dev
```
Or if you have [`concurrently`](https://www.npmjs.com/package/concurrently) installed use:
```
npm run dev
```
> Note: There's an issue with the `live-server` package used for the development
> server. [Link to issue](https://github.com/tapio/live-server/issues/394). I've installed a specific commit of the
> package where the problem is not there yet.
## Releasing new versions
To update version of this package, use [`release`](https://www.npmjs.com/package/release):
```
release
```
Then use `npm` to publish the version:
```
npm publish --registry=https://npm.pkg.github.com/simplysuperb-dev
npm publish --registry=https://registry.npmjs.org
```