| // selectorSupported lovingly lifted from the mad italian genius, diego perini | |
| // http://javascript.nwbox.com/CSSSupport/ | |
| function selectorSupported(selector){ | |
| var support, link, sheet, doc = document, | |
| root = doc.documentElement, | |
| head = root.getElementsByTagName('head')[0], | |
| impl = doc.implementation || { |
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
| <?xml version="1.0" encoding="UTF-8" ?> | |
| <!-- | |
| HTML5 Boilerplate XSLT Master Stylesheet (based on Paul Irish's HTML5 Boilerplate index.html file) | |
| Created by Brian Zerangue on 2010-11-15. | |
| Copyright (c) 2010 Paul Irish (Everything but the XSLT), Brian Zerangue (XSLT). | |
| HTML5 Boilerplate, http://html5boilerplate.com | |
| --> | |
| <xsl:stylesheet version="1.0" | |
| xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE syntax SYSTEM "syntax.dtd"> | |
| <syntax> | |
| <head> | |
| <name>Sass</name> | |
| <!-- The definitions title --> | |
| <charsintokens>_0987654321abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-@$</charsintokens> | |
| <charsincompletion>_0987654321abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-@$</charsincompletion> | |
| </head> |
| @mixin linear-gradient($angle, $color1, $offset1, $color2 ,$offset2:100, $color3:null, $offset3:100, $color4:null, $offset4:100, $color5:null, $offset5:100){ | |
| $angle_webkit:'left top, left bottom'; | |
| $angle_svg:'%20x2%3d%220%25%22%20y2%3d%22100%25%22'; | |
| $color-stop1_css:'#'#{$color1}' '#{$offset1}'%'; | |
| $color-stop2_css:',#'#{$color2}' '#{$offset2}'%'; | |
| $color-stop3_css:''; | |
| $color-stop4_css:''; | |
| $color-stop5_css:''; | |
| $color-stop1_svg:'%3cstop%20style%3d%22stop%2dcolor%3a%23'#{$color1}'%22%20offset%3d%22'#{$offset1}'%25%22%2f%3e'; | |
| $color-stop2_svg:'%3cstop%20style%3d%22stop%2dcolor%3a%23'#{$color2}'%22%20offset%3d%22'#{$offset2}'%25%22%2f%3e'; |
| @mixin linear-gradient($angle, $color1, $offset1, $color2 ,$offset2:100, $color3:null, $offset3:100, $color4:null, $offset4:100, $color5:null, $offset5:100){ | |
| $angle_webkit:''; | |
| $angle_svg:''; | |
| $color-stop1_css:'#'#{$color1}' '#{$offset1}'%'; | |
| $color-stop2_css:',#'#{$color2}' '#{$offset2}'%'; | |
| $color-stop3_css:''; | |
| $color-stop4_css:''; | |
| $color-stop5_css:''; | |
| $color-stop1_svg:'%3cstop%20style%3d%22stop%2dcolor%3a%23'#{$color1}'%22%20offset%3d%22'#{$offset1}'%25%22%2f%3e'; | |
| $color-stop2_svg:'%3cstop%20style%3d%22stop%2dcolor%3a%23'#{$color2}'%22%20offset%3d%22'#{$offset2}'%25%22%2f%3e'; |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| $(window).load(function(){ | |
| $().hatchShow(); | |
| }); | |
| jQuery.fn.hatchShow = function(){ | |
| $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){ | |
| var t = $(this); | |
| t.wrap("<span class='hatchshow_temp' style='display:block'>"); | |
| var pw = t.parent().width(); |
| /* | |
| You can now create a spinner using any of the variants below: | |
| $("#el").spin(); // Produces default Spinner using the text color of #el. | |
| $("#el").spin("small"); // Produces a 'small' Spinner using the text color of #el. | |
| $("#el").spin("large", "white"); // Produces a 'large' Spinner in white (or any valid CSS color). | |
| $("#el").spin({ ... }); // Produces a Spinner using your custom settings. | |
| $("#el").spin(false); // Kills the spinner. |
NOTE I now use the conventions detailed in the SUIT framework
Used to provide structural templates.
Pattern
t-template-name