Old Forums
Search:
Portal Engine Questions on portal engine and web parts.
Version 7.x > Portal Engine > Portal engine development best practices View modes: 
User avatar
Certified Developer 10
Certified Developer 10
varinder-kudosweb - 8/24/2013 8:13:55 PM
   
Portal engine development best practices
Well, this ones going to be a bit of a read.

Heres what ive been doing:

----- Easy Bits -----

CSS:

Splitting CSS into smaller chunks like below:

> WebsiteName - Reset
> WebsiteName - SiteElements
> WebsiteName - SiteElements - Lightbox
> WebsiteName - SiteElements - ...

And for production, im using one file "WebsiteName - Styles" that imports all the styles like below:
{% CSS["WebsiteName-Reset"] %}
</li>

file: newslisting
<div class="news-item"> <!-- module -->
   <a href="#">Some link</a>
   ....
</div>


Javscript:

So far, ive been doin a JS build locally using grunt and im wondering if thers a way to do concatination and minification in kentico.

For page load time, i tend to add my js files before "</body>" tag.

Now, Quiet often im loading different JS files based on page templates, visitor's gender (joke) etc well, i can load it using the "Head" webpart but is it possible to load a script at the of bottom the page?


Theming:

This beast has always confused me
What is the recommended way to add a theme ( quiet possibly, a seperate CSS ) based on domain name, or where the user is comming from?

I mean is it possible to load a stylesheet based on conditions like:

- If the domain name contains a certain word ( like "elvis" is "elvis.website.com" ) then load css called "elvis-theme.css"
- If the user is comming from "/latestnews.aspx" to "/news-details.aspx" then load css called "latest-news-theme.css"


I'd be interested to know how you folks get around maintaining websites and get around some of the problems mentioned above.

Cheers
Varinder

User avatar
Member
Member
DahlinDev - 8/27/2013 10:43:13 PM
   
RE:Portal engine development best practices
For the javascript you can add another page placeholder at the bottom of your Master page. Then in your templates add your js references in that. I've done that before.

User avatar
Certified Developer 10
Certified Developer 10
varinder-kudosweb - 8/29/2013 6:00:55 PM
   
RE:Portal engine development best practices
Thats a great approach!

Also, often times, different versions of jQuery seems to conflict with kentico's jQuery.

To avoid that, ive used below approach ( added at the bottom of masterPage ) taken from Stackoverflow
<asp:Placeholder ID="FrontEndScripts" runat="server" visible="false" >
	<!-- start: dev -->
                  <script type="text/javascript" src="~/CMSScripts/Custom/dev/libs/jQuery/jQuery.min.js"></script>
	          <script src="~/CMSScripts/Custom/dev/libs/flexslider/jquery.flexslider-min.js"></script>
		  <script src="~/CMSScripts/Custom/dev/libs/enquire/enquire.min.js"></script>
                  ...
	          <script src="~/CMSScripts/Custom/dev/assets/helpers.js"></script>
		  <script src="~/CMSScripts/Custom/dev/assets/elementqueries.js"></script>
                  ...
		  <script src="~/CMSScripts/Custom/dev/main.js"></script>
	<!-- end: dev  -->
</asp:Placeholder>

...

<script runat="server">
	protected override void OnInit(EventArgs e)
	{
                string CurrentViewMode = CMS.CMSHelper.CMSContext.ViewMode.ToString();

		if ( CurrentViewMode == "LiveSite" )
		{
			FrontEndScripts.Visible = true;
		}
        }
</script>

- Wonder if theres a recommended way to not loading scripts in design or edit mode

Top