@layout-css/properties

@layout-css/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'

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

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

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

@layout-css/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/properties

@layout-css/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 flex-basis will also exclude flex, since flex includes flex-basis. Excluding flex, will also remove flex-grow, flex-shrink, flex-basis 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'

const myProps = propertiesExcluding(['width', 'min-width', 'max-width']);

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

Param	Type	Description
exclude	array	An array of properties to remove from the layout properties list.

@layout-css/properties.propertiesExcludingWidth : array

This is a shortcut to remove the width, min-width and max-width properties. This is useful for components that have a fixed width. flex-basis is not removed since it could be used for height or width.

Example:

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

Kind: static constant of @layout-css/properties

@layout-css/properties.propertiesExcludingHeight : array

This is a shortcut to remove the height, min-height and max-height properties. This is useful for components that have a fixed height. flex-basis is not removed since it could be used for height or width.

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

Kind: static constant of @layout-css/properties

@layout-css/properties.propertiesExcludingSize : array

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

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

Kind: static constant of @layout-css/properties