xtend-ui v0.16.8

Boilerplate

If you want we have some boilerplate projects to start a project all ready to go!

• xtend-theme-vanilla

CDN Installation

If you need to do a fast installation of css and js use core-js CDN and xtend-ui CDN, the css and js are inside the dist/ folder.

The CDN dist/ files are large because they include tailwindcss and all components / addons, it's not representative of the sizes you see when including Xtend UI as part of your build process.

Please note that many of the features that make Xtend UI great are not available without incorporating Xtend UI into your build process.

Css Installation

Tailwind

Follow the instructions to install tailwind.

npm install tailwindcss --save-dev

Install postcss import and postcss nesting.

npm install postcss postcss-import postcss-nested --save-dev

Then in postcss.config.js set up compilation (with purgecss as explained in tailwind docs).

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.html', './src/**/*.js'],
  defaultExtractor: content => {
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
    return broadMatches.concat(innerMatches)
  },
})

module.exports = {
  plugins: [require(`postcss-import`), require(`tailwindcss`), require('postcss-nested'), ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])],
}

Then you can use css with tailwind.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "./custom.css"; /* custom code here */

@import "tailwindcss/utilities";

Xtend

Install xtend.

npm install xtend-ui --save

Then add xtend plugins and variables inside tailwind.config.js, with this special format that merges your configuration with xtend configuration.

module.exports = {
  purge: [],
  theme: require('xtend-ui/src/tailwind-theme')({
    // add here your theme settings
    extend: {
      // add here your theme extend settings
    },
  }),
  variants: require('xtend-ui/src/tailwind-variants')({
    // add here your variants
  }),
  plugins: [require('xtend-ui/src/tailwind-plugin')],
  experimental: {
    applyComplexClasses: true,
    extendedSpacingScale: true,
    defaultLineHeights: true,
    removeDeprecatedGapUtilities: true,
  },
}

Javascript Installation

Babel and Corejs

You need to install corejs, @babel/core, @babel/preset-env, @babel/plugin-transform-runtime, babel-plugin-module-resolver.

npm install core-js@3 @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-plugin-module-resolver --save-dev

Then in the root of your project set up polyfills with babel.config.js.

const path = require('path')

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
  ],
  plugins: [
    [require.resolve('@babel/plugin-transform-runtime')],
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        alias: {
          // if you want to fork javascript file add a local path.resolve as first in array
          'xtend-ui': [path.resolve(__dirname, './node_modules/xtend-ui')],
        },
      },
    ],
  ],
}

Then import the corejs.

import 'core-js'

You need also to set a .browserslistrc in the root of your project.

Chrome >= 38
Safari >= 10
iOS >= 10
Firefox >= 38
Edge >= 12
Opera >= 25

Xtend

Install xtend.

npm install xtend-ui --save

Then import the xtend main file.

import { Xt } from 'xtend-ui'

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

import 'xtend-ui/src/core/toggle'
import 'xtend-ui/src/core/slider'

Animations

This library in the demos uses gsap for javascript animations. Install it.

npm install gsap --save

Then setup gsap this way. Also add the following xtend variables.

/**
 * gsap setup
 */

import gsap from 'gsap'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'

gsap.defaults({
  overwrite: 'auto',
})

gsap.config({
  force3D: false,
})

gsap.globalTimeline.timeScale(1000) // milliseconds instead of seconds

gsap.registerPlugin(ScrollToPlugin)

/**
 * Xt.vars
 */

Xt.vars = {
  timeMicro: 50,
  timeMini: 100,
  timeTiny: 250,
  timeSmall: 500,
  timeMedium: 750,
  timeLarge: 1000,
  timeBig: 1500,
  timeGiant: 2000,
  timeHuge: 3000,
}

// instant animations accessibility

if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce), (update: slow)').matches) {
  Xt.vars.timeMicro = 0
  Xt.vars.timeMini = 0
  Xt.vars.timeTiny = 0
  Xt.vars.timeSmall = 0
  Xt.vars.timeMedium = 0
  Xt.vars.timeLarge = 0
  Xt.vars.timeBig = 0
  Xt.vars.timeGiant = 0
  Xt.vars.timeHuge = 0
}

Css Customization

To customize the theme use tailwind theme configuration in the theme section of your tailwind.config.js file, with this special format that merges your configuration with xtend configuration..

module.exports = {
  theme: require('xtend-ui/src/tailwind-theme')({
    // extend theme in node_modules/xtend-ui/src/tailwind-theme.js
    extend: {
      colors: {
        accent: {
          100: '#F1F0FE',
          200: '#DDD9FD',
          300: '#C8C2FC',
          400: '#9E95FA',
          500: '#7567F8',
          600: '#695DDF',
          700: '#463E95',
          800: '#352E70',
          900: '#231F4A',
        },
      },
    },
  },
}

To see the xtend theme options see the source code of node_modules/xtend-ui/src/tailwind-theme.js.

To customize the utilities and components add your overrides under the xtend key in the theme section of your tailwind.config.js file, with this special format that merges your configuration with xtend configuration..

module.exports = {
  theme: require('xtend-ui/src/tailwind-theme')({
    // xtend utilities and components in node_modules/xtend-ui/src/tailwind-xtend.js
    xtend: theme => ({
      utilities: {
        core: {
          // disable utility
          utilityName: false,
          // modify utility
          utilityName: {
            '.selector': {
              myStyle: 'myStyleValue',
            },
          },
        },
      },
      components: {
        core: {
          // disable core component
          componentName: false,
          // modify core component
          componentName: {
            '.selector': {
              myStyle: 'myStyleValue',
            },
          },
        },
        addons: {
          // disable addon component
          addonName: false,
          // modify addon component
          addonName: {
            '.selector': {
              myStyle: 'myStyleValue',
            },
          },
        },
      },
    }),
  },
}

To see the default values see the source code of node_modules/xtend-ui/src/tailwind-xtend.js.

Browser support

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

Fork

git clone https://github.com/minimit/xtend-ui.git --depth 1

Contributing

Read our contributing docs before submitting a pull request.

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 serve to serve a production version

Acknowledgement

• Utility by TailwindCss MIT License
• Docs by Gatsby MIT License
• Icons by Feather Icons MIT License

Copyright

Licensed under MIT license. Docs licensed under CC BY 3.0.