Prefixes component

This section shows how you can manage browser prefixes with Frontsize.

Every prefix mixin is based on @use-css-prefix var located on your theme's app.less file, every mixin will add browser prefixes only if it's set to true. If the var will be set to false the mixin will simply generate the CSS3 property without any additional browser prefix.

All the mixins will expect the same params of the CSS3 original properties.

.selector {
    // single block of params
    .border-radius(4px 2px);
    
    // multiple block of params divided by ','
    // note the ';' at the end of the params list
    .box-shadow(0 2px 3px rgba(0,0,0,0.2), inset 0 -1px 0px rgba(255,255,255,0.3););
}

You can find the source code here.

Mixin name
.appearance
.backface-visibility
.background-clip
.background-origin
.blur
.border-image
.border-radius
.box-align
.box-direction
.box-flex
.box-ordinal-group
.box-orient
.box-pack
.box-shadow
.box-sizing
.column-count
.column-gap
.column-rule
.column-span
.column-width
.columns
.display
.filter
.font-smoothing
.globalPlaceholder
.globalSelection
.hyphens
.image-resolution
.input-placeholder
.interpolation-mode
.linear-gradient
.marks
.matrix
.matrix3d
.opacity
.outline-radius
.perspective
.resize
.rotate
.rotate3d
.rotateX
.rotateY
.rotateZ
.scale
.scaleX
.scaleY
.scaleZ
.selection
.skew
.skewX
.skewY
.text-fill-color
.text-overflow
.text-stroke
.text-stroke-color
.text-stroke-width
.transform
.transform-style
.transition
.transition-delay
.transition-duration
.transition-property
.transition-timing-function
.translate
.translate3d
.translateX
.translateY
.translateZ
.user-select

===

###display

If it's set with box as params, all available prefixes on property params like display: -webkit-box; and for the other browsers will be added.

.your-selector {
    .display(box);
}

CSS result

.your-selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -khtml-box;
    display: -moz-box;
    display: -o-box;
    display: box;
}

===

###globalPlaceholder

Sets a @textColor and @backgroundColor to the global mouse selection

Param	Default value	Required	Comment
@textColor	#999999	no
@textColorFocused	#CCCCCC	no
@fontFamily	@font-default	no	Frontsize var from app.less

Example

input[type=text] {
    @font: arial, helvetica, sans-serif;
    .globalPlaceholder(#999999, #CCCCCC, @font);
}

===

###globalSelection

Sets a @textColor and @backgroundColor to the global mouse selection

Param	Default value	Required	Comment
@textColor	none	yes
@backgroundColor	none	yes

Example

body {
    .globalSelection(#FCFCFC, #CFCFCF);
}