UnoCode Converter

Useful functions for fast-converting elements such as tables to display: block and fixed widths to relative widths.

Instalation

You can install UnoConverter via npm:

npm install --save @unocode/converter

Usage

import UnoConverter from '@unocode/converter';

const converter = new UnoConverter();

converter.toDiv('table.my-broken-table');

.toDiv(selector): Converting Table to DIV

What this function does is converting table's (and children recursively) display to block, this way mimicking the same functionality a div has, and making easier to apply responsiveness to a page.

import UnoConverter from '@unocode/converter';

const converter = new UnoConverter();

converter.toDiv('table.my-broken-table');

.toRelativeWidth(selector, overflowType? = [auto|scroll|hidden|visible]): Removing fixed width

With this function you're able to prevent layouts from exploding width max resolution on mobile interfaces. This method forces all elements under a given selector to ignore their set widths and behave with relative (percentage) widths. If that alone doesn't solve the issue, a second parameter overflowType can be passed with hidden or scroll values to prevent any bigger element from causing horizontal scroll in the body of the page.

import UnoConverter from '@unocode/converter';

const converter = new UnoConverter();

// Force all elements to ignore their widths and fit on screen
converter.toRelativeWidth('body');

// Force a certain element to hide anything under
// itself that still doesn't fits the screen
converter.toRelativeWidth('.my-element-with-big-children', 'hidden');

// Same as above, but making those elements to get a horizontal scroll
// on .my-element-with-big-children
converter.toRelativeWidth('.my-element-with-big-children', 'scroll');

.removeClasses(selector): Removing all CSS classes

If you need to clean elements (and their children) from all CSS classes, you can use this function to do so.

import UnoConverter from '@unocode/converter';

const converter = new UnoConverter();

// Remove all classes from all buttons in the page
converter.removeClasses('button');

// Remove all classes from all elements containing this class
converter.removeClasses('.remove-this-class');