ui-kit

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

➡️ Demo available here

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:

//tailwind.config.jsmodule.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 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

<ulclass="list list-red"><li>home</li><li>about</li><li>
social
<olclass="list list-orange"><li>instagram</li><li>facebook</li><li>linkedin</li></ul></li></ul>

.link

<ahref="javascript: false" class="link link-green">Green link</a>

.btn

<!-- Solid --><buttonclass="btn btn-solid btn-green">Default Green</button><!-- Outline --><buttonclass="btn btn-outline btn-green">Default Green</button><!-- Link --><buttonclass="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

<divclass="form-element"><labelfor="textInput" class="form-label">label</label><inputtype="text" id="textInput" placeholder="my text input..." class="form-input"></div>

.select

<divclass="form-element"><labelfor="select" class="form-label">select</label><selectclass="form-select" id="select"><option>Select an option</option><option>Milk</option><option>Bread</option><option>Butter</option><option>Beef</option></select></div>

.textarea

<divclass="form-element "><labelfor="textarea" class="form-label">
Textarea
</label><textareaclass="form-textarea" name="textarea" id="textarea" placeholder="my amazing textarea..."></textarea></div>

.radio

<divclass="form-element"><spanclass="form-label">Are you amazing?</span><divclass="flex"><divclass="inline-flex items-center"><inputtype="radio" id="yesRadio" name="amazing" class="form-radio"><labelfor="yesRadio">Yes</label></div><divclass="inline-flex items-center ml-6"><inputtype="radio" id="heckYesRadio" name="amazing" class="form-radio"><labelfor="heckYesRadio">Heck, Yes!</label></div></div></div>

.checkbox

<divclass="form-element flex-row"><divclass="inline-flex items-center"><inputtype="checkbox" id="checkbox" name="checkbox" class="form-checkbox"><labelfor="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

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 installed use:

npm run dev

Note: There's an issue with the live-server package used for the development server. Link to issue. 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:

release <type>

Then use npm to publish the version:

npm publish --registry=https://npm.pkg.github.com/simplysuperb-dev
npm publish --registry=https://registry.npmjs.org