kartrisimport

14.3.2. Modifying an older Kartris skin to be responsive

This is a little more complicated. It's best to use our Template.master as a guide.

First, you will need to add in the extra CSS files; make sure they are in the right order (we tend to put the Foundation and associated files in first, and then override them where needed in custom.css):

			
			<link href="foundation.css" rel="stylesheet" type="text/css" />
<link href="normalize.css" rel="stylesheet" type="text/css" />
Also need the custom.css, which overrides some settings in the default Foundation css file:

			
			<link href="custom.css" rel="stylesheet" type="text/css" />
Then need this tag to tell mobile devices to size things properly:

			
			<meta name="viewport" content="width=device-width" />
You will also notice from the responsive template that the DIV structure uses various additional classes. These mark-up the page to format the layout using Foundation's 'grid' feature. This should be quite familiar to those who were used to layout out HTML with tablets in the old days, because the principles are quite similar. There is a good overview of the Foundation grid here:

http://foundation.zurb.com/docs/components/grid.html
Foundation also changes the DOCTYPE declaration, and handles older browsers:

			
			<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
At the end of the file, we need a tag which will insert a link dynamically to either the Zepto or Jquery library. Zepto is preferably, but IE can't run it. This code therefore links in Zepto on most browsers, but Jquery on IE.

			
			<asp:Literal runat="server" ID="litZeptoJquery"></asp:Literal>
<script>
$(function () {
     $(document).foundation();
})
</script>
Finally, the page load sub in the code-behind needs to create the content of that new tag:

			
			'Add zepto/jquery tag at end of page,
'this is part of the responsive layout
Dim strWebShopFolder As String = CkartrisBLL.WebShopFolder()
        litZeptoJquery.Text = "<script>" & vbCrLf & _
"document.write('<script src=JavaScript/'" & vbCrLf & _
"+ ('__proto__' in {} ? 'zepto' : 'jquery')" & vbCrLf & _
"+ '.js><\/script>');" & vbCrLf & _
"</script><script src=JavaScript/foundation.js></script>"
 
powered by tomehost