YjSimpleGrid Structure

Thursday, 29 July 2010 21:55 Dragan Todorovic
Print PDF

YjSimpleGrid is combined out of code blocks that are needed for template to function. To eliminate code errors and for easy bug tracking, each code block is placed in own file and called in to main template. In the following examples you will see the structure of the code and well commented files that will help you understand the main goal of a framework.

As you already might know, simple Joomla! Template has everything placed in template index.php file. We are talking about too much code especially if you template has many module positions or JS and CSS files. Editing and maintaining this file can sometimes be very hard even for experienced template developer.

This is why YJSG index.php calls only 2 files in to function as you can see below

require( TEMPLATEPATH.DS."yjsgcore/yjsg_core.php");/* YJSG Framework main functions*/
require(TEMPLATEPATH.DS."yjsgcore/".$yjsg_getmain.""); /* 2 default views | yjsg_main.php = desktop | yjsg_mobile.php = mobile devices */

Line 1 is calling TEMPLATE_NAME/yjsgcore/yjsg_core.php file that is  containing main YJSG functions.

Line 2 is calling default template view.

$yjsg_getmain is the hook function that is recognizing what device the user is seeing the website from and this way is serving either main or mobile device layout.

TEMPLATE_NAME/yjsgcore/yjsg_main.php is the default site layout when viewed from desktop computers.

TEMPLATE_NAME/yjsgcore/yjsg_mobile.php is the default site layout when viewed from mobile devices.

Let us take a closer look at yjsg_main.php file and explain what it does

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
	<head>
	<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_head.php");/* <head> files containing css , js and php */?>
	</head>
	<body id="stylef<?php echo $default_font_family ?>">
	<?php if ($yjsg_mobile):/*back to mobile view visible on mobile devices*/
	require( TEMPLATEPATH.DS."layouts/mobile/yjm_switch.php");
	endif; ?>
	<div id="centertop" style="font-size:<?php echo $css_font; ?>; width:<?php echo $css_width.$css_widthdefined; ?>;">
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg1.php"); /* above header grid */ ?>
		<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_headerblock.php");/* header - header grid located in this file */?>
		<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_topmenu.php");/* top menu */?>
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg2.php");/* grid 2 adv1-adv5*/ ?>
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg3.php");/*grid 3 user1-user5*/ ?>
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg4.php");/* grid4 user6-user10*/ ?>
	</div>
	<!-- end centartop-->
	<div id="centerbottom" style="font-size:<?php echo $css_font; ?>; width:<?php echo $css_width.$css_widthdefined; ?>;">
		<?php require( TEMPLATEPATH.DS."layouts/layout".$site_layout.".php");/* mid grid - mainbody grids located in layout1.php - layout3.php*/?>
		<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_pathway.php");/* pathway including breadcrumb module position */ ?>
		<?php if ($show_tools == 1): ?>
		<?php include TEMPLATEPATH.DS."yjsgcore/yjsg_tools.php";/* site tools , font resizer , rtl switch */?>
		<?php endif;?>
	</div>
	<!-- end centerbottom-->
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg5.php");/* grid 5 user11-user15*/ ?>
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg6.php");/* grid 6 user16-user20*/ ?>
		<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg7.php");/* grid 7 user21-user25*/ ?>
		<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_footer.php");/* footer -  footer menu , copyright , YJSG logo , validation links*/?>
		<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_notices.php");/* IE6 and nonscript notices*/?>
	</body>
	</html>

As you can see this file has only 33 lines of code which will help you understand the layout and give you easy option to move code blocks by positioning the grid, menu or default grid above or under each other.

This file is almost self-explanatory because the file names already give you an idea what the files are and what code block they contain. We also commented the lines so you don't have to guess if this is a header or the menu code block.

If you look at the main grids structure and compare back to this file you should be able to understand how and where is each code block called in to action. For demo and YouGrids template we have used all available blocks but if you are developing template based on YJSG you can decide to have following structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_head.php");/* <head> files containing css , js and php */?>
</head>
<body id="stylef<?php echo $default_font_family ?>">
<?php if ($yjsg_mobile):/*back to mobile view visible on mobile devices*/
require( TEMPLATEPATH.DS."layouts/mobile/yjm_switch.php");
endif; ?>
<div id="centertop" style="font-size:<?php echo $css_font; ?>; width:<?php echo $css_width.$css_widthdefined; ?>;">
	<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_headerblock.php");/* header - header grid located in this file */?>
	<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_topmenu.php");/* top menu */?>
</div>
<!-- end centartop-->
<div id="centerbottom" style="font-size:<?php echo $css_font; ?>; width:<?php echo $css_width.$css_widthdefined; ?>;">
	<?php require( TEMPLATEPATH.DS."layouts/layout".$site_layout.".php");/* mid grid - mainbody grids located in layout1.php - layout3.php*/?>
	<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_pathway.php");/* pathway including breadcrumb module position */ ?>
</div>
<!-- end centerbottom-->
	<?php require( TEMPLATEPATH.DS."layouts/grids/yjsg5.php");/* grid 5 user11-user15*/ ?>
	<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_footer.php");/* footer -  footer menu , copyright , YJSG logo , validation links*/?>
	<?php require( TEMPLATEPATH.DS."yjsgcore/yjsg_notices.php");/* IE6 and nonscript notices*/?>
</body>
</html>

If this were a traditional Joomla! template it would take you much longer to change the code block structure and rearrange positions. You might even end up breaking the code. YJSG is making such changes very easy and simply because it is based on building bricks idea leaving not much room for errors. As you can see we practiced to use require() PHP function instead of include() so if there is a bug or error, you will be given a detail error description pointing to a specific code block.

So you got your own structure  now. To keep the visual reference of the grids in you template manager and not to be confused with grid blocks that do not exist in your layout, open

TEMPLATE_NAME/templateDetails.xml  file and remove the grid from there. Example;

we removed the Top grid that contains module position top1 - top5. You would go to line number 562 and remove the xml params code block for that grid.

<param name="yjsg_1_width" type="yjsgmultitext" default="20|20|20|20|20" labels="Top1|Top2|Top3|Top4|Top5" items="5" size="2" class="serialize_multiple" label="G1_LABEL"  description="G1_DESC" />

To make it even easier we did our best to minimize the markup used for grids and layouts. Please look at the grid example below.

	defined( '_JEXEC' ) or die( 'Restricted index access' );
	$css_width = $this->params->get("css_width");
	$YJ_modules = array();
	$YJ_max_modules = 5;
	$YJ_module_prefix = 'top';
	$YJ_starting_key = 1;
	$grid_widths = explode('|', $this->params->get( 'yjsg_1_width' ));
	require( TEMPLATEPATH.DS."yjsgcore/yjsg_widths.php");
	?>
	<?php if( $YJ_modules ):?>
	<div id="yjsg1">
		<?php foreach ($YJ_modules as $k=>$mod_width): 
		$mod_name = $YJ_module_prefix.$k; 
		if( !$mod_width ) continue;
		?>
		<div id="<?php echo $mod_name;?>" class="yjsgxhtml" style="width:<?php echo $mod_width;?>%;">
		<jdoc:include type="modules" name="<?php echo $mod_name;?>" style="<?php echo $YJsg1_module_style ?>" />
		</div>
	<?php endforeach;?>
	</div>
	<?php endif;?>

Surprised? :). Yes , we built a function that took away complicated coding techniques. Simple 10 lines of markup that constructs a complete grid containing 5 module positions. And this would be a CSS for ALL grids used in YouGrids template.

#yjsgheadergrid {
	float:right;
	overflow:hidden;
	height:auto;
	margin:0;
	padding:0;
	}
#yjsg1, #yjsg2, #yjsg3, #yjsg4, #yjsg5, #yjsg6, #yjsg7, #yjsgbodytop, #yjsgbodybottom {
	margin:10px auto 10px auto;
	text-align:center;
	overflow:hidden;
	height:auto;
	width:100%;
	padding:15px 0;
}
#yjsgbodytop, #yjsgbodybottom {
	width:100%;
	padding:0 0 0px 0;
	margin:5px 0 5px 0;
}
/* MAIN MODULE CONTAINER CLASS. FOR SPECIFIC STYLING
 USE #user1 .yjsgxhtml or #user1 .yjsgxhtml .yjsquare  */
.yjsgxhtml {
	float:left;
	clear:right;
	text-align:left;
	margin:0;
	padding:0;
}
.yjsgxhtml .yjsquare_in {
}
/* EXAMPLE OF LAST MODULE IN THE GRID BG IMAGE OVERRIDE 
 WE USED GRID1 MODULE POSITION TOP5. USEFULL FOR INSET LINE SEPARATOR BETWEEN MODULES*/
#yjsg1 #top5 {
	/*background:none;*/
}


To sum down please look at the YouGrids files tree structure. We will start from TEMPLATE_NAME folder and work our way down.


YouGrids files structure :



yjsg_structure

1. adminfolder containing en-GB.tpl_yougrids.ini file. This is main template manager language file and it is not visible in template folder. After the template install file is transferred to SITE_NAME/administrator/language/en-GB/ folder

2. CSS folder containing default template CSS files

3. CSS-admin folder containing yjsg_admin.css file. This file is required for default template manager  style.

4. CSS-mobile folder contains mobile layout CSS files. Handheld and iFamily including RTL versions of these files

5. editor_content.css holds main typography tags that you can use while editing your news articles. The list of these tags is visible in article editor under Styles.

6. layout.css contains main template structure including default grid layout ( left- mainbody - inset - right - insettop - insetbottom - bodytop grid - bodybottom grid ) , module grids layout , yjsquare modules layout, and default Joomla! modules CSS overrides. Each CSS code block is well commented and will give detail information on specific CSS property.

7. menus.css contains top menus and side menus CSS structure.

8. mesh.css holds default colors and background images CSS for Mesh template style.

9. metal.css holds default colors and background images CSS for Metal template style.

10. new.css is CSS file that you can use to create own template style. This file contains 9 steps instructions on how to do this.

11. newsitems.css contains all CSS properties needed for your template news items.

12. rounded.css file is called in to template only if you enable rounded corners module styles and contains rounded corners CSS structure.

13. template.css contains default CSS properties reset , fonts line heights, Joomla! default CSS structures for elements used  and system CSS. This file calls @import , layout.css , menus.css , newsitems.css and typo.css

14. template_rtl.css holds RTL template overrides

15. typo.css contains template typography styles.

16. user_pages.css contains CSS overrides for Joomla! com_user and is called in to template <head> tag only if you access com_user page views.

17. index.html restricts visitors from reading files folders

18. blank.gif is used for IE6 PNG fix

19. iepngfix.HTC is backup  IE6 PNG fix file if you need it. Default ( light version ) PNG fix is coded in ifie.php file

20. compress.php is called as main CSS file  only when you enable server side compression in template manager. This file will includes template.css with its @import files and CURRENT_STYLE.css file

21. ifie.php is used only if you view the website in IE6 and contains fixes for this browser.

22. elements folder contains custom template xml elements.

23. html folder contains default Joomla! extensions template override files.

24. images folder contains images used for particular template style.

25. layouts folder contains default template layouts including module grids,  default grid, and mobile layouts.

26. grids folder contains main template grids files.

27. mobile folder contains mobile layout views.

28. index.html restricts visitors from reading files folders

29. layout1.php contains following layout:   left - mainbody with top and bottom 3 module grids - right

30. layout2.php contains following layout:  mainbody with top and bottom 3 module grids- inset - left - right

31. layout3.php contains following layout:  left - right - inset - mainbody with top and bottom 3 module grids

32. src folder contains template JavaScript files that are mainly used for top menu and totop scroll.

33. yjsgcore folder contains following files:

  • yjsg_core.php - main template functions and parameters
  • yjsg_cssfonts.php -  CSS fonts switch
  • yjsg_cufonfonts.php - Cufon fonts switch
  • yjsg_fontapi.php - all fonts api and main switch for them
  • yjsg_footer.php - footer structure
  • yjsg_googlefonts.php - Google fonts switch
  • yjsg_hconditions.php - conditions for head scripts used in different cases
  • yjsg_head.php -  main css head files and head includes plus yjsg_hconditions.php inclusion
  • yjsg_headerblock.php - logo and yjsg_header.php grid inclusion
  • yjsg_links.php - footer links
  • yjsg_main.php - main site code blocks positions
  • yjsg_mgwidths.php -  default grid widths switch
  • yjsg_mgwidthsitem.php - default grid widths switch for specific itemid
  • yjsg_mobile.php -main mobile site view and specific mobile device inclusion switch
  • yjsg_modulestyle.php - if round corners CSS switch
  • yjsg_notices.php - IE6 and nonscript notice
  • yjsg_params.php - custom YJSG template parameters
  • yjsg_pathway.php - breadcrumbs module
  • yjsg_register.php - user registration used for mobile devices
  • yjsg_scripts.php - Jquery head inclusion switch
  • yjsg_stylesw.php - template styleswitcher
  • yjsg_tools.php- template tools , visible RTL and font size switch
  • yjsg_topmenu.php - template top menu
  • yjsg_widths.php- module grids width function
  • yjsgajax_reset.php - session reset for styleswitcher

34. en-GB.tpl_yougrids.ini contains frontpage template language. Upon template install this file is placed in SITE_NAME/language/en-GB/ folder and is not visible in template folder.

35. params.ini holds default template parameters

36. favicon.ico is default website favicon file

37. component.php is reduced template index.php output file and is mostly used in article print view.

38. error.php is custom error page

39. offline.php is custom offline page

40. index.php file is the main template index.php that calls in to action yjsg_core.php and yjsg_main.php or yjsg_mobile.php depending on user device view point.

41. template_thumbnail.png is small template image file visible on template name hover in template manager

42. templateDetails.xml is main xml file that controls template manager look and calls in action template parameters.



As you can see YJSG framework deserves its name but still gives you complete coding power with minimal effort. We hope that this article will help you create you next YjSimpleGrid powered Joomla! Template.



Sincerely yours. YouJoomla Templates Development Team

| + -