Skip to content

T
todomvc
Commit e9f5298d authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Merge gh-pages into master

parent 9812fd9e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4764 additions and 0 deletions
css/bootstrap-responsive.css 0 → 100644
View file @ e9f5298d
This diff is collapsed.
css/bootstrap-responsive.min.css 0 → 100644
View file @ e9f5298d
.hidden{display:none;visibility:hidden;}
@media (max-width:480px){.nav-collapse{-webkit-transform:translate3d(0, 0, 0);} .page-header h1 small{display:block;line-height:18px;} input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;} .input-prepend input[class*="span"],.input-append input[class*="span"]{width:auto;} input[type="checkbox"],input[type="radio"]{border:1px solid #ccc;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:10px;padding-right:10px;} .modal{position:absolute;top:10px;left:10px;right:10px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;margin:-10px;} .carousel-caption{position:static;}}@media (max-width:768px){.container{width:auto;padding:0 20px;} .row-fluid{width:100%;} .row{margin-left:0;} .row>[class*="span"],.row-fluid>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width:768px) and (max-width:980px){.row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="span"]{float:left;margin-left:20px;} .span1{width:42px;} .span2{width:104px;} .span3{width:166px;} .span4{width:228px;} .span5{width:290px;} .span6{width:352px;} .span7{width:414px;} .span8{width:476px;} .span9{width:538px;} .span10{width:600px;} .span11{width:662px;} .span12,.container{width:724px;} .offset1{margin-left:82px;} .offset2{margin-left:144px;} .offset3{margin-left:206px;} .offset4{margin-left:268px;} .offset5{margin-left:330px;} .offset6{margin-left:392px;} .offset7{margin-left:454px;} .offset8{margin-left:516px;} .offset9{margin-left:578px;} .offset10{margin-left:640px;} .offset11{margin-left:702px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid>[class*="span"]{float:left;margin-left:2.762430939%;} .row-fluid>[class*="span"]:first-child{margin-left:0;} .row-fluid .span1{width:5.801104972%;} .row-fluid .span2{width:14.364640883%;} .row-fluid .span3{width:22.928176794%;} .row-fluid .span4{width:31.491712705%;} .row-fluid .span5{width:40.055248616%;} .row-fluid .span6{width:48.618784527%;} .row-fluid .span7{width:57.182320438000005%;} .row-fluid .span8{width:65.74585634900001%;} .row-fluid .span9{width:74.30939226%;} .row-fluid .span10{width:82.87292817100001%;} .row-fluid .span11{width:91.436464082%;} .row-fluid .span12{width:99.999999993%;} input.span1,textarea.span1,.uneditable-input.span1{width:32px;} input.span2,textarea.span2,.uneditable-input.span2{width:94px;} input.span3,textarea.span3,.uneditable-input.span3{width:156px;} input.span4,textarea.span4,.uneditable-input.span4{width:218px;} input.span5,textarea.span5,.uneditable-input.span5{width:280px;} input.span6,textarea.span6,.uneditable-input.span6{width:342px;} input.span7,textarea.span7,.uneditable-input.span7{width:404px;} input.span8,textarea.span8,.uneditable-input.span8{width:466px;} input.span9,textarea.span9,.uneditable-input.span9{width:528px;} input.span10,textarea.span10,.uneditable-input.span10{width:590px;} input.span11,textarea.span11,.uneditable-input.span11{width:652px;} input.span12,textarea.span12,.uneditable-input.span12{width:714px;}}@media (max-width:980px){body{padding-top:0;} .navbar-fixed-top{position:static;margin-bottom:18px;} .navbar-fixed-top .navbar-inner{padding:5px;} .navbar .container{width:auto;padding:0;} .navbar .brand{padding-left:10px;padding-right:10px;margin:0 0 0 -5px;} .navbar .nav-collapse{clear:left;} .navbar .nav{float:none;margin:0 0 9px;} .navbar .nav>li{float:none;} .navbar .nav>li>a{margin-bottom:2px;} .navbar .nav>.divider-vertical{display:none;} .navbar .nav>li>a,.navbar .dropdown-menu a{padding:6px 15px;font-weight:bold;color:#999999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} .navbar .dropdown-menu li+li a{margin-bottom:2px;} .navbar .nav>li>a:hover,.navbar .dropdown-menu a:hover{background-color:#222222;} .navbar .dropdown-menu{position:static;top:auto;left:auto;float:none;display:block;max-width:none;margin:0 15px;padding:0;background-color:transparent;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .navbar .dropdown-menu:before,.navbar .dropdown-menu:after{display:none;} .navbar .dropdown-menu .divider{display:none;} .navbar-form,.navbar-search{float:none;padding:9px 15px;margin:9px 0;border-top:1px solid #222222;border-bottom:1px solid #222222;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.1),0 1px 0 rgba(255, 255, 255, 0.1);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.1),0 1px 0 rgba(255, 255, 255, 0.1);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.1),0 1px 0 rgba(255, 255, 255, 0.1);} .navbar .nav.pull-right{float:none;margin-left:0;} .navbar-static .navbar-inner{padding-left:10px;padding-right:10px;} .btn-navbar{display:block;} .nav-collapse{overflow:hidden;height:0;}}@media (min-width:980px){.nav-collapse.collapse{height:auto !important;}}@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="span"]{float:left;margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12,.container{width:1170px;} .offset1{margin-left:130px;} .offset2{margin-left:230px;} .offset3{margin-left:330px;} .offset4{margin-left:430px;} .offset5{margin-left:530px;} .offset6{margin-left:630px;} .offset7{margin-left:730px;} .offset8{margin-left:830px;} .offset9{margin-left:930px;} .offset10{margin-left:1030px;} .offset11{margin-left:1130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid>[class*="span"]{float:left;margin-left:2.564102564%;} .row-fluid>[class*="span"]:first-child{margin-left:0;} .row-fluid .span1{width:5.982905983%;} .row-fluid .span2{width:14.529914530000001%;} .row-fluid .span3{width:23.076923077%;} .row-fluid .span4{width:31.623931624%;} .row-fluid .span5{width:40.170940171000005%;} .row-fluid .span6{width:48.717948718%;} .row-fluid .span7{width:57.264957265%;} .row-fluid .span8{width:65.81196581200001%;} .row-fluid .span9{width:74.358974359%;} .row-fluid .span10{width:82.905982906%;} .row-fluid .span11{width:91.45299145300001%;} .row-fluid .span12{width:100%;} input.span1,textarea.span1,.uneditable-input.span1{width:60px;} input.span2,textarea.span2,.uneditable-input.span2{width:160px;} input.span3,textarea.span3,.uneditable-input.span3{width:260px;} input.span4,textarea.span4,.uneditable-input.span4{width:360px;} input.span5,textarea.span5,.uneditable-input.span5{width:460px;} input.span6,textarea.span6,.uneditable-input.span6{width:560px;} input.span7,textarea.span7,.uneditable-input.span7{width:660px;} input.span8,textarea.span8,.uneditable-input.span8{width:760px;} input.span9,textarea.span9,.uneditable-input.span9{width:860px;} input.span10,textarea.span10,.uneditable-input.span10{width:960px;} input.span11,textarea.span11,.uneditable-input.span11{width:1060px;} input.span12,textarea.span12,.uneditable-input.span12{width:1160px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;}}
css/bootstrap.css 0 → 100644
View file @ e9f5298d
This diff is collapsed.
css/bootstrap.min.css 0 → 100644
View file @ e9f5298d
This diff is collapsed.
css/main.css 0 → 100644
View file @ e9f5298d
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
h2 {
margin: 10px 0;
}
.vertical-space li {
margin: 5px 0;
}
.row {
margin-top: 20px;
}
.hero-unit {
padding: 0;
margin: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.hero-unit h1 {
font-size: 80px;
margin-bottom: 10px;
}
.hero-unit p {
font-size: 24px;
line-height: 32px;
}
.hero-unit .btn-large {
font-size: 20px;
font-weight: normal;
padding: 14px 24px;
}
.hero-unit .btn-large:first-child {
margin-right: 10px;
}
.hero-unit nav {
margin-top: 35px;
margin-bottom: 10px;
}
.screenshot {
width: 528px;
float: right;
}
.header-title {
margin: 43px 60px;
float: none;
}
#demos {
display: inline-block;
}
#demos ul {
float: left;
}
#demos ul li {
float: none;
}
@media (max-width: 480px) {
#demos ul {
float: none;
}
}
@media (min-width: 768px) and (max-width: 980px) {
.screenshot {
width: 420px;
}
.header-title h1 {
font-size: 60px;
}
}
@media (max-width: 768px) {
.screenshot {
max-width: 528px !important;
margin: 0 auto !important;
}
.header-title {
margin: 30px !important;
text-align: center;
max-width: 540px;
margin: 30px auto !important;
}
.header-title h1 {
font-size: 60px;
}
#demos ul {
margin: 0;
font-size: 16px;
}
}
@media (max-width: 1200px) {
.header-title {
margin: 20px;
}
.hero-unit .btn-large {
margin: 5px;
}
}
\ No newline at end of file
index.html 0 → 100755
View file @ e9f5298d
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="A common learning application for popular JavaScript MV* frameworks">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="hero-unit row">
<div class="span4 screenshot">
<img src="screenshot.png" width="528" height="330">
</div>
<div class="span5 header-title">
<h1>TodoMVC</h1>
<p>A common learning application for popular JavaScript MV* frameworks</p>
<nav>
<a class="btn btn-primary btn-large" href="https://github.com/addyosmani/todomvc/zipball/master">Download (latest)</a>
<a class="btn btn-large" href="http://github.com/addyosmani/todomvc">Follow on GitHub</a>
</nav>
</div>
</header>
<div class="row">
<div class="span4">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MV* framework</strong> for structuring and organizing JavaScript web apps. Backbone, Spine, Ember.js (SproutCore 2.0), JavaScriptMVC... The list of new and stable solutions goes on and on, but just how do you <strong>decide</strong> on which to use in a sea of so many options?.</p>
<p>To help solve this problem, I created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today. Solutions look and feel the same, have a common simple feature-set and make it <strong>easy</strong> for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.</p>
</div>
<div class="span5" id="demos">
<h2>Demos</h2>
<ul class="nav nav-pills">
<li><a href="todomvc/architecture-examples/backbone/index.html">Backbone.js</a></li>
<li><a href="todomvc/dependency-examples/backbone_require/index.html">Backbone.js + RequireJS</a></li>
<li><a href="todomvc/architecture-examples/emberjs/index.html">Ember.js</a></li>
<li><a href="todomvc/architecture-examples/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="todomvc/architecture-examples/spine/index.html">Spine.js</a></li>
<li><a href="todomvc/architecture-examples/sammyjs/index.html">Sammy.js</a></li>
</ul>
<ul class="nav nav-pills">
<li><a href="todomvc/architecture-examples/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="todomvc/architecture-examples/knockback/index.html">Knockback.js</a></li>
<li><a href="todomvc/architecture-examples/dojo/index.html">Dojo</a></li>
<li><a href="todomvc/architecture-examples/yuilibrary/index.html">YUILibrary</a></li>
<li><a href="todomvc/architecture-examples/angularjs/index.html">AngularJS</a></li>
<li><a href="todomvc/architecture-examples/angularjs_persistencejs/index.html">Angular + PersistenceJS</a></li>
</ul>
<ul class="nav nav-pills">
<li><a href="todomvc/architecture-examples/extjs/index.html">Ext.js</a></li>
<li><a href="todomvc/architecture-examples/broke/index.html">Broke.js</a></li>
<li><a href="todomvc/architecture-examples/fidel/index.html">Fidel.js</a></li>
<li><a href="todomvc/architecture-examples/closure/index.html">Closure</a></li>
<li><a href="todomvc/architecture-examples/jquery/index.html">jQuery</a></li>
<li><a href="todomvc/reference-examples/vanillajs/index.html">Vanilla JS</a></li>
</ul>
</div>
<div class="span3">
<h2>Coming Soon</h2>
<ul class="vertical-space">
<li>ES.Next Todo app using native Models, Modules, Classes.</li>
<li>Batman.js Todo app</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="span4">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<ol class="vertical-space">
<li>Download the <a href="https://github.com/addyosmani/todomvc/zipball/v0.2">latest release</a>.</li>
<li>Run TodoMVC on a local server (using <a href="http://www.mamp.info">MAMP</a>, <a href="http://www.wampserver.com/en/">WAMP</a> or another suitable setup). You can then select an app to run using the 'Live demos' link to the left.</li>
<li>Browse through the Todo apps, examine their source and discover which framework you might feel the most comfortable working with.</li>
</ol>
</p>
</div>
<div class="span4">
<h2>Selecting A Framework</h2>
<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to use.</p>
<p>Study the syntax required for defining models, views, controllers and classes (if supported) in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand.</p>
<p>Some developers have also found that creating derivative apps that take the basic list-editing concept further greatly helped them in their selection process, so you may find a similar exercise helpful.</p>
</div>
<div class="span4">
<h2>Getting Involved</h2>
<p>Is there a bug we haven't fixed or an MV* framework you feel would benefit from being included in TodoMVC? If so, feel free to grab the submit a pull request and I'll be happy to review it for inclusion. Make sure you use the <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request&raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>© TodoMVC, Addy Osmani</p>
</footer>
</div>
</body>
</html>
\ No newline at end of file
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