Vue.js component UI library using Tailwindcss by Chec

View the Storybook app

Installation & Usage

You can use either yarn or npm to install the ui-library and it's dependencies from this Github repo.

with yarn

yarn add github:chec/ui-library

with npm

npm install github:chec/ui-library

Setting up Tailwindcss

1. Create a tailwind.preview.js file at the root of the app exporting the ui-library's custom tailwind.preview.js from it.

module.exports = require('@chec/ui-library/tailwind.config');

2. Inject the ui-library's compiled css and Tailwind.css file which includes the @tailwind directives to include the ui-library configured Tailwindcss styles/utilities.

/*
ui-library.css compiled css
*/
@import '~@chec/ui-library/dist/ui-library.css';

/*
tailwind.css, uses the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS: 
*/  
@import '~@chec/ui-library/src/assets/tailwind.css';

Utilizing Sass mixins

You can import helpful sass mixins such as aspect-ratio.

/* mixins.scss */

@import '~@chec/ui-library/src/assets/mixins.scss';

Mixins

• aspect-ratio

  use-case:

  <div class="image-container">
  
    <img src="chec.io/image.jpg" />
  
    <div v-else>
      <h6>
        No Image
      </h6>
    </div>
  
  </div>

  .image-container {
  
    /* tailwind @apply directive */
    @apply w-1/2 max-w-sm; 
  
    /* apply aspect-ratio mixin */
    @include aspect-ratio(16, 9); 
  
    /* style fall-back element */
    div {
      @apply bg-gray-300;
    }
  }

Translating

We use the vue-i18n library for this. See lang/*.js for the dictionaries. See the dashboard repo's lang/README.md for a detailed guide for using the library. TL;DRs:

• <p>{{ $t('paginate.goToFirst') }}</p> renders "Go to the first page"
• this.$t(...) from component instance methods

Project setup

git clone https://github.com/chec/ui-library.git

cd ui-library

yarn install

Start Storybook app on port 6006:

yarn storybook:serve

Run the frontend app proper on port 8080:

yarn run serve

Compiles and minifies for production (This is done continously)

yarn build-lib

Lints and fixes files

yarn lint:Fix

Customize configuration

See Configuration Reference.