216 about/index.html
@@ -0,0 +1,216 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: About</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="about about_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><h1 id="toc_0">#betterfrontend is a movement to improve Front-End Development</h1>

<p>Front-end development sucks, and #betterfrontend is a movement by the
community to make it better.</p>

<p>Official twitter:
<a href="https://www.twitter.com/betterfrontend">@betterfrontend</a> &amp;
<a href="https://twitter.com/#!/search/%23betterfrontend">#betterfrontend</a></p>

<p>This repository will serve as a style guide for tools and libraries that are
used in front-end development.</p>

<p>A major problem with front-end development is that it doesn't have a
clear definition of what it is in itself, and the skills that are used
don't have much documentation. As a result, the learning curve is <em>too
damn high</em> and it's diffilcult to find best practices on how to do
things better. </p>

<p>The goal of this repository is to help alievate the definition problems
and provide style guides as well as general best practices.</p>

<p>The following things will be defined:</p>

<ul>
<li>Front-End Development</li>
<li>Tools used with Front-End Development</li>
<li>How to work on the Stylesheet layer effectively (CSS, Scss).</li>
<li>How to work on the HTML layer effectively (Html, Haml, erb, mustache).</li>
<li>How to work on the front-end layer of a web-application framework
effectively (Rails focused for now).</li>
</ul>
<hr>
<p><strong>If you disagree with anything in this document. PLEASE file an issue
so we can improve the community as a whole. This is a movement of
collaboration and refinement.</strong></p>

<p><strong>Our mission is to make front-end development better for you, your
team, and everyone else.</strong></p>

<h2 id="toc_1">Table of Contents</h2>

<ul>
<li><a href="https://github.com/hybridgroup/betterfrontend#what-is-front-end-development">What is Front-End Development?</a></li>
<li><a href="https://github.com/hybridgroup/betterfrontend/blob/master/stylesheets.md">Stylesheets</a></li>
<li><a href="https://github.com/hybridgroup/betterfrontend/blob/master/markup.md">Markup</a></li>
<li><a href="https://github.com/hybridgroup/betterfrontend/blob/master/design_patterns.md">Design Patterns</a></li>
<li><a href="https://github.com/hybridgroup/betterfrontend/blob/master/libraries.md">Libraries</a></li>
<li><a href="https://github.com/hybridgroup/betterfrontend/blob/master/rails.md">Rails</a></li>
<li><a href="https://github.com/hybridgroup/betterfrontend/blob/master/debates.md">Debates</a></li>
<li><a href="http://github.com/hybridgroup/betterfrontend/blob/master/tools.md">Tools</a></li>
</ul>
<h2 id="toc_2">What is Front-End Development?</h2>

<p>Front-End Development is programming the visual layer of a
web-application. Ruby apps like Hulu, Github, and Kanbanpad look the way
they do <em>because</em> of front-end development. A front-end developer is
just as nessecary as a back-end developer, despite this nessecity;
front-end development has a severe lack of attention and care. This
leads to huge problems for our community and we need to fix it.</p>

<p>Front-end development requires <em>masterful</em> use of HTML &amp; CSS. This is
due to the complexity of frameworks like Ruby on Rails. This repository
shall serve as a guideline of how to reach that level of mastery.</p>

<h2 id="toc_3">Front-End Development depends upon 3 core concepts.</h2>

<p>Architecture, Abstraction, and Foresight.</p>

<h3 id="toc_4">Architecture</h3>

<blockquote>
<p>Architecture is how all the pieces of the front-end layer fit together. It’s the grand scope of everything you are developing. It includes semantics, organization, abstraction, and foresight.</p>
</blockquote>

<h3 id="toc_5">Abstraction</h3>

<blockquote>
<p>Abstraction is making your code semantic and understandable to humans. A browser only really  cares about the definitions you give it. Like <code>:border-left</code>. The classes you put those definitions in are irrelevant to the browser. However, to you as a human, those classes mean everything. By abstracting concepts properly, you’re able to create a living world in your code that’s easy to understand. For example, .pacman, .comment, .post. That’s a simple level of abstraction and proper use of semantics. You could abstract things even further in CSS if you had variables, functions, expressions, and other traditional programming methods. When you follow this mentality you become efficient because the entire code base is easier to understand and read.</p>
</blockquote>

<h3 id="toc_6">Foresight</h3>

<blockquote>
<p>Foresight is simply being mindful of the future and the growth of the application. The HTML &amp; CSS layer does not have a toolkit for testing. That means you have to be mindful of repercussions when making any modifications to the code. This is absolutely critical and a unique problem for the front-end. With the back-end layer you can make changes to your code and have confidence that your tests will tell you when you break something. The front-end layer doesn’t have a tool for this. If you break the html or styling, you may never know until it’s too late. That’s a really bad situation. So the only way you can avoid that is with a good architecture in place that is mindful of foresight.</p>
</blockquote>

<h2 id="toc_7">What we're solving</h2>

<p>The principles that <a href="http://bem.github.com/bem-method/pages/beginning/beginning.en.html">BEM</a> mentions is great and no point rewriting it:</p>

<h3 id="toc_8">Fast-to-develop, long-lived projects</h3>

<blockquote>
<p>It should be possible to develop and launch the first version quickly with an architecture that helps maintain it in the long run.</p>
</blockquote>

<h3 id="toc_9">Numerous people working on a project</h3>

<blockquote>
<p>We should be able to organize work efficiently in teams of 2 or more developers.</p>
</blockquote>

<h3 id="toc_10">Team scalability</h3>

<blockquote>
<p>Adding new people to a product team should improve its productivity. We need to be able to assign new members to a team without a steep learning curve.
Code should be well-structured for a project to remain maintainable over time and team changes.</p>
</blockquote>

<h3 id="toc_11">Code reuse</h3>

<blockquote>
<p>To maintain UI consistency and minimize development effort on typical interface components, those components have to be easily reusable.</p>
</blockquote>

<h1 id="toc_12">Contributors</h1>

<p>In order of commit history:</p>

<ul>
<li>Daniel Fischer - <a href="http://www.danielfischer.com">web</a>,
<a href="http://www.twitter.com/dfischer">twitter</a>
</li>
</ul>
<h1 id="toc_13">Inspiration &amp; References</h1>

<p>Inspiration &amp; references that have triggered the text. These are in no
particular order and may or may not be in agreement with
'#betterfrontend'. The point is that they have contributed to the idea one
way or another.</p>

<p>In no particular order: </p>

<ul>
<li><a href="http://www.adobe.com/devnet/html5/articles/semantic-markup.html">http://www.adobe.com/devnet/html5/articles/semantic-markup.html</a></li>
<li><a href="http://yellowshoe.com.au/standards/">http://yellowshoe.com.au/standards/</a></li>
<li><a href="http://awardwinningfjords.com/2010/07/30/style-guides-using-sass-extend.html">http://awardwinningfjords.com/2010/07/30/style-guides-using-sass-extend.html</a></li>
<li><a href="https://github.com/styleguide/css">https://github.com/styleguide/css</a></li>
<li><a href="https://speakerdeck.com/u/bermonpainter/p/css-pre-processors-stylus-less-sass">https://speakerdeck.com/u/bermonpainter/p/css-pre-processors-stylus-less-sass</a></li>
<li><a href="http://smacss.com/">http://smacss.com/</a></li>
<li><a href="https://github.com/dennishall/CSS-Style-Guide">https://github.com/dennishall/CSS-Style-Guide</a></li>
<li><a href="http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/">http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/</a></li>
<li><a href="http://www.markdotto.com/2012/03/02/stop-the-cascade/">http://www.markdotto.com/2012/03/02/stop-the-cascade/</a></li>
<li><a href="http://coding.smashingmagazine.com/2012/04/20/decoupling-html-from-css/">http://coding.smashingmagazine.com/2012/04/20/decoupling-html-from-css/</a></li>
<li><a href="http://bem.github.com/bem-method/pages/beginning/beginning.en.html">http://bem.github.com/bem-method/pages/beginning/beginning.en.html</a></li>
</ul></article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
BIN +1.01 KB apple-touch-icon-114x114-precomposed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +640 Bytes apple-touch-icon-57x57-precomposed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +747 Bytes apple-touch-icon-72x72-precomposed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +640 Bytes apple-touch-icon-precomposed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +640 Bytes apple-touch-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 crossdomain.xml
@@ -0,0 +1,25 @@
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>


<!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

<!-- Most restrictive policy: -->
<site-control permitted-cross-domain-policies="none"/>



<!-- Least restrictive policy: -->
<!--
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" to-ports="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
-->
<!--
If you host a crossdomain.xml file with allow-access-from domain="*"
and don’t understand all of the points described here, you probably
have a nasty security vulnerability. ~ simon willison
-->

</cross-domain-policy>
190 debates/index.html
@@ -0,0 +1,190 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Making Front-End Development Fun again</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="debates debates_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><h1 id="toc_0">Debates. “Battle Royale”</h1>

<p>This file contains debates that are going on within the community that
argue for a specific best-practice.</p>

<h2 id="toc_1">Nesting, Decoupling, &amp; Cascading - <em>Need more pro/cons</em>
</h2>

<p>Our ultimate focus is maintainability. Given the following, which is
easier to maintain?</p>

<p>Taking the following Markup:</p>

<pre>.products
%article.product
%h1.title
%p.description
%span.price
%a.add

%form.new
%input.title
</pre>

<pre>.products {
.new {
.title {
}
}

.product {
.add {
}

.description {
}

.price {
}

.title {
}
}
}
</pre>

<p>This version exhibits one-word semantics scoped to a noun. Overall very
easy to read. It also offers interesting/advanced selector ability
whenever you want to travel outside of the namespace, as there are
probably a lot of elements using these one-word names.</p>

<p>Example: <code>.new</code> A ui interface that highlights on the page all elements
related to creating a new object.</p>

<p>Pros:</p>

<ul>
<li>Readability</li>
<li>Cascading potential</li>
<li>Namespacing removes conflict / unnessecary changes.</li>
</ul>
<p>Cons:</p>

<ul>
<li>Potentially violates <a href="http://thesassway.com/beginner/the-inception-rule">inception rule</a>.</li>
<li>Potentially hard to search for specific style through editor. There
may be more than one <code>.new</code> in <code>products.css.scss</code> </li>
</ul>
<p>vs.</p>

<pre>.products
%article.product
%h1.product-title
%p.product-description
%span.product-price
%a.product-add

%form.product-new
%input.product-title
</pre>

<pre>.products {
.product {
.product-add {
}

.product-description {
}

.product-price {
}

.product-title {
}
}

.product-new {
.product-new-title {
}
}
}
</pre>

<p>This version exhibits extreme verbosity. This can be nice on one hand,
but on the other, it can be really annoying. This is a double edged
sword.</p>

<p>Pros:
* Each class can exist out of the scope therefore helping inception
rule.
* Can easily find style with cmd+f
* Verbosity?</p>

<p>Cons:
* Can't target common selectors if needed. E.g, all .title's on page.
* Verbosity?</p>

<p>Which is easier to maintain for the developer? They both have their own
implications.</p>
</article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
BIN +1.12 KB favicon.ico
Binary file not shown.
82 guides/boilerplates/index.html
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Boilerplate Examples</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_boilerplates guides_boilerplates_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><h1 id="toc_0">Boilerplate Examples</h1>

<p>In here you'll find examples of files to use for certain situations.
Like a general application.html.haml for a Ruby on Rails installation.</p>
</article><aside class="secondary"><a href="https://github.com/hybridgroup/betterfrontend/issues" class="create-issue" target="_blank">Create <h1>Design Patterns</h1> <ul>
<li><a href="/design_patterns/">Decoupling Markup from
Stylesheets</a></li>
<li><a href="/design_patterns/">Another Decoupling Example</a></li>
<li><a href="/design_patterns/">Making the box-model easy</a></li>
<li><a href="/design_patterns/">Designing for Retina</a></li>
<li><a href="/design_patterns/">Carousels</a></li>
</ul></a></aside>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
207 guides/boilerplates/layouts/index.html

Large diffs are not rendered by default.

219 guides/design_patterns/index.html
@@ -0,0 +1,219 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Design patterns</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_design_patterns guides_design_patterns_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><div class="alert-box">
This guide needs help with formatting.
</div>
<div class="alert-box">
Table of Contents is not organized and maybe needs to be split into different
files.
</div>

<h1 id="toc_0">Decoupling Markup from Stylesheets</h1>

<p>It's very common to see people coupling elements with their stylesheets.</p>

<p>For example:</p>

<pre>%div.products
%div.product
%span.title Product Title

%form.new
%label.title
</pre>

<p><em>Don't like how the classes are named? <a href="https://github.com/hybridgroup/betterfrontend/blob/master/debates.md">Take a look at our debates.</a></em></p>

<pre>div.products {

div.product {
span.title {
}
}

form {
label {
}
}
}
</pre>

<p>When you do this, you force yourself to update at least 2 files to make
one change. This coupling is bad for maintainability. </p>

<p>We recommend using <em>only</em> classes in stylesheets. This allows you to
evolve the markup layer as it makes sense. The only exception to this
rule is when the markup provided is absolutely semantically accurate. As
a side note, this means we're able to evolve our markup layer as more
standards are implemented.</p>

<p>For example taken from above</p>

<pre>%div.products
%div.product
%span.title Product Title

%form.new
%label.title
</pre>

<pre>.products {
.new {
.title {
}
}

.product {
.title {
}
}
}
</pre>

<p>This decouples stylesheets from the markup layer which brings us more
maintainability. Great!</p>

<p>If you disagree, <a href="https://github.com/hybridgroup/betterfrontend/issues/new">create an issue</a>.</p>

<h1 id="toc_1">Another decoupling example that adds semantics</h1>

<p>Take an example of a list of things. For example:</p>

<pre>.products
%ul
%li= link_to 'product 1'
%li= link_to 'product 2'
%li= link_to 'product 3'
%li= link_to 'product 4'
</pre>

<p>Usually people will style the above like the following:</p>

<pre>.products {
ul {
li {
// styles
}
}
}
</pre>

<p>Instead of relying on the markup structure, do the following for a more
maintainable stylesheet and markup layer:</p>

<pre>%ul.products
%li.product= link_to 'product 1'
%li.product= link_to 'product 2'
%li.product= link_to 'product 3'
%li.product= link_to 'product 4'
</pre>

<pre>.products {
.product {
// styles
}
}
</pre>

<p>This gives us better readability on the stylesheet layer and decouples
the markup from the classes allowing for more maintainable stylesheets.</p>

<h1 id="toc_2">Making the box-model easy</h1>

<p>Isn't it annoying that width and padding are additional to the total
width of the element? You know it's made layouts a pain every now and
then. Luckily, there's a widely supported fix now.</p>

<pre>/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
</pre>

<p>It's extremely safe to use, and even though the <code>*</code> selector is used,
performance isn't an issue. For more details check out the <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">Paul Irish's
post</a></p>

<h1 id="toc_3">Designing for Retina</h1>

<p>Since retina is going to become more of a standard, it's now time to
seriously think about how it affects our displays. Retina (Apple
branded) is effetively double the pixel density of a normal display.
That means if you view a photo at double resolution it'll look pretty
awful.</p>

<p>We need to serve higher quality assets. However, does it make sense to
serve higher quality assets to resolutions that can't tell the difference?</p>

<p>The <a href="https://github.com/superacidjax/clear_eyes?utm_source=rubyweekly&amp;utm_medium=email">Clear Eyes</a> library aims to fix this problem.</p>

<h1 id="toc_4">Carousels</h1>

<p>Recommended plugins for carousels:</p>
</article><aside class="secondary"><a href="https://github.com/hybridgroup/betterfrontend/issues" class="create-issue" target="_blank">Create an issue →</a> <h1><a href="#toc_0">Design Patterns</a></h1></aside>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
89 guides/index.html
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Getting Started with</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><h1 id="toc_0">Getting Started</h1>

<p>Ready to get started with some guides? Check out the table of contents
to the right.</p>

<h2 id="toc_1">Philosophy</h2>

<p>This is a community project. The sole aim is to make front-end
development better for everyone. If you see any issues with the guides
please feel free to <a href="https://github.com/hybridgroup/betterfrontend/issues">create an issue</a> or simply make a pull request for the <a href="https://github.com/hybridgroup/betterfrontend">#betterfrontend github project.</a></p>
</article><aside class="secondary"><a href="https://github.com/hybridgroup/betterfrontend/issues" class="create-issue" target="_blank">Create an issue →</a> <h1>Guides</h1> <ul>
<li><a href="/guides/stylesheets">Stylesheets</a></li>
<li><a href="/guides/markup">Markup</a></li>
<li><a href="/guides/design_patterns">Design Patterns</a></li>
<li><a href="/guides/rails">Ruby on Rails</a></li>
<li><a href="/guides/boilerplates">Boilerplates</a></li>
<li><a href="/guides/libraries">Libraries</a></li>
<li><a href="/guides/tools">Tools</a></li>
</ul></aside>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
136 guides/libraries/index.html
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Libraries</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_libraries guides_libraries_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><div class="alert-box">
This guide needs help with formatting.
</div>
<div class="alert-box">
Table of Contents is not organized and maybe needs to be split into different
files.
</div>

<h1 id="toc_0">Libraries</h1>

<p>Here are some libraries that are commonly used for front-end
development. This is going to be opinionated. We can't recommend
everything, we want to recommend something that fits the majority so we
can see consistency across projects.</p>

<h3 id="toc_1">Sass <em>necessary</em>
</h3>

<h3 id="toc_2">Compass <em>necessary</em>
</h3>

<h4 id="toc_3">Sprites</h4>

<p>Use sprites whenever possible.</p>

<h3 id="toc_4">Blueprint <em>not recommended</em>
</h3>

<h3 id="toc_5">Bootstrap <em>complicated</em>
</h3>

<p>Bootstrap is an amazing idea. However, it has some pitfalls that
everyone should be aware of. First of all, as a number one, it
completely violates semantics and modern HTML5 spec.</p>

<p>Especially when using a grid system in a basic way, you expose yourself
to habits that lead to unmaintainable sylesheets.</p>

<p>The best way to solve this is to use <code>@extend</code> to keep your stylesheets
semantic and maintainable. However, because of how Bootstrap uses it's
CSS3 selectors you can't do this by just using <code>@import bootstrap</code> </p>

<p>The problem:</p>

<p>I want to maintain a semantic stylesheet structure. So I put
<code>bootstrap.css</code> into <code>vendor/stylesheets/bootstrap.css.scss</code> and then I
<code>@import bootstrap</code> in <code>application.css.scss</code></p>

<p>From there I want a specific class to have a <code>.span4</code> e.g:</p>

<pre>.header {
@extend .span4
}
</pre>

<p>In general this would work, however due to bootstrap using something
like <code>[class*="span"]</code> it breaks this strategy to maintain a clean
stylesheet. So basically, you're forced to having to put .span4, .rows
all over your <em>Markup</em> layer and that goes against our #1 guideline of
keeping a clear separation between your markup layer and presentation
layer.</p>

<h3 id="toc_6">KSS</h3>

<p><a href="https://github.com/kneath/kss">https://github.com/kneath/kss</a></p>
</article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
76 guides/markup/index.html
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Markup</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_markup guides_markup_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><div class="alert-box">
This guide has no content.
</div>

<h1 id="toc_0">Markup</h1>
</article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
114 guides/rails/index.html
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Ruby on Rails</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_rails guides_rails_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><div class="alert-box">
This guide needs help with formatting.
</div>
<div class="alert-box">
Table of Contents is not organized and maybe needs to be split into different
files.
</div>

<h1 id="toc_0">Ruby on Rails</h1>

<h2 id="toc_1">Working in the Rails view</h2>

<h3 id="toc_2">Handling state and logic through the stylesheet</h3>

<p>It's best practice to handle as much logic as you can through the
stylesheet. Once you shift perspectives a bit, you'll realize that it's
really easy to do this.</p>

<p>Take the following idea:</p>

<p>bq. If the user is on a login page, they get a different background
color.</p>

<p>Here's the wrong implementation:</p>

<pre>- if user_signed_in? || admin_signed_in?
- else
%body#login
</pre>

<p>First off, use as little conditionals as possible in your views. Second
of all, you can scope all the logic through a state helper.</p>

<pre>%body{:class =&gt; "forest #{stylesheet-user-state} #{stylesheet-current-page}", :id =&gt; ""}
</pre>

<p>Which outputs</p>

<pre>&lt;body class='user new is-logged-out'&gt;
</pre>

<p>Using this technique you keep the logic out of the Markup layer, and
you're able to hook into specific logic points in the Stylesheet layer.</p>
</article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
659 guides/stylesheets/index.html

Large diffs are not rendered by default.

85 guides/tools/index.html
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Tools</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../../stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="../../javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="guides guides_tools guides_tools_index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="../../images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><p></p>
<div class="alert-box">
This guide needs help with formatting.
</div>
<div class="alert-box">
Table of Contents is not organized and maybe needs to be split into different
files.
</div>

<h1 id="toc_0">Inspector</h1>

<p>This post outlines how to use inspector incredibly well:</p>

<p><a href="http://jtaby.com/2012/04/23/modern-web-development-part-1.html">http://jtaby.com/2012/04/23/modern-web-development-part-1.html</a></p>
</article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="../../javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
43 humans.txt
@@ -0,0 +1,43 @@
/* the humans responsible & colophon */
/* humanstxt.org */


/* TEAM */
<your title>: <your name>
Site:
Twitter:
Location:

/* THANKS */
Names (& URL):

/* SITE */
Standards: HTML5, CSS3
Components: Modernizr, jQuery
Software:



-o/-
+oo//-
:ooo+//:
-ooooo///-
/oooooo//:
:ooooooo+//-
-+oooooooo///-
-://////////////+oooooooooo++////////////::
:+ooooooooooooooooooooooooooooooooooooo+:::-
-/+ooooooooooooooooooooooooooooooo+/::////:-
-:+oooooooooooooooooooooooooooo/::///////:-
--/+ooooooooooooooooooooo+::://////:-
-:+ooooooooooooooooo+:://////:--
/ooooooooooooooooo+//////:-
-ooooooooooooooooooo////-
/ooooooooo+oooooooooo//:
:ooooooo+/::/+oooooooo+//-
-oooooo/::///////+oooooo///-
/ooo+::://////:---:/+oooo//:
-o+/::///////:- -:/+o+//-
:-:///////:- -:/://
-////:- --//:
-- -:
BIN +2.66 KB images/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +657 Bytes images/foundation/orbit/bullets.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +3.09 KB images/foundation/orbit/left-arrow-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +522 Bytes images/foundation/orbit/left-arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.55 KB images/foundation/orbit/loading.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +526 Bytes images/foundation/orbit/mask-black.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +288 Bytes images/foundation/orbit/pause-black.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +3.09 KB images/foundation/orbit/right-arrow-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +3.17 KB images/foundation/orbit/right-arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +536 Bytes images/foundation/orbit/rotator-black.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +526 Bytes images/foundation/orbit/timer-black.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +3.73 KB images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +24.7 KB images/middleman.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +1.65 KB images/tout-shadow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 index.html
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --><!--[if gt IE 8]> ><! <![endif]--><html class="no-js" lang="en">
<!-- <![endif] --><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>#betterfrontend: Making Front-End Development Fun again</title>
<meta content="A community effort to standardize Front-End Development" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="stylesheets/application.css?1343775333" media="screen" rel="stylesheet" type="text/css">
<script src="javascripts/top/modernizr.foundation.js?1343775326" type="text/javascript"></script>
</head>
<body class="index">
<header class="page-header" role="banner"><a class="brand" href="/"><img src="images/logo.png?1343775319"></a>
<nav class="page-nav"><ul class="nav-links">
<li class="nav-link-item"><a href="/guides/">Guides</a></li>
<li class="nav-link-item"><a href="/guides/">Debates</a></li>
<li class="nav-link-item"><a href="/about/">About</a></li>
</ul></nav></header><div class="page-content" role="main">
<article class="post"><div class="social-links">
<div class="social-twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out #betterfrontend - Let's make front-end development consistent!" data-via="betterfrontend" data-related="dfischer" data-hashtags="betterfrontend">Tweet</a>
<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>
</div>
<div class="social-github"></div>
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=hybridgroup&amp;repo=betterfrontend&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
</div>
<div class="tout">
<h1 class="tout-title">Front-End Development lacks consistent best-practices.</h1>
<h2 class="tout-subtitle">We need #betterfrontend</h2>
</div>
<div class="read-guide">
<a class="read-guide-link" href="/guides/">Read the Guides</a>
or
<a class="read-more-link" href="/about/">read more about #betterfrontend</a>
</div>
<section class="whatis"><div class="intro">
<h1 class="intro-title">What is #betterfrontend?</h1>
<p>#betterfrontend is a movement to make front-end development easier for everyone. Front-End Development is hard to do properly because there isn't a standardized way of doing it. #betterfrontend aims to be a collaborative contribution through a community of developers to create best-practices for front-end development.</p>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
None
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</section></article>
</div>
<footer class="page-footer" role="contentinfo"><div class="footer-content">
<div class="followus">
<h1 class="followus-title">Don't forget to follow</h1>
<div class="tweet">
<h1 class="tweet-title">
<a href="https://twitter.com/betterfrontend" class="twitter-follow-button" data-show-count="false">Follow @betterfrontend</a>
<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>
</h1>
<p class="tweet-text" id="js-footer-tweet"></p>
</div>
</div>
<div class="events">
<h1 class="events-title">Events</h1>
<strong>No upcoming events.</strong>
<br><br><a href="https://twitter.com/intent/tweet?screen_name=betterfrontend&amp;text=Would%20like%20to%20book%20someone" class="twitter-mention-button" data-lang="en" data-related="dfischer">Book someone @betterfrontend</a>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><h2 class="events-past-title">Past Events</h2>
<article class="event"><div class="event-date">
<div class="event-date-day">12</div>
<div class="event-date-month">Jul</div>
</div>
<div class="event-details">
<h1 class="event-title">LA Ruby</h1>
<h2 class="event-location">Santa Monica, CA</h2>
</div>
<div class="event-date">
<div class="event-date-day">6</div>
<div class="event-date-month">Jun</div>
</div>
<div class="event-details">
<h1 class="event-title">Magmarails</h1>
<h2 class="event-location">Manzanillo, Mexico</h2>
</div>
</article>
</div>
</div>
</footer><a href="https://github.com/hybridgroup/betterfrontend" class="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- JavaScript at the bottom for fast page loading -->
<script src="javascripts/application.js?1343775326" type="text/javascript"></script><!-- end scripts --><!--
Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet
--><script type="text/javascript">
//<![CDATA[
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
8 javascripts/application.js

Large diffs are not rendered by default.

8 javascripts/foundation/jquery.customforms.js
8 javascripts/foundation/jquery.orbit-1.4.0.js
3 javascripts/foundation/jquery.placeholder.min.js
9 javascripts/foundation/jquery.reveal.js
8 javascripts/foundation/jquery.tooltips.js