TailwindCSS powered UI kit following simply superb.'s design system.
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.
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')
],
}
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
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
.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 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.
<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>
<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>
<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>
<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>
<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>
Beautifully styled outline that can be applied on :hover
, :focus
or :active
states.
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.
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