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
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
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
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.
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.
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.
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 :
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
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