#less.style-library() v2.0.0Documentation
Display mixins
A wide range of various display mixins
Display mixins currently supported:
- flex
- grid
- colors
- dimensions
- space
- width
- clearfix
- psuedo
- mobile
- tablet
- desktop
Flex:
Flex displays should be applied to the flexbox parent element. Currently, 4 types are supported, and the type is a required parameter.
- space
- start
- end
- grid
1#display.flex(@type);To center align all children with equal spacing between them, use the 'space' type as the first parameter
1#display.flex(space);To align children from left to right of a container, use the 'start' parameter.
1#display.flex(start);To align children from right to left of a container, use the 'end' parameter.
1#display.flex(end);For a Grid like flexbox (works well for IE 11 as a flexbox fallback)
1#display.flex(grid);Grid
Apply these mixins to the grid parent element
1#display.grid(@columns, @rows, @gap);Values currently supported and default values include:
- Number of columns (2)
- Number of rows (auto)
- Gap value (0)
1#display.grid();To adjust the values pass in the number of columns, rows and gap value:
1#display.grid(4, 2, 10px);To justify content, justify items and align items in the center, use the 'center' type as the first parameter.
1#display.grid(center, 3, auto, 10px);Colors
1#display.colors(@color, @background-color);To minimize common repeatition, this mixin takes color as the first parameter and background-color as the second parameter. By default, color is set to black and background color set to white.
1#display.colors();Text Colour
To customize the values pass in the color and background-color of choice which will replace the defaults. In this case, the @color[secondary] value is set to the background-color.
1#display.colors(white, @color[secondary]);Text Colour
Dimensions
1#display.dimensions(@type, @width, @height);Use this mixin to add width and height values to elements. The type parameter is optional, by default width is set to 100px and height is set to auto.
1#display.dimensions();To customize the values, pass in the desired width value as the first paramater and height value as the second parameter.
1#display.dimensions(200px, 50px);If the width and height are the same values pass in the type 'equal', then the desired value (default is set to 100px)
1#display.dimensions(equal, 120px);Width
Width displays can be used when you need a width, min-width and max-width. By default width is set to auto, min-width is set to auto and max-width is set to 100%.
1#display.width(@width, @min, @max);To set a min-width and max-width only, use the minmax type as the first parameter. Min and Max values are the same as the default mixin.
1#display.width(minmax, @min, @max);Clearfix
When floating an element's children left or right, apply this mixin so the parent can retain it's height:
1#display.clearfix();Space
1#display.space(@type, @margin, @padding);By default, this mixin sets margin and padding to 0.
1#display.space();To adjust the values, pass in a margin as the first parameter and padding as the second parameter. In the example below, margin is set to 10px, and padding is set to 1rem.
1#display.space(10px, 1rem);When both margin and padding values should be set to 0, you can pass in 0 as the only parameter. Note this is teh same as the default settings but just slightly more readable.
1#display.space(0);When margin and padding have the same values, use the 'equal' type as the first parameter, and pass in a value (defaults to 0).
1#display.space(equal, 1rem);Pseudo Element
When targeting the ::before and ::after pseudo elements apply this mixin to display the Pseudo element with the content value. By default the following styles are added:
1display: block;
2content: '';1#display.pseudo(@content, @type);In this example below the ::after pseudo element was targeted, and a right angle quote character has been placed inside of it. Additionally, a width and height value was added with a mixin.
1#display.pseudo('›', inline);
2#display.dimensions(equal, 16px)Some Text
Viewport Display
Useful mixins when an element should be hidden by default and displayed on certain viewport widths or devices. The media query viewport width values are the values defined in the Breakpoints Variables
1#display.mobile();1#display.tablet();1#display.laptop();1#display.desktop();