Add-ons https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons Mon, 02 Oct 2023 23:43:30 +0000 Joomla! - Open Source Content Management en-gb Round progress bars https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/123-round-progress-bars https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/123-round-progress-bars Round progress bars are very useful if you would like to display appealing number progress. To activate the round progress simply add data-yjsg-round-progress to your element. Note that by default the counter width and height is 150px and color is blue.
See options below if you wish to modify the defaults.

options:

Options Description
data-yjsg-round-progress *Required option. This data property will activate round progress bar.
data-start This is a counter start. Default is 0
data-end This is a counter end. Default is 100
data-border This is a counter border width. Default is 5 ( 5px ).
data-percent This will show percent sign. Default is true.
data-speed Progress speed. Default is 10.

example:

markup:

<div class="mybar yjsg-center" data-yjsg-round-progress data-start="8"  data-end="88"></div>
<div class="yjsg-center" style="color:#ff6600;border-top-color:#ff6600;border-bottom-color:#efefef;" data-yjsg-round-progress data-start="0"  data-end="58" data-border="10" data-speed="20" data-percent="false"></div>
<div class="mybar yjsg-center" data-yjsg-round-progress data-start="28"  data-end="78"></div>

Custom styling

To make custom styles for your round progress bars you can use following CSS on your progress bar element.

code:

.my_progress_bar{
width:200px; // progress width
height:200px;// progress height
font-size:20px; // progress font size
color:#ff6600; // progress font color
border-top-color:#2ecc71; // progress top color
border-bottom-color:#efefef; // progress bottom color
}

example:

markup:

<div class="my_progress_bar" data-yjsg-round-progress data-start="5"  data-end="38" data-speed="20" data-border="10"></div>

Activate progress bar when in view

To activate progress bar when in view you can use Waypoints jQuery plugin that comes with Yjsg framework. Please note that in this case you should not use data-yjsg-round-progress data attribute but yjsg-round-progress element class instead. Please use below code example as reference.

example:

markup:

<script>
    jQuery(document).on('ready', function () {
    jQuery('.mybar_in_view').waypoint(function() {
    jQuery(this).yjsgroundprogress();
    }, {
    offset: '100%',
    triggerOnce:true
    });
    });
</script>
<div class="mybar_in_view yjsg-round-progress" data-start="0"  data-end="90" data-speed="10"></div>
]]> Add-ons Thu, 02 Oct 2014 19:04:45 +0000 Tooltips https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/120-tooltips https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/120-tooltips Yjsg v2 is equipped with simple CSS tooltips that you can use on any HTML elements.

options:

Options Description
data-yjsg-tip *Required option. Data attribute that contains the tooltip.
class="yjsg-tip-left" Display tooltip on the left side.
class="yjsg-tip-right" Display tooltip on the right side.
class="yjsg-tip-top" Display tooltip above the element
class="yjsg-tip-bottom" Display tooltip under the element

example:

Default tooltip

example:

Left tooltip

example:

Right tooltip

example:

Bottom tooltip

markup:

<a class="button" href="#" data-yjsg-tip="I am CSS tooltip">
    Default tooltip
</a>
<a class="yjsg-tip-left button" href="#" data-yjsg-tip="I am left tooltip">
    Left tooltip
</a>
<a class="yjsg-tip-right button" href="#" data-yjsg-tip="I am right tooltip">
    Right tooltip
</a>
<a class="yjsg-tip-bottom button" href="#" data-yjsg-tip="I am bottom tooltip">
    Bottom tooltip
</a>
]]> Add-ons Thu, 05 Jun 2014 13:37:23 +0000 Sticky https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/119-sticky https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/119-sticky Sticky is a element that transforms in to a fixed position container. Stickies are useful for attracting users attention or to trigger hidden menus. You can also use data-sticky-menu to convert the sticky in to a smooth scroll menu.

options:

Options Description
class="yjsg-sticky" *Required option. Sticky trigger class name.
data-hide *Required option. This option defines if the sticky should be hidden until scrolled in to view or if it should stay visible.
data-pushed *Required option. You can use this option to push sticky down. Set to 0 not to push the sticky.
data-offset *Required option. This is a top position offset where the sticky should become visible.
data-effect *Required option. Sticky has 2 transition options. You can use slide or fade.
class="yjsgsitew" This is optional helper class that can be used inside the sticky contaner. This class holds the site width thus aligns the sticky in the middle.
class="inside-container" This is optional helper class that can be used inside the sticky contaner. This class lines up the grid system paddings.
data-sticky-menu Converts the sticky container in to a smooth scroll sticky menu. Requires specific setup. See markup.
data-sticky-block Converts sticky menu in to a right aligned sticky menu block. Requires specific setup. See markup.

markup:

<div class="yjsg-sticky" data-hide="no" data-pushed="0" data-offset="500" data-effect="slide">
    <div class="yjsgsitew"> I will become a sticky once you scroll 500px down.</div>
</div>
<div class="yjsg-sticky" data-hide="yes" data-pushed="120" data-offset="400" data-effect="fade" data-sticky-menu>
    <div class="yjsgsitew inside-container">
        <ul class="yjsg-sticky-menu">
            <li>
                <a class="yjscroll" data-before="120" href="#header">
                    Go back up
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll1">
                    Go to scroll 1
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll2">
                    Go to scroll 2
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="yjsg-sticky" data-hide="yes" data-pushed="250" data-offset="550" data-effect="slide" data-sticky-menu data-sticky-block>
    <div class="yjsgsitew inside-container">
        <ul class="yjsg-sticky-menu">
            <li>
                <a class="yjscroll" data-before="120" href="#header">
                    Go back up
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll1">
                    Go to scroll 1
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll2">
                    Go to scroll 2
                </a>
            </li>
        </ul>
    </div>
</div>







I am scroll 1







I am scroll 2

]]> Add-ons Thu, 05 Jun 2014 13:37:08 +0000 Smooth Scroll https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/118-smooth-scroll https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/118-smooth-scroll SmoothScroll is jQuery function that auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them.
For a simple use we have created smoothscroll class yjscroll that can be used on your anchors.

options:

Options Description
data-before Stop scroll nth px before the element.
data-after Stop scroll nth px after the element.

example:

markup:

<a class="yjscroll" href="#my_element">
    Scroll to 1
</a>
<a class="yjscroll" href="#my_element2" data-before="80">
    Scroll to 2
</a>
<a class="yjscroll" href="#my_element2" data-after="100">
    Scroll to 3
</a>
<div id="my_element"> Content... </div>
<div id="my_element2"> Content... </div>
<div id="my_element3"> Content... </div>

Section 1 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 2 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 3 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 4 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

]]> Add-ons Thu, 05 Jun 2014 13:36:51 +0000 Off-canvas https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/117-off-canvas https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/117-off-canvas Off canvas is hidden panel that can be used for displaying hidden blocks or menus. It can be used anywhere on your Joomla pages including modules and extensions.

options:

Options Description
class="yjsg-offc-btn" *Required option. Canvas trigger class name.
data-yjsg-canvas *Required option. Container that holds the canvas.
data-width *Required option. Canvas container width.
data-position Opening canvas position. Not required for default setup. Default is left.

example:

Custom list

Canvas 1

  • List item
  • List item
  • List item

markup:

<a href="#" class="yjsg-offc-btn button" data-yjsg-canvas="#block1" data-width="280">
    Custom list
</a>
<div id="block1" class="yjsg-off_canvas">
    <div class="yjsg-off_canvas_in">
        <h3>Canvas 1</h3>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>
</div>

example:

Canvas 2 right Canvas 2 left

Canvas 2

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

markup:

<a href="#" class="yjsg-offc-btn button" data-yjsg-canvas="#block2" data-position="right" data-width="380">
    Canvas 2 right
</a>
<a href="#" class="yjsg-offc-btn button" data-yjsg-canvas="#block2" data-width="380">
    Canvas 2 left
</a>
<div id="block2" class="yjsg-off_canvas">
    <div class="yjsg-off_canvas_in">
        <h3>Canvas 2</h3>
        <p>
            Content...
        </p>
    </div>
</div>
]]> Add-ons Thu, 05 Jun 2014 13:36:36 +0000 Labels https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/116-labels https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/116-labels Labels are simple class names that are used to highlight portion of your text. Yjsg comes with several labels class names that can be combined with different color class names or border radius.

options:

Class Description
class="yjt_label" Creates label can be combined with yjtb_color and radiusb( NTH ) class names. Radius class name go from radiusb2 up to radiusb10.

examples:

Red label Green label Blue label Yellow label Gray label Dark label Clear label Label with border radius

markup:

<span class="yjsg-hr-empty"></span>
<span class="yjt_label yjtb_red">Red label</span>
<span class="yjt_label yjtb_green">Green label</span>
<span class="yjt_label yjtb_blue">Blue label</span>
<span class="yjt_label yjtb_yellow">Yellow label</span>
<span class="yjt_label yjtb_gray">Gray label</span>
<span class="yjt_label yjtb_dark">Dark label</span>
<span class="yjt_label yjtb_clear">Clear label</span>
<span class="yjt_label yjtb_green radiusb10">Label with border radius</span>
]]> Add-ons Thu, 05 Jun 2014 13:36:22 +0000 Helper classes https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/115-helper-classes https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/115-helper-classes There are several helper classes that you can use to adjust you page content or layout.

options:

Class Description
class="yjsg-hr-empty" Creates an empty spacebetween elements.
class="yjsg-center" Centers the text and can be used on any element.
class="yjsg-text-left" Aligns the text to the left and can be used on any element
class="yjsg-text-right" Aligns the text to the right and can be used on any element
class="yjsg-pull-left" Floats the element left and can be used on any element
class="yjsg-pull-right" Floats the element right and can be used on any element
class="yjsg-larger" Increase the font size to 130% and can be used on any element
class="yjsg-sub-heading" Highlighted heading with a bottom border. Can be used on any element
class="yjsg-hide" Hides an element. Can be used on any element

markup:

<span class="yjsg-hr-empty"></span>
<span class="yjsg-center">...</span>
<span class="yjsg-text-left">...</span>
<span class="yjsg-text-right">...</span>
<span class="yjsg-pull-left">...</span>
<span class="yjsg-pull-right">...</span>
<span class="yjsg-larger">...</span>
<span class="yjsg-sub-heading">...</span> 
<span class="yjsg-hide">...</span>
]]> Add-ons Thu, 05 Jun 2014 13:35:58 +0000 Grid system https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/114-grid-system https://joomlatemplates.youjoomla.info/brook/index.php/features/add-ons/114-grid-system Yjsg v2 is equipped with mobile first, responsive grid system layout that can be used in any Joomla pages extensions or modules.
To take advantage of this grid system just add yjsg-row container and inside you can have up to 8 column blocks.
The examples below display the usage that is suitable for any page layout.

markup:

<div class="yjsg-row">
    <div class="yjsg-col-1-2"> content... </div>
    <div class="yjsg-col-1-2"> content... </div>
</div>

examples:

yjsg-col-1

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-2

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-2

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-3

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-3

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-3

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-6

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-6

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-6

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-6

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-6

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-6

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-8

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-2-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-3-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-4-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-3-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-2-3

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-3

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-2

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-2

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-4

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-3-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-3-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

yjsg-col-1-5

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

]]> Add-ons Thu, 05 Jun 2014 13:34:53 +0000