Quix 2.0 RC is here. Take a look at the most powerful visual builder for Joomla!

Documentation

Find articles, step-by-step instructions, and advice for getting the most out of ThemeXpert.com

Quix comes with so many utility functions and classes to help you develop faster.

classNames

A simple utility function for conditionally joining classNames together. Example:

$classes = classNames( "qx-element qx-element-{$type} {$field['class']}", $visibilityClasses, [
    'qx-text-left' => $field['alignment'] === 'left',
    'qx-text-center' => $field['alignment'] === 'center',
    'qx-text-right' => $field['alignment'] === 'right',
    "wow {$field['animation']}" => $field['animation']
]);

Think you have an alignment slectbox in your element config that allow you to control text alignment. Bootstrap comes with alignment classes so you need to add right class in your <div> or <p> tag.

Traditional Way

$class = '';
if( $field['alignment'] == 'left' ){
  $class = 'qx-text-left';
}elseif( $field['alignment'] == 'center' ){
  $class = 'qx-text-center';
}elseif( $field['alignment'] == 'right' ){
  $class = 'qx-text-right';
}

classNames() Function

$classes = classNames([
    'qx-text-left' => $field['alignment'] === 'left',
    'qx-text-center' => $field['alignment'] === 'center',
    'qx-text-right' => $field['alignment'] === 'right',
]);

Plus you can join many class together, like :

$classes = classNames( "qx-element qx-element-{$type}",[
    'qx-text-left' => $field['alignment'] === 'left',
    'qx-text-center' => $field['alignment'] === 'center',
    'qx-text-right' => $field['alignment'] === 'right',
    "wow {$field['animation']}" => $field['animation']
]);

"wow {$field['animation']}" => $field['animation'] based on animation settings.

This class is designed to reduce your conditional code. Take a look at all core element for better understanding of its usages.

More Example of classNames()

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', [ bar: true ]); // => 'foo bar'
classNames([ 'foo-bar': true ]); // => 'foo-bar'
classNames([ 'foo-bar': false ]); // => ''
classNames([ foo: true ], [ bar: true ]); // => 'foo bar'
classNames([ foo: true, bar: true ]); // => 'foo bar'

// lots of arguments of various types
classNames('foo', [ bar: true, duck: false ], 'baz', [ quux: true ]); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, [ baz: null ], ''); // => 'bar 1'

Css Helpers

Font

<?php Css::fonts($field['font']);?>

This function automatically determine the font properties from your config and output them. If any of your typography field left blank, this function will not output it. Css output example:

font-family: 'Ubuntu';
font-size: 16px;
line-height: 30px;
....

Margin

<?php Css::margin($field['margin']);?>

This function automatically determine the margin properties from your config and output them accordingly. If any field left blank, this function will not output it. Css output example:

margin-top: 16px;
margin-btoom: 30px;
....

Padding

<?php Css::padding($field['padding']);?>

This function automatically determine the padding properties from your config and output them accordingly. If any field left blank, this function will not output it. Css output example:

padding-top: 16px;
padding-btoom: 30px;
....

Css Properties

<?php Css::prop('color', $field['text_color']);?>

This is a dynamic class for all css properties. First argument takes the css properties and second argument takes the value.

More example :

<?php Css::prop('background-repeat', $field['image_repeat']);?>
<?php Css::prop('background-position', $field['image_position']);?>
<?php Css::prop('background-size', $field['image_size']);?>