Kartris User Guide

12.2.3. Designing a responsive skin

12.2.3.1. From scratch

If you are creating a skin for a new site, the best place to start is with our default skin. This has all the required mark-up in the master page, and links to the required CSS and javascript files.

12.2.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, but we'd strongly recommend starting with a cloned copy of our default skin, and working from there.

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>"
   

12.2.3.3. Old IE support

Foundation uses newer CSS techniques and Jquery which require newer browsers to run on. Users on Chrome and Firefox are generally automatically updated by default, so these users are rarely on old versions. However, Internet Explorer 9 or above is required for Foundation.

Because there are still a number of users stuck on older versions of Internet Explorer, we have built in support to deliver a non-responsive version of the site to them.

To create a non-responsive version of your skin for users on IE8 and earlier, it should be called the same as your main skin, but with 'NonResponsive' added to the name. For example, we ship Kartris with a default skin called 'Kartris', and the non-responsive version of this is therefore called 'KartrisNonResponsive'.

If you're upgrading a site to the responsive version of Kartris, you could keep your old skin and rename it to be used as the non-responsive skin.

From January 2016, Microsoft will only support the latest version of its browser available on each platform, which effectively means IE8 is no longer supported (as Vista can run IE9). From this date, the requirement to service older browsers should cease as they are no longer supported with security fixes, and every browser vendor will be delivering regular browser updates automatically by default.
The determination of whether to serve users the Foundation-based responsive skin or the 'NonResponsive' version is done based on server-side browser-sniffing for IE8 or earlier.
 
powered by tomehost