fl-builder-css.php

<?php
/**
 * Render a single rule for a single device size.
 */
FLBuilderCSS::rule( array(
	'selector' => ".fl-node-$id .some-element",
	'media' => 'max-width: 980px', // Optional. Can be `default`, `medium`, `responsive` or a custom statement.
	'enabled' => 'bar' === $settings->foo, // Optional.
	'props' => array(
		'background-image' => $settings->bg_image_src,
		'background-repeat' => $settings->bg_repeat_responsive,
	),
) );

/**
 * Render a single rule/property for all device sizes (default, medium, responsive).
 * For this to work, your field must be defined as `responsive` => `true`.
 */
FLBuilderCSS::responsive_rule( array(
	'settings'	=> $settings,
	'setting_name'	=> 'align', // As in $settings->align.
	'selector'	=> ".fl-node-$id .some-element",
	'prop'		=> 'text-align',
) );

/**
 * Renders the rule/properties for a dimension field.
 */
FLBuilderCSS::dimension_field_rule( array(
	'settings'	=> $settings,
	'setting_name' 	=> 'padding',
	'selector' 	=> ".fl-node-$id .some-element",
	'unit'		=> 'px', // Omit if custom unit select is used.
	'props'		=> array(
		'padding-top' 	 => 'padding_top', // As in $settings->padding_top
		'padding-right'  => 'padding_right',
		'padding-bottom' => 'padding_bottom',
		'padding-left' 	 => 'padding_left',
	),
) );

/**
 * Renders the rule/properties for a typography field.
 */
FLBuilderCSS::typography_field_rule( array(
	'settings'	=> $settings,
	'setting_name' 	=> 'typography', // As in $settings->typography
	'selector' 	=> ".fl-node-$id .some-element",
) );

/**
 * Renders the rule/properties for a border field.
 */
FLBuilderCSS::border_field_rule( array(
	'settings' 	=> $settings,
	'setting_name' 	=> 'item_border', // As in $settings->item_border
	'selector' 	=> ".fl-node-$id .some-element",
) );