Permalink
Browse files

first decent site with json feed

  • Loading branch information...
Divya Manian
Divya Manian committed Nov 17, 2011
1 parent 182ffcd commit f1c782d85c269a6135b554431e68777199f27c35
Showing with 856 additions and 13 deletions.
  1. +24 −0 config.rb
  2. +86 −2 features.json
  3. BIN img/HTML5-logo.png
  4. +158 −5 index.html
  5. +47 −0 js/libs/jquery-1.6.1.js
  6. +18 −0 js/libs/jquery-1.6.1.min.js
  7. +4 −0 js/libs/modernizr-2.0.min.js
  8. +2 −0 js/libs/respond.js
  9. +2 −0 js/libs/respond.min.js
  10. +43 −0 js/script.js
  11. +1 −1 lib/index.js
  12. +67 −0 readme.md
  13. +342 −0 sass/style.scss
  14. +62 −5 template.html
View
@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "img"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
View
@@ -1,3 +1,87 @@
[
- { "feature": "border-radius", "tags": ["IE6", "Not-okay"] }
-]
+ {
+ "feature": "border-radius",
+ "tags": "gtie6 no-polyfill"
+ },
+
+ {
+ "feature": "SVG",
+ "recco": "All modern browsers support SVG. For legacy browsers, you can use <a href='#'>svgweb</a> as a flash-based polyfill, or develop with <a href='#'>Raphaél</a> which has a VML renderer for <abbr title='Internet Explorer 6-8.'>oldIE</abbr>.",
+ "tags": "gtie6 gtie7 gtie8 polyfill"
+ },
+ {
+ "feature": "Canvas",
+ "tags": "gtie8 polyfill",
+ "recco": "<a href='#'>FlashCanvas</a> or <a href='#'>excanvas</a> are your polyfills of choice if you absolutely need it."
+ },
+ {
+ "feature": "Video/Audio",
+ "tags": "gtie8 polyfill" ,
+ "recco": "Use mediaelement.js as polyfill for API (flash fallback w/ consistent visual design too).. Video for everyone base setup if No polyfill desired."
+ },
+ {
+ "feature": "CSS3 Selectors",
+ "tags": "gtie6 no-polyfill",
+ "recco": ""
+ },
+ {
+ "feature": "<code>data-*</code> attributes",
+ "tags": "",
+ "recco": "GROOVY everywhere obv. old browsers ignore unknown attributes, you can always use <code>getAttribute</code> or you can use the dataset polyfill for IE8+."
+ },
+ {
+ "feature": "CSS3 Transitions",
+ "tags": "gtie8 no-polyfill",
+ "recco": "shim layer recomendded to get hwaccel with js fallback (isotope, yui transition, scripty2) ... or let it degrade"
+ },
+ {
+ "feature": "CSS3 Animations",
+ "tags": "gtie8 dont-use",
+ "recco": ""
+ },
+ {
+ "feature": "border-image",
+ "tags": "gtie8",
+ "recco": ""
+ },
+ {
+ "feature": "box-shadow",
+ "tags": "gtie8",
+ "recco": ""
+ },
+ {
+ "feature": "box-reflection",
+ "tags": "dont-use",
+ "recco": "Webkit only. Dont use."
+ },
+ {
+ "feature": "font face",
+ "tags": "fallback",
+ "recco": "don't use cufon. use google webfonts or fontsquirrel generator"
+ },
+ {
+ "feature": "<code>&lt;input type=range></code>",
+ "tags": "form input polyfill",
+ "recco": "We recommend you use blah blah, and use <a href='#'>frank yan's polyfill</a> or <a href='#'>freqdec</a>'s."
+ },
+ {
+ "feature": "<code>&lt;input type=color></code>",
+ "tags": "form input dont-use",
+ "recco": "experimental use only"
+ },
+ {
+ "feature": "HTML5 Form Input Validation",
+ "tags": "form polyfill",
+ "recco": ""
+ },
+ {
+ "feature": "background-attachment",
+ "tags": "gtie7",
+ "recco": ""
+ },
+ {
+ "feature": "postMessage",
+ "tags": "gtie8",
+ "recco": ""
+ }
+]
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,5 +1,158 @@
-<ul>
-
- <li class="IE6,Not-okay">border-radius</li>
-
-</ul>
+<!doctype html>
+<html class='no-js' lang='en'>
+ <head>
+ <meta charset='utf-8' />
+ <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
+ <title>HTML5 Please</title>
+ <meta content='' name='description' />
+ <meta content='' name='author' />
+ <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+ <link href='http://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800' rel='stylesheet' />
+ <link href='css/style.css' rel='stylesheet' />
+ <script src='js/libs/modernizr-2.0.min.js'></script>
+ </head>
+ <body>
+ <header>
+ <h1>HTML5 <img src='img/HTML5-logo.png'> Please</h1>
+ <h2>
+ <b>Use the new and shiny responsibly.</b>
+ Look up properties and see if it is ready for use, and if so how you should use it with a polyfill, a fallback value or as it is.
+ </h2>
+ <h3>
+ <b>As recommended by</b>
+ <a href='#'>Paul Irish</a>
+ <a href='#'>Divya Manian</a>
+ </h3>
+ <h4>
+ <input name='livesearch' placeholder='type to filter' type='search' value='' />
+ </h4>
+ </header>
+ <div id='main' role='main'>
+ <section>
+
+ <article class="gtie6 no-polyfill">
+ <h2>border-radius</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="gtie6 gtie7 gtie8 polyfill">
+ <h2>SVG</h2>
+ <h3><b><i></i></b></h3>
+ <p>All modern browsers support SVG. For legacy browsers, you can use <a href='#'>svgweb</a> as a flash-based polyfill, or develop with <a href='#'>Raphaél</a> which has a VML renderer for <abbr title='Internet Explorer 6-8.'>oldIE</abbr>.</p>
+ </article>
+
+ <article class="gtie8 polyfill">
+ <h2>Canvas</h2>
+ <h3><b><i></i></b></h3>
+ <p><a href='#'>FlashCanvas</a> or <a href='#'>excanvas</a> are your polyfills of choice if you absolutely need it.</p>
+ </article>
+
+ <article class="gtie8 polyfill">
+ <h2>Video/Audio</h2>
+ <h3><b><i></i></b></h3>
+ <p>Use mediaelement.js as polyfill for API (flash fallback w/ consistent visual design too).. Video for everyone base setup if No polyfill desired.</p>
+ </article>
+
+ <article class="gtie6 no-polyfill">
+ <h2>CSS3 Selectors</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="">
+ <h2><code>data-*</code> attributes</h2>
+ <h3><b><i></i></b></h3>
+ <p>GROOVY everywhere obv. old browsers ignore unknown attributes, you can always use <code>getAttribute</code> or you can use the dataset polyfill for IE8+.</p>
+ </article>
+
+ <article class="gtie8 no-polyfill">
+ <h2>CSS3 Transitions</h2>
+ <h3><b><i></i></b></h3>
+ <p>shim layer recomendded to get hwaccel with js fallback (isotope, yui transition, scripty2) ... or let it degrade</p>
+ </article>
+
+ <article class="gtie8 dont-use">
+ <h2>CSS3 Animations</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="gtie8">
+ <h2>border-image</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="gtie8">
+ <h2>box-shadow</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="dont-use">
+ <h2>box-reflection</h2>
+ <h3><b><i></i></b></h3>
+ <p>Webkit only. Dont use.</p>
+ </article>
+
+ <article class="fallback">
+ <h2>font face</h2>
+ <h3><b><i></i></b></h3>
+ <p>don't use cufon. use google webfonts or fontsquirrel generator</p>
+ </article>
+
+ <article class="form input polyfill">
+ <h2><code>&lt;input type=range></code></h2>
+ <h3><b><i></i></b></h3>
+ <p>We recommend you use blah blah, and use <a href='#'>frank yan's polyfill</a> or <a href='#'>freqdec</a>'s.</p>
+ </article>
+
+ <article class="form input dont-use">
+ <h2><code>&lt;input type=color></code></h2>
+ <h3><b><i></i></b></h3>
+ <p>experimental use only</p>
+ </article>
+
+ <article class="form polyfill">
+ <h2>HTML5 Form Input Validation</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="gtie7">
+ <h2>background-attachment</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ <article class="gtie8">
+ <h2>postMessage</h2>
+ <h3><b><i></i></b></h3>
+ <p></p>
+ </article>
+
+ </section>
+ </div>
+ <footer></footer>
+ <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+ <script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
+ <script type='text/javascript'>
+ //<![CDATA[
+ window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')
+ //]]>
+ </script>
+ <!-- scripts concatenated and minified via ant build script -->
+ <script src='js/plugins.js'></script>
+ <script src='js/script.js'></script>
+ <!-- end scripts -->
+ <script type='text/javascript'>
+ //<![CDATA[
+ var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview'],['_trackPageLoadTime']];
+ (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+ g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g,s)}(document,'script'));
+ //]]>
+ </script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit f1c782d

Please sign in to comment.