Skip to content

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

Site: Lots of changes 

- Added in correct screenshot
- Cleanup - CSS/HTML
- Compress images
- Cave to my perfectionism syndrome
- Update content
- Labs app list now uses columns to auto wrap
- Lots more
parent accfecf0
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 299 deletions
index.html
View file @ cfc335e0
...@@ -8,42 +8,31 @@ ...@@ -8,42 +8,31 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<link href="site/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="site/css/bootstrap.min.css">
<link href="site/css/bootstrap-responsive.css" rel="stylesheet"> <link rel="stylesheet" href="site/css/bootstrap-responsive.css">
<link href="assets/base.css" rel="stylesheet"> <link rel="stylesheet" href="site/css/main.css">
<link href="site/css/main.css" rel="stylesheet"> </head>
<link href="site/css/buttons.css" rel="stylesheet"></head>
<body> <body>
<div class="container"> <div class="container">
<header class="row"> <header class="row">
<div class="span8"> <div class="span8">
<img class="logo" src="site/img/logo.png" width="500"/> <img class="logo" src="site/img/logo.png" width="500">
<p> <p>Helping you <strong>select</strong> a MV* framework</p>
Helping you <strong>select</strong>
a MV* framework
</p>
<nav> <nav>
<a href="#" class="zocial red">Download (1.0)</a> <a href="#" class="zocial red">Download (1.0)</a>
<a href="#" class="zocial red">Project on GitHub</a> <a href="#" class="zocial red">Project on GitHub</a>
</nav> </nav>
</div> </div>
<div class="span4"> <div class="span4">
<img id="icon" src="site/css/Todo MVC.png" width="350"></div> <img class="logo-icon" src="site/img/logo-icon.png" width="330" height="330" alt="TodoMVC">
</div>
</header> </header>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h2>Introduction</h2> <h2>Introduction</h2>
<p> <p>Developers these days are spoiled with choice when it comes to selecting an <strong>MV* framework</strong>
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 (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?</p>
for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you <p>To help solve this problem, we created <a href="https://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.</p>
<strong>decide</strong>
on which to use in a sea of so many options?
</p>
<p>
To help solve this problem, we 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.
</p>
</div> </div>
<div class="span8 applist"> <div class="span8 applist">
<h2>Our Stable Apps</h2> <h2>Our Stable Apps</h2>
...@@ -140,13 +129,14 @@ ...@@ -140,13 +129,14 @@
</div> </div>
</div> </div>
<hr> <hr>
<h2>Scroll down for 20 more framework apps in Labs</h2> <div class="row">
<h2 style="text-align:center;font-weight:300">Scroll down for 30 more framework apps in Labs</h2>
</div>
<hr>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<img id="screenshot" src="site/screenshot.png"> <img class="screenshot" src="site/img/screenshot.png">
<p style="font-size:25px;font-weight:400;margin-top:40px;font-style:italic"> <p class="tagline2">TodoMVC is a common learning application for popular JavaScript MV* frameworks</p>
TodoMVC is a common learning application for popular JavaScript MV* frameworks
</p>
</div> </div>
<div class="span6"> <div class="span6">
<h2>Introduction</h2> <h2>Introduction</h2>
...@@ -173,64 +163,26 @@ ...@@ -173,64 +163,26 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h2>Labs</h2> <h2>Labs</h2>
<p> <p>[text about labs? or something else?]</p>
Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.
</p>
<p>
Study the syntax required for defining models, views and (where applicable) controllers and classes 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>
Please
<strong>ensure</strong>
that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.
</p>
</div> </div>
<div class="span4"> <div class="span4">
<h2>Selecting a Framework</h2> <h2>Selecting a Framework</h2>
<p> <p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.</p>
Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out. <p>Study the syntax required for defining models, views and (where applicable) controllers and classes 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> <p>Please ensure that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.</p>
<p>
Study the syntax required for defining models, views and (where applicable) controllers and classes 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>
Please
<strong>ensure</strong>
that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.
</p>
</div> </div>
<div class="span4"> <div class="span4">
<h2>Getting Involved</h2> <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?</p>
<p>If so, feel free to fork the repo, read our <a href="https://github.com/addyosmani/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p>
<p>Make sure you use the <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point and read the <a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">app specification</a>.</p>
<p> <p>
Is there a bug we haven't fixed or an MV* framework you feel would benefit from being included in TodoMVC? <a class="zocial small gray" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a>
</p>
<p>
If so, feel free to fork the repo, read our
<a href="https://github.com/addyosmani/todomvc/wiki">contribution guidelines</a>
, and submit a pull request &mdash; we'll be happy to review it for inclusion.
</p>
<p>
Make sure you use the
<a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a>
as a starting point and read the
<a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">app specification</a>
.
</p>
<p>
<a class="zocial black" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a>
</p> </p>
</div> </div>
</div> </div>
<div class="row apps"> <hr>
<div class="span3"> <div class="row applist labs">
<h2>Optimized</h2>
<ul class="nav nav-pills">
<li>
<a href="architecture-examples/angularjs-perf/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
had it been designed for web apps. A version with several performance optimizations.">AngularJS (Optimized)</a>
</li>
</ul>
</div>
<div class="span3"> <div class="span3">
<h2>Labs</h2> <h2>Labs</h2>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
...@@ -245,10 +197,8 @@ had it been designed for web apps. A version with several performance optimizati ...@@ -245,10 +197,8 @@ had it been designed for web apps. A version with several performance optimizati
</li> </li>
<li> <li>
<a href="labs/architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> <a href="labs/architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a>
available.">Stapes * available.">Stapes *</a>
</a>
</li> </li>
<li> <li>
<a href="labs/architecture-examples/troopjs/index.html" data-source="https://github.com/troopjs/" data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, ComposeJS for object composition, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS *</a> <a href="labs/architecture-examples/troopjs/index.html" data-source="https://github.com/troopjs/" data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, ComposeJS for object composition, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS *</a>
</li> </li>
...@@ -266,21 +216,17 @@ had it been designed for web apps. A version with several performance optimizati ...@@ -266,21 +216,17 @@ had it been designed for web apps. A version with several performance optimizati
</li> </li>
<li> <li>
<a href="labs/architecture-examples/o_O/index.html" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding for teh lulz: &lt;br> <a href="labs/architecture-examples/o_O/index.html" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding for teh lulz: &lt;br>
- Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js * - Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js *</a>
</a>
</li> </li>
</ul>
</div>
<div class="span3">
<h2></h2>
<ul class="nav nav-pills">
<li> <li>
<a href="labs/architecture-examples/javascriptmvc/todo/todo/index.html" data-source="http://javascriptmvc.com/" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a> <a href="labs/architecture-examples/javascriptmvc/todo/todo/index.html" data-source="http://javascriptmvc.com/" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
</li> </li>
<li> <li>
<a href="labs/architecture-examples/batman/index.html" data-source="http://batmanjs.org/" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js *</a> <a href="labs/architecture-examples/batman/index.html" data-source="http://batmanjs.org/" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js *</a>
</li> </li>
<li>
<a href="labs/architecture-examples/socketstream/index.html" data-source="http://www.socketstream.org" data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream + jQuery</a>
</li>
<li> <li>
<a href="labs/architecture-examples/olives/index.html" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives *</a> <a href="labs/architecture-examples/olives/index.html" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives *</a>
</li> </li>
...@@ -302,14 +248,13 @@ had it been designed for web apps. A version with several performance optimizati ...@@ -302,14 +248,13 @@ had it been designed for web apps. A version with several performance optimizati
<li> <li>
<a href="labs/dependency-examples/angularjs_require/index.html" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a> <a href="labs/dependency-examples/angularjs_require/index.html" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>
</li> </li>
<li>
<a href="architecture-examples/angularjs-perf/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
had it been designed for web apps. A version with several performance optimizations.">AngularJS (Optimized)</a>
</li>
<li> <li>
<a href="labs/architecture-examples/plastronjs/index.html" data-source="https://github.com/rhysbrettbowen/PlastronJS" data-content="PlastronJS is an mvc framework built on top of the Closure Library and built to compile with projects that use the Closure Compiler.">PlastronJS *</a> <a href="labs/architecture-examples/plastronjs/index.html" data-source="https://github.com/rhysbrettbowen/PlastronJS" data-content="PlastronJS is an mvc framework built on top of the Closure Library and built to compile with projects that use the Closure Compiler.">PlastronJS *</a>
</li> </li>
</ul>
</div>
<div class="span3">
<h2></h2>
<ul class="nav nav-pills">
<li> <li>
<a href="labs/architecture-examples/canjs/dojo/index.html" data-source="http://canjs.us" data-content="CanJS with Dojo. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo)</a> <a href="labs/architecture-examples/canjs/dojo/index.html" data-source="http://canjs.us" data-content="CanJS with Dojo. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo)</a>
</li> </li>
......
site/css/main.css
View file @ cfc335e0
html,
body { body {
font: 15px "Helvetica Neue", Helvetica, Arial; margin: 0;
padding: 0;
}
body {
font: 15px 'Helvetica Neue', Helvetica, Arial;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
width: auto; width: auto;
background: #EAEAEA url('../../assets/bg.png');
color: #4D4D4D;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
} }
h1, h1,
...@@ -11,9 +24,9 @@ h3, ...@@ -11,9 +24,9 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: 600; font-weight: 500;
line-height: 1.2;
color: #000; color: #000;
font:100% Oswald, Helvetica;
} }
h2 { h2 {
...@@ -30,13 +43,13 @@ a:hover { ...@@ -30,13 +43,13 @@ a:hover {
color: #787e7e; color: #787e7e;
} }
.nav-tabs > li > a, .nav-pills > li > a{ .nav-tabs > li > a,
line-height:23px; .nav-pills > li > a {
line-height: 23px;
} }
p { p {
/*font: 100% Merriweather, Georgia;*/ font-size: 15px;
font-size:14px;
line-height: 1.5; line-height: 1.5;
font-weight: 300; font-weight: 300;
} }
...@@ -46,36 +59,28 @@ hr { ...@@ -46,36 +59,28 @@ hr {
border-bottom: 1px dashed #F7F7F7; border-bottom: 1px dashed #F7F7F7;
} }
header h1 {
font-size: 100px;
line-height: 1.2;
/*text-shadow: 2px 2px 1px #7D2A2F;*/
font-weight: 900;
}
header p { header p {
font-size: 30px; font-size: 30px;
} line-height: 1.2;
margin-top: 10px;
header .btn-large {
font-size: 20px;
margin-right: 10px;
} }
header nav { header nav {
margin: 20px 0; margin-top: 20px;
} }
header nav a { header nav a:first-child {
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px;
} }
.logo{ .logo {
margin-top:70px; margin-top:70px;
} }
.nav-tabs > li, .nav-pills > li{ .nav-tabs > li,
clear:both; .nav-pills > li{
clear: both;
} }
.vertical-space li { .vertical-space li {
...@@ -88,103 +93,51 @@ header nav a { ...@@ -88,103 +93,51 @@ header nav a {
margin-bottom: 20px; margin-bottom: 20px;
} }
.hero-unit {
padding: 0;
margin: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #f5f5f5;
}
.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;
width: 160px;
}
.hero-unit .btn-large:first-child {
margin-right: 10px;
}
.hero-unit nav {
margin-top: 35px;
margin-bottom: 10px;
}
.screenshot { .screenshot {
width: 528px;
float: right;
}
.header-title {
margin: 43px 60px;
float: none;
}
.container {
margin-top: 50px;
margin-bottom: 50px;
}
.nav-pills {
margin-left: -10px;
}
#icon {
float: right;
}
#screenshot {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 570px; max-width: 570px;
margin-top: 50px; margin-top: 12px;
} }
#app-preview { .tagline2 {
display: none; font-size: 21px;
margin-top: 43px; font-style: italic;
margin-left: -25px; margin-top: 40px;
} }
#demos { .container {
display: inline-block; margin-top: 10px;
margin-bottom: 20px;
} }
#demos ul { .nav-pills {
float: left; margin-left: -10px;
} }
#demos ul li { .applist a {
float: none; white-space: nowrap;
} }
#demos ul li a { .applist .label {
position: relative; position: relative;
top: -3px;
font-size: 9px;
padding: 1px 3px 1px;
background-color: rgba(0, 0, 0, .2);
} }
#demos .popover { .applist .popover {
margin: 0; margin: 0;
cursor: default; cursor: default;
color: #333; color: #333;
} }
#demos .popover-title { .applist .popover-title {
padding: 9px 70px 9px 15px; padding: 9px 70px 9px 15px;
} }
#demos .popover-title a { .applist .popover-title a {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
position: absolute; position: absolute;
...@@ -192,18 +145,17 @@ header nav a { ...@@ -192,18 +145,17 @@ header nav a {
right: 20px; right: 20px;
} }
.applist a { .applist.labs {
white-space: nowrap; -webkit-columns: 3;
} -moz-columns: 3;
-ms-columns: 3;
.applist .label { -o-columns: 3;
font-size: 9px; columns: 3;
padding: 1px 3px 1px;
background-color: rgba(0, 0, 0, .2);
} }
.credit a { .credit a {
margin: 0 5px; margin: 0 5px;
white-space: nowrap;
} }
.credit a img { .credit a img {
...@@ -215,8 +167,13 @@ header nav a { ...@@ -215,8 +167,13 @@ header nav a {
background-color: #a82400; background-color: #a82400;
} }
.zocial.black { .zocial.gray {
background-color: #333; background-color: rgba(0, 0, 0, .5);
}
.zocial.small {
font-size: 12px;
padding: 2px 10px;
} }
.zocial, .zocial,
...@@ -249,45 +206,54 @@ a.zocial { ...@@ -249,45 +206,54 @@ a.zocial {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#demos ul { .applist.labs {
float: none; -webkit-columns: auto !important;
-moz-columns: auto !important;
-ms-columns: auto !important;
-o-columns: auto !important;
columns: auto !important;
}
.credit a {
display: block;
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.screenshot {
width: 420px;
}
.header-title h1 {
font-size: 60px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.screenshot { h2 {
max-width: 528px !important; margin-top: 20px;
margin: 0 auto !important;
} }
.header-title {
margin: 30px !important; .row,
text-align: center; .credit {
max-width: 540px; margin-left: 10px;
margin: 30px auto !important; margin-right: 10px;
} }
.header-title h1 {
font-size: 60px; .logo {
max-width: 100%;
margin-top: 0;
} }
#demos ul {
margin: 0; .logo-icon {
font-size: 16px; display: none;
} }
}
@media (max-width: 1200px) { .container {
.header-title { margin: auto;
margin: 20px;
} }
.hero-unit .btn-large {
margin: 5px; .applist.labs {
-webkit-columns: 2;
-moz-columns: 2;
-ms-columns: 2;
-o-columns: 2;
columns: 2;
} }
} }
@media (max-width: 1200px) {
}
\ No newline at end of file
site/img/logo.png
View replaced file @ accfecf0 View file @ cfc335e0
site/img/logo.png

7.8 KB | W: | H:

site/img/logo.png

3.48 KB | W: | H:

site/img/logo.png
site/img/logo.png
site/img/logo.png
site/img/logo.png
  • 2-up
  • Swipe
  • Onion skin
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