Web UI kit following simply superb.'s design system, based on Tailwind CSS.

Overview

ui-kit

npm (scoped) GitHub Repo stars GitHub Repo stars

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.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 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

  <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

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

.btn

<!-- 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

<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

<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

<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

<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

<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

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

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
You might also like...

The CSS design system that powers GitHub

The CSS design system that powers GitHub

Primer CSS The CSS implementation of GitHub's Primer Design System Documentation Our documentation site lives at primer.style/css. You'll be able to f

Nov 23, 2022

A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Oct 30, 2022

InstantClick makes following links in your website instant.

InstantClick All the informations you need to use InstantClick are on the link above. This ReadMe’s purpose is about how to use and contribute to a de

Nov 22, 2022

Application built following the Udemy course "React Front To Back 2022"

Application built following the Udemy course

Github finder app This project was built based on "React Front To Back 2022" course on Udemy. General information The "Github finder" application uses

Feb 19, 2022

Following the project from Nabendu Biswas's MERN Projects book

mern-dating-app-project Following the project from Nabendu Biswas's MERN Projects book All the codes here are followed based on the book in this link:

Jun 8, 2022

Go to Definition following alias redirections.

Go to Definition following alias redirections.

vscode-goto-alias Go to Definition following alias redirections. Motivation For example, in Nuxt 3 or Vitesse projects, we provide auto import for API

Nov 11, 2022

Algorithms and Data Structures implemented in TypeScript for beginners, following best practices.

Algorithms and Data Structures implemented in TypeScript for beginners, following best practices.

The Algorithms - TypeScript TypeScript Repository of TheAlgorithms, which implements various algorithms and data structures in TypeScript. These imple

Nov 24, 2022

Easy view and filter all follows and following. Auto update by GitHub Action.

Easy view and filter all follows and following. Auto update by GitHub Action.

😳 List All Followers And Following Easy view and filter all follows and following. Auto update by GitHub Action. Since GitHub's default follows and f

Nov 13, 2022
Releases(1.2.1)
  • 1.2.1(Jan 11, 2022)

    Patches

    • Revert change made by accidently running release 😅: 899049176ee71821e115e9b20249bfb70f937743
    • Docs: remove unstyled link examples: 3ed7b2165fe6e82864c39920f1235821d10e04e6
    • Merge pull request #6 from RiyaRooh/main: fe6cfa1c33689bbbfa05324296addae16120af9a
    • Fix: tinycolor2 and mini-svg-data-uri aren't dev dependencies: 9b1e7a629820423dbce15b1abf2b71843530891c
    • Remove package-lock.json from git: 1940a459328aac430fc89fe19210850a47fa5ad4
    • Docs: update kitchen sink demo styles: a9d61018582daab10affa788fb8dc7d13b453e94
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Jan 9, 2022)

    Minor Changes

    • feat: new checkbox component: 19da51bab87caf23f2a7b3a3ca0c0e2d9959406a
    • feat: new textarea component: 63ff792f223f4edb676935160a319645eec6c3ef
    • fix: remove outline on hover for .btn components: 3a5ef0b2597cd5784d98ba57bd362f8b6b44f4c2
    • feat: update documentation: f0190d23772fea6d9b06777675c00231511640e9

    Full Changelog: https://github.com/simplysuperb-dev/ui-kit/compare/1.1.0...1.2.0

    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Jan 5, 2022)

    Minor Changes

    • Include font, create link and list components, update docs: ffb645d441e932533de4e73db6f4752582ab95d2
    • Font: load fonts from google cdn: 44b61aa4a8a411fbf0331dd8220a47d883cdaaae

    Full Changelog: https://github.com/simplysuperb-dev/ui-kit/compare/1.0.1...1.1.0

    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Jan 4, 2022)

    Patches

    • Fix: load fonts via cdn: 1c65dc5c2b99a4272b255b73ae9ab0cafb8f2005
    • Include custom scripts to readme: 187832bd0857c2b5ef0bb5e121e90de2228c4a99

    Full Changelog: https://github.com/simplysuperb-dev/ui-kit/compare/1.0.0...1.0.1

    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Jan 4, 2022)

  • 1.0.0-canary.0(Jan 4, 2022)

Owner
simply superb.
we create super simple apps
simply superb.
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 73 Nov 23, 2022
The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups

PatternFly Design Kit The PatternFly Design Kit is a collection of Sketch assets that make it easy for designers to create high-fidelity design mockup

PatternFly 42 Nov 15, 2022
A utility-first universal design system - powered by Tailwind CSS

tailwindcss-react-native tailwindcss-react-native uses Tailwind CSS as universal design system for all React Native platforms. It lets you share code

Mark Lawlor 1.4k Nov 30, 2022
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 5 Oct 3, 2022
Remix starter kit with Tailwind CSS family of libraries: Headless UI, Radix UI, VechaiUI, daisyUI, and more

Remix Tailwind Starter Kit Remix starter kit with Tailwind CSS v3 family of libraries. Example demo to combine the best Tailwind-related ecosystem suc

M Haidar Hanif 73 Nov 23, 2022
Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation. MDB is a collection of free Bootstrap templates, themes, des

MDBootstrap 22.8k Nov 27, 2022
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.

bootflat 4.3k Nov 10, 2022
Offer a translation system to your users! a plugin capable of translating your website, simply and efficiently!

TranslateForMe Offer a translation system to your users, a plugin capable of translating your website, simply and efficiently! View Demo · Report Bug

Eduardo Castro 3 Jan 12, 2022
Bun-Bakery is a web framework for Bun. It uses a file based router in style like svelte-kit. No need to define routes during runtime.

Bun Bakery Bun-Bakery is a web framework for Bun. It uses a file based router in style like svelte-kit. No need to define routes during runtime. Quick

Dennis Dudek 43 Nov 19, 2022