@layout-css/camel-properties v0.1.1

@layout-css/camel-properties

A simple library to provide lists of css properties applicable to layout. Components can use this to ensure consumers do not modify the appearance and adhere to supportable API.

import { properties } from '@layout-css/properties-camel'

This version of the library uses camelCase, but a kabob-case version is available with the same API:

import properties from 'layout-css/properties-camel'

• @layout-css/camel-properties
  • .properties : array
  • .propertiesExcluding ⇒ array
  • .propertiesExcludingWidth : array
  • .propertiesExcludingHeight : array
  • .propertiesExcludingSize : array

@layout-css/camel-properties.properties : array

An array of all css properties that can be used for layout, including vendor prefixed versions. This is also the default export.

[ 'position', 'top', 'right', 'bottom', 'left', 'float', 'margin-top', ... ]

Kind: static constant of @layout-css/camel-properties

@layout-css/camel-properties.propertiesExcluding ⇒ array

This function returns a properties list filtered remove any properties a component may not support, such as width. Any properties not matching are ignored.

This will also exclude any related shorthand, longhand and prefixed properties. For instance, excluding flexBasis will also exclude flex, since flex includes flexBasis. xcluding flex, will also remove flexGrow, flexShrink, flexBasis and all related vender prefixed versions.

This function is memoized to minimize workload, given this function may be called many times with the same parameters.

Example:

import { propertiesExcluding } from '@layout-css/properties-camel'

propertiesExcluding(['width', 'minWidth', 'maxWidth']);

Kind: static constant of @layout-css/camel-properties
Returns: array - A filtered list of layout properties.

@layout-css/camel-properties.propertiesExcludingWidth : array

This is a shortcut to remove the width, minWidth and maxWidth properties. This is useful for components that have a fixed width. flexBasis is not removed since it could be used for height or width.

import { propertiesExcludingWidth } from '@layout-css/properties-camel'

Kind: static constant of @layout-css/camel-properties

@layout-css/camel-properties.propertiesExcludingHeight : array

This is a shortcut to remove the height, minHeight and maxHeight properties. This is useful for components that have a fixed height. flexBasis is not removed since it could be used for height or width.

import { propertiesExcludingHeight } from '@layout-css/properties-camel'

Kind: static constant of @layout-css/camel-properties

@layout-css/camel-properties.propertiesExcludingSize : array

This is a shortcut to remove the flexBasis, height, width and related properties. This is useful for components that have a fixed size.

import { propertiesExcludingSize } from '@layout-css/properties-camel'

Kind: static constant of @layout-css/camel-properties