Skip to content

Commit

Permalink
feat: update documentation (resolve #5)
Browse files Browse the repository at this point in the history
  • Loading branch information
Ivanka Todorova committed Jan 9, 2022
1 parent 3a5ef0b commit f0190d2
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 53 deletions.
144 changes: 141 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@

TailwindCSS powered UI kit following simply superb.'s design system.

[➡️ Demo available here](https://simplysuperb-dev.github.io/)

## Available Styles

You can find all currently available styles at 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

Expand All @@ -37,6 +37,144 @@ module.exports = {
}
```

## 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
<ul class="list list-red">
<li>home</li>
<li>about</li>
<li>
social
<ol class="list list-orange">
<li>instagram</li>
<li>facebook</li>
<li>linkedin</li>
</ul>
</li>
</ul>
```

**`.link`**
```html
<a href="javascript: false" class="link link-green">Green link</a>
```

**`.btn`**

```html
<!-- Solid -->
<button class="btn btn-solid btn-green">Default Green</button>

<!-- Outline -->
<button class="btn btn-outline btn-green">Default Green</button>

<!-- Link -->
<button class="btn btn-link btn-green">Default Green</button>
```

### 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 `<label>` elements in forms.

#### `.input`

```html
<div class="form-element">
<label for="textInput" class="form-label">label</label>
<input type="text" id="textInput" placeholder="my text input..." class="form-input">
</div>
```

#### `.select`
```html
<div class="form-element">
<label for="select" class="form-label">select</label>
<select class="form-select" id="select">
<option>Select an option</option>
<option>Milk</option>
<option>Bread</option>
<option>Butter</option>
<option>Beef</option>
</select>
</div>
```

#### `.textarea`
```html
<div class="form-element ">
<label for="textarea" class="form-label">
Textarea
</label>
<textarea class="form-textarea" name="textarea" id="textarea" placeholder="my amazing textarea..."></textarea>
</div>
```
#### `.radio`
```html
<div class="form-element">
<span class="form-label">Are you amazing?</span>
<div class="flex">
<div class="inline-flex items-center">
<input type="radio" id="yesRadio" name="amazing" class="form-radio">
<label for="yesRadio">Yes</label>
</div>
<div class="inline-flex items-center ml-6">
<input type="radio" id="heckYesRadio" name="amazing" class="form-radio">
<label for="heckYesRadio">Heck, Yes!</label>
</div>
</div>
</div>
```
#### `.checkbox`
```html
<div class="form-element flex-row">
<div class="inline-flex items-center">
<input type="checkbox" id="checkbox" name="checkbox" class="form-checkbox">
<label for="checkbox">Yes, I accept the terms I never read</label>
</div>
</div>
```

### Utilities

### `.ui-outline`
Beautifully styled outline that can be applied on `:hover`, `:focus` or `:active` states.

## Modifying

Expand Down
30 changes: 15 additions & 15 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,55 +198,55 @@ <h2 class="text-green font-serif mb-5 desktop:text-h3 text-h4">

<div class="flex flex-wrap mb-2">
<div class="p-2">
<button href="javascript: false" class="btn btn-solid btn-green">Default Green</button>
<button class="btn btn-solid btn-green">Default Green</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-solid btn-blue">Default Blue</button>
<button class="btn btn-solid btn-blue">Default Blue</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-solid btn-orange">Default Orange</button>
<button class="btn btn-solid btn-orange">Default Orange</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-solid btn-yellow">Default Yellow</button>
<button class="btn btn-solid btn-yellow">Default Yellow</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-solid btn-red">Default Red</button>
<button class="btn btn-solid btn-red">Default Red</button>
</div>
</div>

<div class="flex flex-wrap mb-2">
<div class="p-2">
<button href="javascript: false" class="btn btn-outline btn-green">Default Green</button>
<button class="btn btn-outline btn-green">Default Green</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-outline btn-blue">Default Blue</button>
<button class="btn btn-outline btn-blue">Default Blue</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-outline btn-orange">Default Orange</button>
<button class="btn btn-outline btn-orange">Default Orange</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-outline btn-yellow">Default Yellow</button>
<button class="btn btn-outline btn-yellow">Default Yellow</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-outline btn-red">Default Red</button>
<button class="btn btn-outline btn-red">Default Red</button>
</div>
</div>

<div class="flex flex-wrap mb-2">
<div class="p-2">
<button href="javascript: false" class="btn btn-link btn-green">Default Green</button>
<button class="btn btn-link btn-green">Default Green</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-link btn-blue">Default Blue</button>
<button class="btn btn-link btn-blue">Default Blue</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-link btn-orange">Default Orange</button>
<button class="btn btn-link btn-orange">Default Orange</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-link btn-yellow">Default Yellow</button>
<button class="btn btn-link btn-yellow">Default Yellow</button>
</div>
<div class="p-2">
<button href="javascript: false" class="btn btn-link btn-red">Default Red</button>
<button class="btn btn-link btn-red">Default Red</button>
</div>
</div>
</section>
Expand Down
44 changes: 20 additions & 24 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -838,8 +838,8 @@ ol.list {
}

.btn {
font-size: 16px;
line-height: 22px;
font-size: 1.143rem;
line-height: 1.571rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
Expand All @@ -850,10 +850,6 @@ ol.list {
}

.btn:hover, .btn:active, .btn:focus {
outline-color: rgba(152, 184, 139, 0.5);
outline-style: dotted;
outline-width: 1px;
outline-offset: 2px;
background-color: transparent;
border-width: 2px;
border-color: transparent;
Expand Down Expand Up @@ -1349,38 +1345,38 @@ ol.list {
}

.text-h3 {
font-size: 48px;
line-height: 60px;
font-size: 3.429rem;
line-height: 4.286rem;
}

.text-base {
font-size: 14px;
line-height: 24px;
font-size: 1rem;
line-height: 1.714rem;
}

.text-h4 {
font-size: 34px;
line-height: 42px;
font-size: 2.429rem;
line-height: 3rem;
}

.text-h6 {
font-size: 24px;
line-height: 32px;
font-size: 1.714rem;
line-height: 2.286rem;
}

.text-h1 {
font-size: 96px;
line-height: 120px;
font-size: 5.857rem;
line-height: 7.571rem;
}

.text-h2 {
font-size: 60px;
line-height: 75px;
font-size: 4.286rem;
line-height: 5.357rem;
}

.text-h5 {
font-size: 24px;
line-height: 32px;
font-size: 1.714rem;
line-height: 2.286rem;
}

.font-thin {
Expand Down Expand Up @@ -1429,12 +1425,12 @@ ol.list {
}

.desktop\:text-h2 {
font-size: 60px;
line-height: 75px;
font-size: 4.286rem;
line-height: 5.357rem;
}

.desktop\:text-h3 {
font-size: 48px;
line-height: 60px;
font-size: 3.429rem;
line-height: 4.286rem;
}
}
22 changes: 11 additions & 11 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,17 @@ module.exports = plugin(function ({ addUtilities, addComponents, theme, e }) {
desktop: '960px',
},
fontSize: {
overline: ['10px', '14px'],
caption: ['12px', '18px'],
base: ['14px', '24px'],
subtitle: ['16px', '22px'],
button: ['16px', '22px'],
h1: ['96px', '120px'],
h2: ['60px', '75px'],
h3: ['48px', '60px'],
h4: ['34px', '42px'],
h5: ['24px', '32px'],
h6: ['24px', '32px'],
overline: ['0.625rem', '0.875rem'],
caption: ['0.75rem', '1.125rem'],
base: ['1rem', '1.714rem'],
subtitle: ['1.143rem', '1.571rem'],
button: ['1.143rem', '1.571rem'],
h1: ['5.857rem', '7.571rem'],
h2: ['4.286rem', '5.357rem'],
h3: ['3.429rem', '4.286rem'],
h4: ['2.429rem', '3rem'],
h5: ['1.714rem', '2.286rem'],
h6: ['1.714rem', '2.286rem'],
},
}
})

0 comments on commit f0190d2

Please sign in to comment.