Skip to content

Category: Joomla

Responsive Web Design

Responsive web design (RWD) is a design and technical approach that aims to adapt the layout and interaction of a site or app to work optimally across a wide range of device resolutions, screen densities and interaction modes with the same underlying codebase.

RWD basics

RWD has three key elements:

  • CSS media queries, used to target styles to specific device characteristics such as screen width breakpoint or resolution.
  • A fluid grid, that specifies elements and widgets in flexible units with the goal of making them flow to fill their containers.
  • Flexible images and media, are also sized in relative units so they re-size to fit within their containers.

By creating all screen elements to be fluid and flexible, it allows the media queries to focus primarily on controlling layout rules for containers; the modules inside simply re-size to fit their containers.

A simple responsive example may be two stacked containers, each with flexible content or widgets inside. At greater widths, media queries are used to float both containers to create a two column layout to take better advantage of the wider screen.

Since the content inside each container is designed to re-flow to fit its parent, the media queries can focus just on the rules for making the columns stack or float, and to override or add styles only needed at greater widths.

Order your responsive web design now from KAV Design at info@kavdesign.net or just call us at +359 898 884431

Minimal Wide- Responsive Joomla Template

Minimal Wide Joomla Template

DEMO

Features:
– responsible or fixed;
– sortable portfolio;
– light and fast loading;
– multibrowser support;
– quickstart package;
– PDF documentation.

Version – 1.1
Latest revision – May 2015

This is a clean, multipurpose, responsive, easy to customize template for Joomla 2.5 and Joomla 3.

Everything on this template is very standard and you can use it for very different kinds of websites.

Pretty basic code, so if you are a developer you will find it very easy for customization.

Please check the demo to see all features.

Tested on all modern browsers and different mobile phones. Works pretty well even on the old IE6.

Only one additional plugin used for the demo and quickstart packages and it is the slideshow on the front page by WidgetKit by YooTheme.

All images on the template photographed and edited by me.

Expect more nice templates from me soon…

Please email me if you want this theme for free.

Minimal – Multipurpose, Responsive Joomla Template

template_preview_590_300

>> DEMO

Features:
– responsible or fixed;
– sortable portfolio;
– custom contact page;
– multibrowser support;
– quickstart packages for Joomla 2.5 and Joomla 3;
– PDF documentation.

This is a clean, multipurpose, responsive, easy to customize template for Joomla 2.5 and Joomla 3.

Everything on this template is very standard and you can use it for very different kinds of websites.

Pretty basic code, so if you are a developer you will find it very easy for customization.

Please check the demo to see all features.

Tested on all modern browsers and different mobile phones. Works pretty well even on the old IE6.

Only one additional plugin used for the demo and quickstart packages and it is the slideshow on the front page by JS Flexslider – http://extensions.joomla.org/extensions/photos-a-images/slideshow/image-jquery-slideshow/22409

All images on the template photographed and edited by me.

Expect more nice templates from me soon…

Please contact me if you have any questions.

Send me an email to info@kavdesign.net if you want this theme for free.

Joomla! 3.0 and loading jQuery / Migrate Joomla template from 2.5 to 3.1

If you need to migrate yout Joomla template from Joomla 2.5 to Joomla 3.0 or 3.1 maybe you will need this info as I did.

The Joomla! 3.0 core ships with jQuery, and previous Joomla! versions did not. Extension developers like us therefor included a custom call to load jQuery in the past, whenever it was needed. However this standard needs updating. Here’s our proposal.

Loading jQuery only once

Because jQuery could be loaded in the past more than 1 time (and loading jQuery twice leads to unwanted errors, plus it makes no sense to load it twice), extension developers more or less agreed to use a flag in the Joomla! application-class:

$loaded = JFactory::getApplication()->get('jquery');

If the flag was not yet loaded, it could simply be loaded by your own extension, after which the flag needed to be set for other extensions to pick up on:

JFactory::getApplication()->set('jquery', true);

Joomla! 3.0 changes this

The Joomla! 3.0 core changes the JApplication-class in such a way that the get() and set() methods can no longer be used – the class no longer extends the JObject class which provided these methods. Simply put: Using the code above under Joomla! 3.0 throws a PHP Fatal Error.

But Joomla! 3.0 has also introduced jQuery as a core feature. Third party extensions no longer require to load jQuery, because it is already shipped with Joomla!. The only thing that extensions require is a simple call to the JHtml-class:

JHtml::_('jquery.framework');

Code proposal

So what is our proposal? Simple: Use the old method for Joomla! 2.5 and older, and use the new method for Joomla! 3.0. The version of Joomla! can be checked using framework-calls as well, so the code would look a bit like this:

JLoader::import( 'joomla.version' );
$version = new JVersion();
if (version_compare( $version->RELEASE, '2.5', '<=')) {
    if(JFactory::getApplication()->get('jquery') !== true) {
        // load jQuery here
        JFactory::getApplication()->set('jquery', true);
    }
} else {
    JHtml::_('jquery.framework');
}

Original article – http://www.yireo.com/blog/1556-joomla-30-and-loading-jquery

Full list of possible conflicts between Joomla 2.5 and Joomla 3.x here – http://docs.joomla.org/Potential_backward_compatibility_issues_in_Joomla_3_and_Joomla_Platform_12.2

Probably there are more things to know when migrating Joomla Templates from 2.5 to 3.x and if somebody get something please post a comment to this article.