npm package: @frampton/style
Description: A library for working with CSS selectors in JS
Author: Kevin Greene
Latest version: 0.0.6

# Frampton Style

Frampton-style is a library for working with CSS selectors in JavaScript. This is widely used by the frampton-events library to filter events.


## Instalation

```
> npm install --save-dev @frampton/core
> npm install --save-dev @frampton/style
```


## Usage

```
import * as Style from '@frampton/style';
```

All exported functions of >1 arguments is curried.

For example the addClass function could be used as such.

```
import { addClass } from '@frampton/style';

const addActive = addClass('active');
addActive(document.getElementById('my-id'));
```

### addClass

Adds class to element.

```
import { addClass } from '@frampton/style';

// Add class to element
addClass('my-class', element);
```

### applyStyles

Apply a hash of styles to a given element.

The applyStyles function will apply vendor prefixes if needed for the current browser.

```
import { addClass } from '@frampton/style';

applyStyles({
  'box-shadow': '1px 1px 5px rgba(0,0,0,0.5)',
  'padding': '10px 20px',
  'color': 'red'
}, element);
```

### closest

Returns the closest parent to given element matching selector.

```
import { closest } from '@frampton/style';

const closestElement: HTMLElement =
  closest('.my-class', element);
```

### contains

Returns a boolean indicating if the given element, or one of its children, matches the given selector.

```
import { contains } from '@frampton/style';

const doesContain: boolean =
  contains('.my-class', element);
```

### currentValue

Returns the current value of the given CSS property on given element. Uses getComputedStyle under the hood.

```
import { currentValue } from '@frampton/style';

const currentHeight: string =
  currentValue('height', element);
```

### hasClass

Returns a boolean indicating if given element has given class.

```
import { hasClass } from '@frampton/style';

const doesHaveClass: boolean =
  hasClass('my-class', element);
```

### matches

Returns a boolean indicating the element matches the given selector.

```
import { matches } from '@frampton/style';

const doesMatch: boolean =
  matches('.my-class', element);
```

### removeClass

Removes given class from element.

```
import { removeClass } from '@frampton/style';

removeClass('my-class', element);
```

### removeStyle

Removes given style from element.

```
import { removeStyle } from '@frampton/style';

removeStyle('height', element);
```

### selectorContains

Returns a boolean indicating if the given element is contained inside of an element matching given selector. Returns true if the element itself matches selector.

```
import { selectorContains } from '@frampton/style';

selectorContains('.my-class', element);
```

### setStyle

Set value of a style on a given element.

```
import { setStyle } from '@frampton/style';

setStyle('height', '100px', element);
```

### supported

Returns a string indicating the supported version of a given CSS property on the current browser (vendor prefix applied if needed);

```
import { supported } from '@frampton/style';

const transformOnBrowser: string =
  supported('transform');
```

### supportedProps

Given a hash of CSS name/value pairs returns a new hash where the property names have any needed vendor prefixes applied.

```
import { supportedProps } from '@frampton/style';

const browserOpenState =
  supportedProps({
    transform: 'translate(100px)',
    opacity: '0.8',
    perspective: '300px'
  });
```