Skip to content

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

Site: Add checkmark list-style to whats new, Twitter and G+ buttons, and... 

Site: Add checkmark list-style to whats new, Twitter and G+ buttons, and Twitter and Open Graph meta tags
parent 77d4871e
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 12 deletions
index.html
View file @ c40460bc
......@@ -3,8 +3,12 @@
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="Helping you select a MV* framework">
<meta name="description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="twitter:card" content="summary">
<meta property="og:url" content="http://todomvc.com">
<meta property="og:title" content="TodoMVC">
<meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
......@@ -34,6 +38,8 @@
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MV* framework</strong> for structuring and organizing their JavaScript web apps.</p>
<p>Backbone, Ember, AngularJS, Spine... the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?</p>
<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>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="http://todomvc.com" data-text="TodoMVC - Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more"></a>
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://todomvc.com"></div>
</div>
<div class="span8">
<h2>Our Stable Apps</h2>
......@@ -99,12 +105,11 @@
</div>
<hr>
<div class="row">
<h2 style="text-align:center;font-weight:300">Scroll down for 30 more framework apps in Labs</h2>
<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="span6">
<h2>Thoughts on the project</h2>
<blockquote class="quote speech-bubble">
<p></p>
<footer>
......@@ -119,18 +124,18 @@
</div>
<hr>
<div class="row">
<div class="span3">
<div class="span4">
<h2>What's new in 1.0</h2>
<ul>
<ul class="whats-new">
<li>All main apps have been completely rewritten for consistency</li>
<li>Routing has been added to many of these</li>
<li>We now have 30 apps being worked on in Labs</li>
<li>We now have 30+ apps being worked on in Labs</li>
<li>We're using a kick-ass new template</li>
<li>Framework authors and contributors have been consulted to ensure our apps adhere to best practices</li>
<li>We're helping AMD users by adding AMD versions of many apps</li>
</ul>
</div>
<div class="span5">
<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 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>
......@@ -142,7 +147,7 @@
<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 small gray" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a>
<a class="zocial small gray" href="https://github.com/addyosmani/todomvc/wiki">Submit Pull Request &raquo;</a>
</p>
</div>
</div>
......@@ -256,6 +261,7 @@
<script src="site/js/bootstrap.min.js"></script>
<script src="site/js/main.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
</body>
</html>
\ No newline at end of file
site/css/main.css
View file @ c40460bc
......@@ -106,6 +106,21 @@ header nav a:first-child {
margin-bottom: 20px;
}
.whats-new {
list-style: none;
}
.whats-new li {
position: relative;
margin: 15px 0;
}
.whats-new li:before {
content: '✔';
position: absolute;
left: -20px;
}
.applist {
list-style: none;
margin: 0;
......@@ -300,6 +315,7 @@ a.zocial {
background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .05) 49%, rgba(0, 0, 0, .05) 51%, rgba(0, 0, 0, .1));
}
@media (max-width: 480px) {
body .applist {
-webkit-columns: auto !important;
......@@ -314,8 +330,7 @@ a.zocial {
}
}
@media (min-width: 768px) and (max-width: 980px) {
}
@media (min-width: 768px) and (max-width: 980px) {}
@media (max-width: 768px) {
h2 {
......@@ -360,5 +375,4 @@ a.zocial {
}
}
@media (max-width: 1200px) {
}
\ No newline at end of file
@media (max-width: 1200px) {}
\ 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