Skip to content

T
todomvc
Commit 4518a412 authored by addyosmani's avatar addyosmani
Browse files
Options

adding index to download with instructions and links to packages

parent 78157af4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1215 additions and 1 deletion
index.html 0 → 100644
View file @ 4518a412
<!doctype html> <html lang="en"> <head> <meta charset="utf-8">
<!-- disable iPhone inital scale --> <meta name="viewport" content="width=device-width;
initial-scale=1.0">
<title>TodoMVC</title>
<!-- main css --> <link href="res/style.css" rel="stylesheet" type="text/css"> <!-- fontface css -->
<link href="res/fonts.css" rel="stylesheet" type="text/css">
<!-- media queries css --> <link href="res/media-queries.css" rel="stylesheet" type="text/css">
<!-- html5.js for IE less than 9 --> <!--[if lt IE 9]> <script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]> <script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewrap">
<a href="http://github.com/addyosmani/todomvc"><img style="position: absolute; top: 0; right: 0;
border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/
687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768
745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
<header id="header">
<hgroup> <h1 id="site-logo"></h1> </hgroup>
<nav> <ul id="main-nav" class="clearfix"> <li><a href="http://addyosmani.github.com/todomvc">Home</a></li> <li><a
href="#gettingstarted">Getting Started</a> </li> </ul> <!--
/#main-nav --> </nav>
</header> <!-- /#header -->
<div id="content">
<article class="post clearfix">
<!-- /.paragraph -->
<p>&nbsp;</p>
<!--startpara--> <header> <h1 class="post-title"><a name="gettingstarted">Thanks for downloading! Let's get started</a></h1> </header>
<!--startpara--> <h2 class="site-headline"> TodoMVC is a <strong>common</strong> set of JavaScript
<strong>examples</strong> for MVC frameworks like JavaScriptMVC, Backbone, Spine, Sammy and others.</h2>
<h2>Live examples</h2>
<p>To preview a Todo implementation for a particular framework, simply select it from the menu
to the right of the screen. </p>
<p>Depending on the browser you're using, you may need to access the examples over http to avoid incurring security exceptions with localStorage. I recommend <a href="http://www.wampserver.com/en/">WAMP</a> or <a href="http://www.mamp.info/en/index.html">MAMP</a> for this
purpose.</p>
<h2>Source code</h2>
<p>The directory structure for this download is quite easy to navigate around. 'todo-example' is the main implementation folder
and this contains sub-directories for each of the frameworks an implementation is available for. </p>
<p>To keep TodoMVC as self-contained as possible, all of the dependencies you need are included in this download, so you can easily
go in and start making changes to examples right away.</p>
<p>I would however recommend reading any readme files provided as these may include important information regarding build processes required should you make any
changes to code. At present, JavaScriptMVC is the only framework included which requires this.</p>
<!-- /.paragraph -->
</article> <!-- /.post -->
</div> <!-- /#content -->
<aside id="sidebar">
<section class="widget clearfix"> <h4 class="widgettitle">Select framework:</h4> <ul>
<li><a href="todo-example/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="todo-example/backbone/index.html">Backbone.js</a></li>
<li><a href="todo-example/spine/index.html">Spine.js</a></li>
<li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li>
<li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
</ul> </section> <!-- /.widget -->
<section class="widget"> <h4 class="widgettitle">GitHub</h4> <ul> <li><a
href="https://github.com/addyosmani/todomvc/">View repository</a></li> </ul>
</section> <!-- /.widget -->
<section class="widget clearfix"> <h4 class="widgettitle">Contributors</h4> <ul> <li><a
href="http://twitter.com/addyosmani">Addy Osmani</a></li> <li><a
href="http://twitter.com/justinbmeyer">Justin Meyer</a></li> <li><a
href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li> <li><a
href="http://twitter.com/macmann">Alex MacCaw</a></li> <li><a href="">Ashish Sharma</a></li> </ul>
</section> <!-- /.widget -->
</aside> <!-- /#sidebar -->
<footer id="footer">
<p>Copyright respective contributors, TodoMVC & Addy Osmani, 2011.</p>
</footer> <!-- /#footer -->
</div> <!-- /#pagewrap -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css" rel="stylesheet"
type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"
type="text/javascript"></script> <script
src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js"
type="text/javascript"></script> <script
src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"
type="text/javascript"></script> <script type="text/javascript"> SyntaxHighlighter.all() </script>
</body> </html>
\ No newline at end of file
res/fonts.css 0 → 100644
View file @ 4518a412
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 4, 2011 */
@font-face {
font-family: 'LeagueGothicRegular';
src: url('fonts/league_gothic-webfont.eot');
src: url('fonts/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/league_gothic-webfont.woff') format('woff'),
url('fonts/league_gothic-webfont.ttf') format('truetype'),
url('fonts/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
res/fonts/NEORD___-webfont.svg 0 → 100644
View file @ 4518a412
This source diff could not be displayed because it is too large. You can view the blob instead.
res/fonts/NEORF___-webfont.svg 0 → 100644
View file @ 4518a412
This diff is collapsed.
res/fonts/NEORS___-webfont.svg 0 → 100644
View file @ 4518a412
This diff is collapsed.
res/fonts/league_gothic-webfont.svg 0 → 100644
View file @ 4518a412
This diff is collapsed.
res/media-queries.css 0 → 100644
View file @ 4518a412
/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
/* pagewrap */
#pagewrap {
width: 95%;
}
/* content */
#content {
width: 60%;
padding: 3% 4%;
}
/* sidebar */
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
/* embedded videos */
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
min-height: 300px;
}
}
/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
/* header */
#header {
height: auto;
}
/* search form */
#searchform {
position: absolute;
top: 5px;
right: 0;
z-index: 100;
height: 40px;
}
#searchform #s {
width: 70px;
}
#searchform #s:focus {
width: 150px;
}
/* main nav */
#main-nav {
position: static;
}
/* site logo */
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
/* site description */
#site-description {
margin: 0 0 15px;
position: static;
}
/* content */
#content {
width: auto;
float: none;
margin: 20px 0;
}
/* sidebar */
#sidebar {
width: 100%;
margin: 0;
float: none;
}
#sidebar .widget {
padding: 3% 4%;
margin: 0 0 10px;
}
/* embedded videos */
.video embed,
.video object,
.video iframe {
min-height: 250px;
}
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}
/* main nav */
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
res/style.css 0 → 100644
View file @ 4518a412
/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
/* set image max width to 100% */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
background-color: #f0f0f0;
font: .81em/150% 'Helvetica Neue', Helvetica, Arial;
color: #666;
}
a {
color: #026acb;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
}
p {
font: 20px/100% "Helvetica Neue",sans-serif;
margin: 0 0 1.2em;
padding: 0;
color:#000;
font-size: 1.2em;
line-height: 26px;
}
/* list */
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
color:#000;
font-size: 1.2em;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
/* reset webkit search input styles */
input[type=search] {
-webkit-appearance: none;
outline: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 980px;
margin: 0 auto;
}
/************************************************************************************
HEADER
*************************************************************************************/
#header {
position: relative;
height: 160px;
}
/* site logo */
#site-logo {
position: absolute;
background-image:url('images/logo.gif');
width: 600px;
height: 100px;
}
#site-logo a {
/*
font: bold 70px/100% 'LeagueGothicRegular', Arial;
color: #c24e31;
text-decoration: none;
letter-spacing:-3px;
text-shadow: hsl(15, 84%, 10%) 1px 1px, hsl(15, 84%, 10%) 2px 2px, hsl(15, 84%, 10%) 3px 3px, hsl(15, 84%, 10%) 4px 4px;*/
}
/* site description */
#site-description {
font: italic 100%/130% "Times New Roman", Times, serif;
color: #fff;
position: absolute;
top: 55px;
}
.site-headline{
font: 20px/100% "Helvetica Neue",sans-serif;
font-weight:normal;
line-height: 26px;
}
/* searchform */
#searchform {
position: absolute;
right: 10px;
bottom: 6px;
z-index: 100;
width: 160px;
}
#searchform #s {
width: 140px;
float: right;
background: #fff;
border: none;
padding: 6px 10px;
/* border radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
/* transition */
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
}
/************************************************************************************
MAIN NAVIGATION
*************************************************************************************/
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
#main-nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#main-nav li:first-child {
margin-left: 10px;
}
#main-nav a {
line-height: 100%;
font-weight: bold;
color: #fff;
display: block;
padding: 14px 15px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#main-nav a:hover {
color: #fff;
background: #474747;
/* gradient */
background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
background: -moz-linear-gradient(top, #282828, #4f4f4f);
background: linear-gradient(-90deg, #282828, #4f4f4f);
}
/************************************************************************************
CONTENT
*************************************************************************************/
#content {
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* post */
.post {
margin-bottom: 40px;
}
.post-title {
margin: 0 0 5px 0;
padding: 0;
font: bold 30px/100% Helvetica, Arial, sans-serif;
letter-spacing:-1px;
text-shadow: 2px 3px 0px #ccc;
padding-bottom:5px;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
/* post image */
.post-image {
margin: 0 0 15px;
}
/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
width: 280px;
float: right;
margin: 30px 0 30px;
}
.widget {
background: #fff;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widgettitle {
margin: 0 0 5px;
padding: 0;
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 6px 0;
list-style: none;
clear: both;
border-top: solid 1px #eee;
}
/* flickr widget */
.widget .flickr_badge_image {
margin-top: 10px;
}
.widget .flickr_badge_image img {
width: 48px;
height: 48px;
margin-right: 12px;
margin-bottom: 12px;
float: left;
}
/************************************************************************************
FOOTER
*************************************************************************************/
#footer {
clear: both;
color: #666;
font-size: 85%;
}
#footer a {
color: #fff;
}
/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
res/stylesheet.css 0 → 100644
View file @ 4518a412
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 4, 2011 */
@font-face {
font-family: 'JournalRegular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
url('journal-webfont.woff') format('woff'),
url('journal-webfont.ttf') format('truetype'),
url('journal-webfont.svg#JournalRegular') format('svg');
font-weight: normal;
font-style: normal;
}
todo-example/javascriptmvc/todo/todo/index.html
View file @ 4518a412
......@@ -21,7 +21,7 @@
<div id="credits">
Created by
<a href="http://javascriptmvc.com/">Justin Meyer</a>. <br /> Fixes and updates: <a href="http://addyosmani.com">Addy Osmani</a>
<a href="http://javascriptmvc.com/">Justin Meyer</a>. <br /> Fixes, updates, stylistic changes: <a href="http://addyosmani.com">Addy Osmani</a>
</div>
<script type='text/ejs' id='todosEJS'>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7