xtend-library

PORTED TO TAILWIND xtendui

Installation

npm install xtend-library --save

Usage

We have some boilerplate setup projects to start a project:

• vanilla boilerplate

Css Resolve

Add this to less options to resolve less urls with xtend-library/:

// resolve xtend-library import less
paths: [path.resolve(__dirname, './dist'), path.resolve(__dirname, './node_modules')],

Js Resolve

Add this to babel options to resolve js urls with xtend-library/:

const path = require('path')

module.exports = {
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        alias: {
          // resolve xtend-library import js
          'xtend-library': [path.resolve(__dirname, './dist/assets/xtend-library'), path.resolve(__dirname, './node_modules/xtend-library')],
        },
      },
    ],
  ],
}

Css

You need to import the reset file as first import:

@import '/src/xtend-reset.less'; // always first loaded

Then you can import the components you need as described in the docs:

@import (reference) '/src/xtend-core.less'; // be sure to import the library as reference first
@import '/src/extensions/slider/slider.less';

Or just import all core and extensions and addons needed (preferred method):

@import '/src/xtend-core.less';
@import '/src/extensions/slider/slider.less';

To modify a less or js file add webpack resolve and fork the file copying it in your project.

Js

You need to install relaxed-json:

npm install --save relaxed-json

You need to install and import core-js:

npm install --save core-js@2

import 'core-js'

You need to import the polyfills files and the main js:

import '/src/polyfill.js'
import { Xt } from '/src/xt.js'

Then you can import the components you need as described in the docs:

import '/src/extensions/slider/slider.js'

Or just import all core and extensions and addons needed (preferred method):

import '/src/xtend-core.js'
import '/src/extensions/slider/slider.js'

To modify a less or js file add webpack resolve and fork the file copying it in your project.

Gsap

This library in the demos uses gsap and bezier-easing for javascript animations.

npm install --save gsap bezier-easing

Browser support

Supported browsers are as follow: explorer 12, firefox 38, opera 25, safari 10, chrome 38.

If you want to support old browsers since Internet Explorer 11, import the polyfills:

Documentation

We use gatsby to serve the docs:

• Install required npm packages with npm install
• Use npm run build to build the docs in /public
• Use npm run dev to serve a develop version
• Use npm run serveto serve a production version

Acknowledgements

• Icons with feather icons

Copyright

Xtand and demos licensed under MIT license. Docs licensed under CC BY 3.0.