EW Resource

V4 SP2 Snippets

See also the Snippets tutorial

I've created eight new groups of snippets for SP2, described below. Installation instructions.

Robots meta tags

 

Robots Meta Tags

The Robots Meta Tags cover the normal robots related tags.

 

Download the Snippets Total downloads: 1494

HTML5 Snippets

 

HTML5

Note: V4 Update added 05 Mar 2012

The snippets for the new HTML5 semantic layout elements include a JavaScript shim (sometimes known as a 'polyfill'), 'LT IE9 shim' and a style definition, 'LT HTML5 style' that enables these elements to be recognised and styled by versions of IE6 upwards. This ensures users with non-HTML5 browsers still see the page as you intended.

Note: that this shim should be placed within the <head>..</head> tags and the style should be added to your main stylesheet.

V4 adds a CDN link to the NWX shim for the HTML5 form input types.

 

The Microdata snippets follow a data model that is recognised by the major search engines. For an explanation of these Microdata parameters see Schema.org

Download the Snippets Total downloads: 2161

Google +1 snippets

 

Google +1

To add a Google +1 button to a page using these snippets, first add the 'JavaScript tag' inside the <head>..</head> section of the page and then add the 'Google +1' snippet where you want the button to appear on the page.

Note that this won't show in xWeb's Design View and needs to be previewed in a browser.

Download the Snippets Total downloads: 1067

Lorem Ipsum filler text

Lorem Ipsum filler text

The Lorem Ipsum filler text snippet is a reworking, for SP2, of Anna Ulrich's original snippets for V3, V3 and V4.

These allow you to insert 1 to 5 paragraphs of Latin filler placeholder filler text. This can be useful when working up a design or demonstrating an outline to a customer etc.

Download the Snippets Total downloads: 1171

CDN Snippets

CDN - Javascript libraries V2

Note: V2 update added 12 March 2013, using latest versions and entryg jQuery DataTables and Knockout.  

These provide links to the JavaScript libraries on the Microsoft Ajax and Google CDNs.

If you are not familiar with these you should read the on-line documentation.

jQuery Cycle plug-in V2.99

jQuery Mobile  V1.3

jQuery Validate  V1.11.0

jQuery DataTables V1.9.4

Knockout V2.2.1  Dynamic Model-View-View Model UIs

Modernizr V2.06.  Note that this is a link to the full 'development' version. For use on a live site you should use a site-specific version that can be created on the Modernizr site.

Google WebFont Loader

Download the Snippets Total downloads: 1629

IE Conditional Comments

IE Conditional Comments

With the increasing use of HTML5 in particular, it's increasingly necessary to use conditional styles for both IE9 and the earlier versions to ensure a common browser viewing experience.

These snippets include the frequently used Conditional Comments.

The "!IE" (NOT IE) comment has the correct format, which is slightly different to the others and is often used incorrectly.

A test page shows these in use. Open the page in say IE9 and then use the Developer Tools to change the browser mode. You'll see the browser type is detected. If you test in any other browser, you'll see the green block changes to red.

Download the Snippets Total downloads: 874

 

V4 SP2 Mobile snippets

Mobile Snippets

Note: V2 update adds the Viewport meta tag

Seven snippets to help with mobile-friendly site development.

For full details see V4 Mobile Snippets

Download the Snippets Total downloads: 1180

CSS3 vendor specific style properties

CSS3 vendor-specific style properties

The standard snippets in SP2 have styles that include some of the vendor-specific properties. However it's more useful to have the style properties to apply to your own classes, rather than pre-defined styles. This collection of snippets gives the vendor-specific properties for several of the most useful CSS3 styles.

Note that browser support is not complete and that you should test them fully in your application.

 

Download the Snippets Total downloads: 1649

aria snippets imageAria Properties Snippets

A collection of snippets for the W3C 'ARIA' (Accessible Rich Internet Application) model, now officially part of the HTML5 specification and embedded in the major JavaScript libraries, jQuery, DoJo and YUI. Most current assistive technology tools, JAWS, NVDA and VoiceOver support ARIA.

The snippets are arranged in logical groups detailed by W3C and duplicated where this helps to clarify use.

Further information on the states and properties can be found at http://www.w3.org/TR/wai-aria/states_and_properties

A good MSDN article on the topic:

http://msdn.microsoft.com/en-us/magazine/jj863135.aspx

Download the Snippets Total downloads: 723

Installing Snippets

To install the Snippet collections, download the zip file and extract the contents to:

•Windows XP:

C:\Documents and Settings\[your windows user name]\Application Data\Microsoft\Expression\Web 4\mySnippets

•Windows Vista, Windows 7 or Windows 8:

C:\Users\[your windows username]\AppData\Roaming\Microsoft\Expression\Web 4\mySnippets