diff --git a/LANGS.md b/LANGS.md
new file mode 100644
index 0000000..820ff80
--- /dev/null
+++ b/LANGS.md
@@ -0,0 +1,2 @@
+* [English](en/)
+* [Português Brasil](pt-br/)
\ No newline at end of file
diff --git a/404.md b/en/404.md
similarity index 100%
rename from 404.md
rename to en/404.md
diff --git a/en/README.md b/en/README.md
new file mode 100644
index 0000000..cb0ad04
--- /dev/null
+++ b/en/README.md
@@ -0,0 +1,13 @@
+# Build a Node.js Project from Scratch
+
+[](https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch/activity)
+
+Node.js What's all the buzz about? Why are so many people talking about it? How can I get some of this awesome? Follow along in this workshop/tutorial to get your head wrapped around what it takes to make a Node project from scratch.
+
+But it doesn't stop at Node. In the 'full stack JavaScript' world, there is a whole eco system of tools that you need to need to know about. Besides Node, there is Express, npm, Bower, Grunt, Gulp, etc .... This books's goal is not to deep dive into any one specific subject, but to provide the overview learning needed to build a good foundation.
+
+#### Fun deck
+
+I didn't make this deck, but it's an interesting and fun one to go through to talk about the interesting points of Node.js
+
+
diff --git a/SUMMARY.md b/en/SUMMARY.md
similarity index 100%
rename from SUMMARY.md
rename to en/SUMMARY.md
diff --git a/add-some-data.md b/en/add-some-data.md
similarity index 100%
rename from add-some-data.md
rename to en/add-some-data.md
diff --git a/book.json b/en/book.json
similarity index 100%
rename from book.json
rename to en/book.json
diff --git a/bower-grunt-sass.md b/en/bower-grunt-sass.md
similarity index 100%
rename from bower-grunt-sass.md
rename to en/bower-grunt-sass.md
diff --git a/bower.md b/en/bower.md
similarity index 100%
rename from bower.md
rename to en/bower.md
diff --git a/cover.jpg b/en/cover.jpg
similarity index 100%
rename from cover.jpg
rename to en/cover.jpg
diff --git a/demo/README.md b/en/demo/README.md
similarity index 100%
rename from demo/README.md
rename to en/demo/README.md
diff --git a/demo/bower.md b/en/demo/bower.md
similarity index 100%
rename from demo/bower.md
rename to en/demo/bower.md
diff --git a/demo/buttons.md b/en/demo/buttons.md
similarity index 100%
rename from demo/buttons.md
rename to en/demo/buttons.md
diff --git a/demo/config.md b/en/demo/config.md
similarity index 100%
rename from demo/config.md
rename to en/demo/config.md
diff --git a/demo/forms.md b/en/demo/forms.md
similarity index 100%
rename from demo/forms.md
rename to en/demo/forms.md
diff --git a/demo/global-sass.md b/en/demo/global-sass.md
similarity index 100%
rename from demo/global-sass.md
rename to en/demo/global-sass.md
diff --git a/demo/jquery.md b/en/demo/jquery.md
similarity index 100%
rename from demo/jquery.md
rename to en/demo/jquery.md
diff --git a/demo/layout.md b/en/demo/layout.md
similarity index 100%
rename from demo/layout.md
rename to en/demo/layout.md
diff --git a/demo/module.md b/en/demo/module.md
similarity index 100%
rename from demo/module.md
rename to en/demo/module.md
diff --git a/demo/reset.md b/en/demo/reset.md
similarity index 100%
rename from demo/reset.md
rename to en/demo/reset.md
diff --git a/demo/set-up.md b/en/demo/set-up.md
similarity index 100%
rename from demo/set-up.md
rename to en/demo/set-up.md
diff --git a/demo/typo.md b/en/demo/typo.md
similarity index 100%
rename from demo/typo.md
rename to en/demo/typo.md
diff --git a/demo/vc.md b/en/demo/vc.md
similarity index 100%
rename from demo/vc.md
rename to en/demo/vc.md
diff --git a/demo/view.md b/en/demo/view.md
similarity index 100%
rename from demo/view.md
rename to en/demo/view.md
diff --git a/deploy-app.md b/en/deploy-app.md
similarity index 100%
rename from deploy-app.md
rename to en/deploy-app.md
diff --git a/express.md b/en/express.md
similarity index 100%
rename from express.md
rename to en/express.md
diff --git a/grunt-watch.md b/en/grunt-watch.md
similarity index 100%
rename from grunt-watch.md
rename to en/grunt-watch.md
diff --git a/grunt.md b/en/grunt.md
similarity index 100%
rename from grunt.md
rename to en/grunt.md
diff --git a/gulp.md b/en/gulp.md
similarity index 100%
rename from gulp.md
rename to en/gulp.md
diff --git a/heroku.md b/en/heroku.md
similarity index 100%
rename from heroku.md
rename to en/heroku.md
diff --git a/new-app.md b/en/new-app.md
similarity index 98%
rename from new-app.md
rename to en/new-app.md
index f1fa3b9..f4276fa 100644
--- a/new-app.md
+++ b/en/new-app.md
@@ -1,4 +1,4 @@
-# Crate a new Express app
+# Create a new Express app
At this point, you should be able to go forth and create an app. In this example, we will create a Node.js app with Express framework.
diff --git a/node-npm.md b/en/node-npm.md
similarity index 100%
rename from node-npm.md
rename to en/node-npm.md
diff --git a/routes.md b/en/routes.md
similarity index 100%
rename from routes.md
rename to en/routes.md
diff --git a/sass.md b/en/sass.md
similarity index 100%
rename from sass.md
rename to en/sass.md
diff --git a/pt-br/404.md b/pt-br/404.md
new file mode 100644
index 0000000..8944082
--- /dev/null
+++ b/pt-br/404.md
@@ -0,0 +1,25 @@
+# Erro 404?
+
+Erros já são endereços no Express. No arquivo `app.js` há o seguinte:
+
+```javascript
+/// catch 404 and forwarding to error handler
+app.use(function(req, res, next) {
+ var err = new Error('Not Found');
+ err.status = 404;
+ next(err);
+});
+```
+
+No diretório `views/` tem o arquivo `errors.jade`.
+
+```jade
+extends layout
+
+block content
+ h1= message
+ h2= error.status
+ pre #{error.stack}
+```
+
+Simples. Se você quer customizar a página 404, edite essa *view*.
diff --git a/pt-br/README.md b/pt-br/README.md
new file mode 100644
index 0000000..d6e1d3e
--- /dev/null
+++ b/pt-br/README.md
@@ -0,0 +1,12 @@
+# Criando um projeto Node.js do zero
+
+[](https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch/activity)
+
+Node.js do que se trata todo esse zumbido? Por que tantas pessoas estão falando sobre isso? Como eu posso conhecer um pouco dessa incrível plataforma? Acompanhando este workshop/tutorial onde vamos estar envolvidos em torno do que é preciso para fazer um projeto Node do zero.
+
+Mas isso não para em Node. No mundo *'ful stack JavaScript'*, existe um eco sistema completo de ferramentas que você precisa conhecer. Além de Node, há o Express, npm, Bower, Grump, Gulp, etc .... Este livro não tem como objetivo mergulhar profundamente em um assunto especifico, mas proporcionar uma visão geral que você precisa aprender para criar uma boa base.
+
+#### Apresentação divertida
+Eu não criei essa [apresentação](https://speakerdeck.com/nctunba/node), mas é uma interessante e divertira forma de falar sobre os pontos importante do Node.js.
+
+
diff --git a/pt-br/SUMMARY.md b/pt-br/SUMMARY.md
new file mode 100644
index 0000000..7c10f9e
--- /dev/null
+++ b/pt-br/SUMMARY.md
@@ -0,0 +1,29 @@
+# Sumário
+
+* [Node e npm](node-npm.md)
+* [Express](express.md)
+ * [Criando um novo app](new-app.md)
+ * [Rotas](routes.md)
+ * [Erro 404](404.md)
+* [Grunt](grunt.md)
+* [Gulp](gulp.md)
+* [Sass](sass.md)
+* [Grunt watch](grunt-watch.md)
+* [Bower](bower.md)
+ * [Bower + Grunt + Sass](bower-grunt-sass.md)
+* [Adicionando dados](add-some-data.md)
+* [Heroku](heroku.md)
+ * [Deploy do código](deploy-app.md)
+* [Criando um formulário demo](demo/README.md)
+ * [A configuração](demo/set-up.md)
+ * [Controle de versão](demo/vc.md)
+ * [O layout](demo/layout.md)
+ * [A view](demo/view.md)
+ * [Configuração UI](demo/config.md)
+ * [Um reset](demo/reset.md)
+ * [Layout global Sass](demo/global-sass.md)
+ * [O módulo](demo/module.md)
+ * [Tipografia](demo/typo.md)
+ * [Formulários](demo/forms.md)
+ * [Botões](demo/buttons.md)
+ * [jQuery](demo/jquery.md)
diff --git a/pt-br/add-some-data.md b/pt-br/add-some-data.md
new file mode 100644
index 0000000..53604a5
--- /dev/null
+++ b/pt-br/add-some-data.md
@@ -0,0 +1,17 @@
+# Adicionado alguns dados
+
+Um bom [demo](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) que adicionada uma próxima camada desse workshop. Adicionado o Mongo DB no projeto dá para fazer um simples UX I/O.
+
+> Minha coisa favorita sobre MongoDB é que ele usa JSON em sua estrutura, o que significa que ele é familiar para mim. Se você não está familiarizado com JSON, você vai precisar de algumas leituras, isso está fora do escopo desse e-book.
+
+> Vamos adicionar um registro em nossa coleção, Para o proposito desse tutorial apenas vamos ter um simples banco de dados com o nome de usuário e endereços de e-mail. Nossos dados estão no seguinte formato:
+
+```javascript
+{
+ "_id" : 1234,
+ "username" : "cwbuecheler",
+ "email" : "cwbuecheler@nospam.com"
+}
+```
+
+Alguém está disposto a ajudar e colocar outros dados. Eu adoraria um Pull Request.
diff --git a/pt-br/book.json b/pt-br/book.json
new file mode 100644
index 0000000..2c0abe6
--- /dev/null
+++ b/pt-br/book.json
@@ -0,0 +1,11 @@
+{
+ "name": "Build a Node.js Project from Scratch",
+ "version": "0.1.2",
+ "description": "Build a Node.js project from scratch, learn how to install the Express framework, learn about Yeomen Generators, create Grunt Tasks and build and install your own Bower Packages.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/anotheruiguy/node-workshop"
+ },
+ "author": "Dale Sande ",
+ "license": "MIT",
+}
diff --git a/pt-br/bower-grunt-sass.md b/pt-br/bower-grunt-sass.md
new file mode 100644
index 0000000..10f946d
--- /dev/null
+++ b/pt-br/bower-grunt-sass.md
@@ -0,0 +1,81 @@
+# Bower - Grunt - Sass
+
+Agora que nos conhecemos o poder do Bower para gerenciar as dependências de desenvolvimento do nosso front-end, o que nós precisamos fazer para adicionar um pacote Bower de código Sass em nosso projeto?
+
+## Bower install
+
+Em primeiro lugar, vamos instalar um pacote simples no Bower para demostrar:
+
+```
+$ bower install css-calc-mixin --save
+```
+
+Aqui, nos agora temos uma biblioteca de código em nosso projeto.
+
+## Atualizando Gruntfile.js
+
+Em seguida, vamos atualizar o `Gruntfile.js` para que possamos facilmente incluir a bibliotecas em nossos arquivos Sass. Sem esse passo, seria preciso escrever preenchendo o caminho completo em nossos arquivo Sass.
+
+Na API Grunt-Sass temos várias opções, e uma que precisamos usar é `includePaths`. Aqui podemos passar uma string que é cominho completo desde a raiz até o pacote Bower em um array.
+
+```javascript
+module.exports = function(grunt) {
+ grunt.initConfig({
+ sass: {
+ dist: {
+ files: {
+ 'public/stylesheets/style.css': 'sass/style.scss'
+ }
+ },
+ options: {
+ includePaths: [
+ './bower_components/css-calc-mixin'
+ ]
+ }
+ },
+ watch: {
+ source: {
+ files: ['sass/**/*.scss', 'views/**/*.jade'],
+ tasks: ['sass'],
+ options: {
+ livereload: true, // needed to run LiveReload
+ }
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-sass');
+ grunt.registerTask('default', ['sass']);
+};
+```
+
+## Atualizando o arquivo style.scss
+
+Para fazer uso da nova biblioteca do pacote Bower, nós precisamos usar uma convenção Sass para importar o código.
+
+```sass
+@import "css-calc-mixin";
+```
+
+Para testar se isso está funcionando, vamos adicionar uma pouco de código que faz referência ao uma biblioteca Bower.
+
+```sass
+.block {
+ @include calc(width, 220px);
+}
+
+.block {
+ @include calc(margin, 220px, 0);
+}
+
+.block {
+ @include calc(width, 220px, true, 0);
+}
+
+.block {
+ @include calc(width, 220px, true, 0, 50%, '+');
+}
+```
+
+Volte ao CLI, execute `grunt` devemos ver luzes verdes todo o dia!
diff --git a/pt-br/bower.md b/pt-br/bower.md
new file mode 100644
index 0000000..a633fe6
--- /dev/null
+++ b/pt-br/bower.md
@@ -0,0 +1,185 @@
+# Bower e todas as coisas
+
+A menos que você vive em um buraco, você está ciente da revolução JavaSrcipt que está ao nosso redor. Muito desses incríveis conceitos eu descobri no ecossistema do Rails e agora estão em explosão no espaço JavaScript, permitindo distribuições impressionantes. Os três pilares são: Yeoman, Bower and Grunt.
+
+O problema que precisamos resolver é: qual a melhor maneira de obter códigos de bibliotecas no GitHub e torna-lo acessível para usuários sem ter que clonar um projeto? Porque, isso é muito ruim, certo?
+
+## Yeoman generators
+Inicialmente eu venho sobre [generator-sass-boilerplate](https://github.com/srsgores/generator-sass-boilerplate), o 'Yeoman generators e um scaffolding de etilos Sass'. Isso é uma abordagem muito interessante para criar bibliotecas complexas e permitir a usuário customizar a instalação. Mas para uma simples biblioteca de código, pode ser apenas mais uma função ou mixins, e isso é um *overhead*.
+
+## Bower é a resposta
+
+Avançando agora. E recentemente me deparei com novas mensagens que quebrar e é o que o Bower faz de melhor. E essa é a resposta"
+
+Para aqueles que não conhecem, o Bower é uma solução extremante simples para gerenciamento de pacotes front end.
+
+> Ele fornece uma solução genérica para o problema de gerenciamento de pacotes front-end, enquanto expões o modelo de dependência através de uma API que podem ser consumida através de muitas opções de build.
+
+A beleza do Bower e mantido dentro de sua simplicidade. Bower tem um registro, mas não e 100% necessário. O comando comum é `bower install ` onde `` pode ser referir a um [grande número de opções](http://bower.io/#using-a-different-name-and-a-specific-version-of-a-package), tornando assim uma poeira simples para compartilhar código. LEGAL.
+
+Cumprindo com o tema `poeira simples`, você pode usar Bower para puxar um repositório dentro de seu projeto sem fazer um clone dele. Mesmo se ele não tem um arquivo `bower.json`.
+
+Por exemplo Stipe, uma biblioteca Compass Extension que eu escrevi, é não e um cliente Bower.
+
+```
+$ bower install git://github.com/Toadstool-Stipe/stipe.git
+```
+
+Execute esse comando em qualquer pasta e você vai puxar todo o repositório sem o histórico do GitHub. Isso por si só é interessante.
+
+## Iniciando com o Bower
+
+Para começar, é realmente simples. Assumindo que Node e npm estão instalados, execute:
+
+```
+$ npm install -g bower
+```
+
+### Instalando pacotes Bower
+
+Eu não vou entrar em detalhes complexos aqui, mas 99% do tempo você simplesmente vai executar:
+
+```
+$ bower install
+```
+
+Como dito acima, há alternativas de instalação, mas solução principal é ter um arquivo `bower.json` em seu repositório e registra ele sem seu Bower.
+
+Se você tem um arquivo `bower.json` em seu projeto, explicado na próxima seção, você pode adicionar a *flag* `--save` com a instalação e isso vai adicionar o biblioteca com a dependência em seu projeto.
+
+Quando você distribuir o projeto, um usuário que clona somente tem que executar `$ bower install` e isso vai puxar todas os recursos extenso.
+
+## Commitar ou não commitar?
+
+Nesse novo sistema de criação e distribuição de recursos levantamos uma interessante questão, você liberar os seu pacotes gerenciados pelo Bower ou não? No mundo Ruby, Gens na verdade não são parte do projeto, mas dependências do projeto nunca são liberados para o sistema de controle de versão. Isso é novo no mundo JavaScripot, dependência de pacotes Node e Bower são referenciadas através de um manifesto, muito parecido com GemFile no Ruby, mas são, instalar na verdade, dentro do diretório raiz do projeto.
+
+Há [toda uma discussão](http://addyosmani.com/blog/checking-in-front-end-dependencies/) desse tópico. Eu vejo dessa maneira, quando você instala uma biblioteca Bower, você está partindo com uma depenica ou você está fazendo modificações?
+
+A escolha é sua, os argumentos são fortes para ambos os lados. Em uma situação em que você está realmente em uma fork de código insolando, então a resposta é muito clara, isso deve ser liberado com o projeto ou você precisar fazer um fork da dependência.
+
+## Gerando um novo pacote Bower
+
+Criando um novo pacote Bower é novamente, muito simples
+
+```
+$ bower init
+```
+
+O CLI, vai solicitar uma série de perguntas, a respostas de que deve ser gravada dentro do arquivo `bower.json` que vai ser criado. Coloque o que você quer, mas tudo o que você realmente precisa é:
+
+```
+{
+ "name": "your-project",
+ "version": "0.1.0"
+}
+```
+
+E o que isso e de fato. Você acabou de criar sua primeira biblioteca de recursos. Agora vamos fazer o build! O Build dos seu recursos, documentação , etc ... Seu pacote vai estar pronto em pouco tempo.
+
+Para testar é fácil, lembra do truque `$ bower install git://github.com/ ...`? Execute isso em um novo repositório e veja como ele se instala.
+
+Seja cuidado nessa etapa e com o que os pacotes contem. Em minha opinião, eu vejo o Bower como uma boa maneira de para distribuir pequenas e especificas bibliotecas de código. Quando eu puxo o seu pacote Bower, eu de fato quero toda a documentação, teste, demonstração, recostos, etc ... Com um exemplo, eu vou pegar o Bourbon aqui, execute:
+
+```
+$ bower install bourbon
+```
+
+Executando o instalador, você vai ter todo o repositório. Eu não quero todo o repositório, tudo o que eu quero de fato está no diretório `dist/`. Para resolver isso, outro desenvolver fez um fork do Bourbon e criou um repositório chamado [bower-bourbon](https://github.com/hmps/bourbon):
+
+```
+$ bower install bower-bourbon
+```
+
+Executando essa instalação você na realidade somente vai pegar o que está no diretório `dist/`. Mas são esse forks confiáveis. Ohhh open Soure, você e um selvagem.
+
+**ATUALIZAÇÃO** Isso tem tido minha atenção que a utilização do Bower para instalar o Bourbon beta 3.2 parece não ser totalmente funcional. Nesse seção não vamos dizer "bad Bourbon", mas para demonstrar que em alguns casos, no uso do Bower, vai ter muitas outras bibliotecas.
+
+## Registros no Bower
+
+Quando tudo estiver pronto para liberação [registrando com o Bower](http://bower.io/#registering-packages). Esse critério é bastante simples:
+
+
+1. Certifique-se que seu repositório tem o arquivo `bower.json`.
+2. Você deve usar [visionamento semântico](http://semver.org/)
+3. Seu pacote tem que estar disponível em um Git *endpoint*, ex: GitHub
+
+Depois disso tudo, execute o comando com seu novo pacote no *endpoint* Git:
+
+```
+$ bower register
+```
+
+Registrar é fácil. Depois de conseguir a linha verde em tudo, para testar execute`$ bower install `.
+
+## Bower e Sass
+
+As bibliotecas Bower e Sass são incríveis juntas. Há pequenos repositórios no Github. Onde no Ruby Gem/Compass Extension é complexo e com muito *overhead*. Você precisar fazer um fork, clone ou deus me livre, copiar e colar código no seu projeto. O que? Nos não somos civilizados?
+
+No mundo Ruby, desenvolvedores estão acostumados a ter Gems e Compass Extensions instaladas em locais seguros, localização não conhecida. Uma nova Gem esta adicionado no GemFile e simplesmente referência a biblioteca no projeto.
+
+##### Localização não conhecida e frustrante para muitos desenvolvedores. Bibliotecas Sass importantes que eles não têm controle sobre ela, ou são incapaz de modificá-las.
+
+No novo mundo JavaScript, as bibliotecas estão incluídas no arquivo de manifesto `bower.json` ou simplesmente instaladas, mas em vez de ser um local desconhecido, está localizada do diretório raiz do projeto. Isso mantes as coisas simples na perspectiva de instalação , mas significa que nosso importação Sass está em diretórios relativos. Não é grande coisas, mas diferente do que estamos acostumados.
+
+
+
+Então, como o pacote Bower se parece? Vamos ver um simples que eu criei chamando [sass-icon-fonts](https://github.com/anotheruiguy/sass-icon-fonts). Esse pacote é um simples par de *mixins*, que permite a revolvedores criar um `@font-face` e definir regras de anotações, outra capacidade de gerar uma série de regras para ícones e fontes. Esse mini biblioteca tem instruções e um API muito simples.
+
+Agora, vamos imaginar que você estar criando um projeto Node e quer usar esse pacote com recurso, execute:
+
+```
+$ bower install sass-icon-fonts --save
+```
+
+Instale o pacote e adicione a dependência em seu arquivo `bower.json`. Localize no diretório raiz do seu projeto o diretório `sass/`, dentro dele tem o arquivo `application.scss`, na raiz tem diretório `bower_components`. No seu arquivo `application.scss` para acessar a nova biblioteca, nós vamos precisar importar o caminho da biblioteca, como mostrado a seguir:
+
+```
+@import "../bower_components/sass-icon-fonts/_ico-font.scss";
+```
+
+Embora o exemplo anterior funcione, eu achei isso aceitável, eu não acho incrível. Procurar mais na API Grint-Sass eu descobri a função [includePaths](https://github.com/sindresorhus/grunt-sass#includepaths). Ela permite a você definir um caminho de importação.
+
+```
+options: {
+ includePaths: [
+ './bower_components/bower-bourbon'
+ ]
+}
+```
+
+Agora que temos isso em nosso arquivo Grunt, vamos poder referenciar as bibliotecas no arquivo de manifesto principal simplesmente importando o Sass, assim:
+
+```
+@import "bourbon";
+```
+
+## Bower em seu npm
+
+Uma das coisas que eu acho irritante sobre o uso do Bower é que eu tenho que executar comandos esperados quando inicio um novo projeto. Eu já tenho usado o npm não posso simplesmente ligar essas coisas junto?
+
+Sim, você pode. Em seu projeto no arquivo `package.json`, extensa o objeto `scripts` e passe o comando `bower install`. Isso é por isso que eu realmente AMO estas coisas!
+
+```
+"scripts": {
+ "install": "bower install"
+}
+```
+
+Agora quando você executar `npm install` isso não vai somente instalar os pacotes Node, mas também instalar o pacotes Bower . LEGAL.
+
+## Bower por traz dofirewall
+
+
+
+Se você está atrás de um firewall que não permite acessar o protocolo `git://[repo]`, existe uma solução para isso. Primeiro eu recomento faze o clone usando o protocolo `https://[repo]`, certifique-se que esse é realmente o problema. Se o protocolo `https://[repo]` funciona, então você pode querer fazer a seguinte atualização:
+
+```
+git config --global url."https://"
+```
+
+Obrigado [Stack Overflow](http://stackoverflow.com/questions/15669091/bower-install-using-only-https)!
+
+## Sumário
+
+Quando digo eu quero o Bower para todas as coisas, eu quero dizer exatamente isso. Agora entender o Bower, eu estou olhando para um simples gerenciado de pacotes, em todo novo exemplo que você fazer eu espero que você possa usá-lo.
+Não faça mais fork, clone ou excluir diretório `.git/` apenas inclua a biblioteca no seu projeto, Eu estou olhando e criar módulos Sass em todos o novo exemplo que eu tenho feito. Não que Compass extensions sejam difícil, mas o Bower liberta de várias dependências, Algumas que tem uma real questão em muitos projetos.
diff --git a/pt-br/cover.jpg b/pt-br/cover.jpg
new file mode 100644
index 0000000..b8e5a7a
Binary files /dev/null and b/pt-br/cover.jpg differ
diff --git a/pt-br/demo/README.md b/pt-br/demo/README.md
new file mode 100644
index 0000000..03245d1
--- /dev/null
+++ b/pt-br/demo/README.md
@@ -0,0 +1,8 @@
+# Criando um formulário de mensagens:
+
+### Passo a passo
+
+O seguinte demo é um popular padrão UI/UX de com entrada de dados no formulário.
+
+
+
diff --git a/pt-br/demo/bower.md b/pt-br/demo/bower.md
new file mode 100644
index 0000000..cb15430
--- /dev/null
+++ b/pt-br/demo/bower.md
@@ -0,0 +1,11 @@
+# Install all the things
+
+Add new dependencies to the Sass manifest
+
+```
+@impot "bourbon";
+@import "type-rhythm-scale";
+@import "rwd-toolkit";
+```
+
+Adding these to the `application.scss` is how Sass is made aware of these dependencies.
diff --git a/pt-br/demo/buttons.md b/pt-br/demo/buttons.md
new file mode 100644
index 0000000..a8b47a4
--- /dev/null
+++ b/pt-br/demo/buttons.md
@@ -0,0 +1,26 @@
+# Botões
+
+Adicione o seguinte arquivo:
+
+```
+$ touch _buttons.scss
+```
+
+Adicione em `application.scss` a importação:
+
+```
+@import "buttons";
+```
+
+Abra o arquivo e adicione o seguinte código:
+
+```
+button {
+ @extend %default-inputs;
+ -webkit-appearance: none;
+ background: orange;
+ color: white;
+ border-radius: em(3);
+ padding: 1em;
+}
+```
diff --git a/pt-br/demo/config.md b/pt-br/demo/config.md
new file mode 100644
index 0000000..946df7d
--- /dev/null
+++ b/pt-br/demo/config.md
@@ -0,0 +1,110 @@
+# Crie o arquivo de configuração da UI
+
+Crie o seguinte arquivo:
+
+```
+$ touch _config.scss
+```
+
+Adicione o código a seguir:
+
+```
+/////// Typography configuration
+// *----------------------------------------
+$font-size: 16;
+
+$heading-1: 36;
+$heading-2: 32;
+$heading-3: 28;
+$heading-4: 18;
+$heading-5: 18;
+$heading-6: 18;
+
+$line: $font-size * 1.5;
+$small-point-size: 10;
+$large-point-size: 14;
+
+$primary-font-family: #{"Helvetica Neue", Arial, sans-serif};
+$secondary-font-family: #{"Helvetica Neue", Arial, sans-serif};
+$heading-font-family: #{"Helvetica Neue", Arial, sans-serif};
+
+
+/////// Default webfont directory
+// *----------------------------------------
+$fontDir: "fonts/";
+
+/////// Default image directory
+// *----------------------------------------
+$imgDir: "images/";
+
+/////// OOCSS generic base colors
+// *----------------------------------------
+$alpha-primary: #5a2e2e; // red
+$bravo-primary: #3e4147; // green
+$charlie-primary: #fffedf; // yellow
+$delta-primary: #2a2c31; // blue
+$echo-primary: #dfba69; // accent
+
+$alpha-gray: #333; //black
+
+/////// Color math
+// *----------------------------------------
+@import "color-scale";
+
+
+/////// Semantic variables
+// *----------------------------------------
+// abstract 'white' value to easily applied to semantic class objects
+$white: #fff;
+
+// primary header font color
+$primary-header-color: $alpha-gray;
+
+// default heading font weight
+$heading-font-weight: normal;
+
+// primary font color for the app
+$primary-text: $alpha-gray;
+
+// default `href` link color
+$href-color: $delta-color;
+
+// default shadow colors
+$shadow-color: fade-out($alpha-color, 0.5);
+
+// default border color
+$border-color: $alpha-color;
+
+
+
+/////// HTML 5 feature colors
+// *----------------------------------------
+// used with the `ins` tag
+// http://www.w3schools.com/tags/tag_ins.asp
+$ins-color: $charlie-color;
+
+// used with the `mark` tag
+// http://www.w3schools.com/html5/tag-mark.asp
+$mark-color: $charlie-color;
+
+// webkit tap highlight color
+$webkit-tap-hightlight: $delta-color;
+
+// overrides the default content selection color in the browser
+$selection-color: $charlie-color;
+$selection-text-color: $primary-text;
+
+
+
+//////// Default animation properties
+// *----------------------------------------
+$trans: .333s ease;
+```
+
+Adicione o seguint trecho no arquivo `application.scss`:
+
+```
+/////// App Config - this is where most of your magic will happen
+// *----------------------------------------
+@import "config";
+```
diff --git a/pt-br/demo/forms.md b/pt-br/demo/forms.md
new file mode 100644
index 0000000..09c278a
--- /dev/null
+++ b/pt-br/demo/forms.md
@@ -0,0 +1,108 @@
+# Formulário
+
+Cire um novo arquivo Sass
+
+```
+$ touch _forms.scss
+```
+
+Cire um novo diretório forms
+
+```
+$ mkdir forms
+$ midir forms/extends
+```
+
+Adicione os seguintes arquivos:
+
+```
+$ touch forms/_manifest.scss
+$ touch forms/extends/_default-inputs.scss
+$ touch forms/extends/_display-block.scss
+$ touch forms/extends/_manifest.scss
+```
+
+Adicione o seguinte no `forms/extends/_manifest.scss`:
+
+```
+@import "default-inputs";
+@import "display-block";
+```
+
+Adicione o seguinte no `forms/extends/_default-inputs.scss`:
+
+```
+%default-inputs {
+ width: 100%;
+ height: 100%;
+ padding: 2.25em 1em 1em;
+ outline: none;
+ font-size: 1em;
+}
+```
+
+Adicione o seguinte no `forms/extends/_display-block.scss`:
+
+```
+%display-block {
+ width: 100%;
+ display: block;
+}
+```
+
+Adicione o seguinte no `forms/_manifest.scss`:
+
+```
+@import "extends/manifest";
+```
+
+Adicione o seguinte no `_forms.scss`:
+
+```
+@import "forms/manifest";
+
+.form {
+ ul {
+ border-bottom: 1px solid $hotel-gray;
+ background-color: $white;
+ margin-bottom: 1em;
+ }
+ li {
+ border: 1px solid $hotel-gray;
+ border-bottom: 0;
+ position: relative;
+ }
+}
+
+label {
+ @extend %display-block;
+ position: absolute;
+ font-size: em(16);
+ top: .5em;
+ left: 1em;
+ color: orange;
+ opacity: 1;
+ transition: #{$trans} top, #{$trans} opacity;
+ .js-hide-label & {
+ opacity: 0;
+ top: 1.5em;
+ }
+}
+
+input[type="text"] {
+ @extend %display-block;
+ @extend %default-inputs;
+}
+
+input[type="email"] {
+ @extend %display-block;
+ @extend %default-inputs;
+}
+
+textarea {
+ @extend %display-block;
+ @extend %default-inputs;
+ height: 8em;
+ resize: none;
+}
+```
diff --git a/pt-br/demo/global-sass.md b/pt-br/demo/global-sass.md
new file mode 100644
index 0000000..582f225
--- /dev/null
+++ b/pt-br/demo/global-sass.md
@@ -0,0 +1,22 @@
+# Começe com um layout global
+
+```
+$ mkdir layouts
+$ touch layouts/_global.scss
+$ touch layouts/_manifest
+```
+
+## Adicione o seguinte no _global.scss
+
+```
+body {
+ background-color: $delta-scale-juliet;
+}
+```
+
+## Inclua a referência no application.scss
+
+```
+/////// Layouts
+@import "layouts/manifest";
+```
diff --git a/pt-br/demo/jquery.md b/pt-br/demo/jquery.md
new file mode 100644
index 0000000..966089a
--- /dev/null
+++ b/pt-br/demo/jquery.md
@@ -0,0 +1,45 @@
+# Adicionando um pouco de magia com o jQuery
+
+Abra o arquivo `layout.jade` e adicione no rodapé do documento:
+
+```
+script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js')
+script(src="/javascripts/app.js")
+```
+
+Crie o seguinte arquivo:
+
+```
+$ touch public/javascripts/app.js
+```
+
+Abra o arquivo`app.js` e adicione o seguinte:
+
+```
+// Test for placeholder support
+$.support.placeholder = (function(){
+ var i = document.createElement('input');
+ return 'placeholder' in i;
+})();
+
+// Hide labels by default if placeholders are supported
+if($.support.placeholder) {
+ $('.form li').each(function(){
+ $(this).addClass('js-hide-label');
+ });
+}
+
+$('.form li').find('input, textarea').on('keyup blur focus', function(){
+
+ // Cache our selectors
+ var el = $(this),
+ parent = el.parent();
+
+ // Add or remove classes
+ if( el.val() === '' ) {
+ parent.addClass('js-hide-label');
+ } else {
+ parent.removeClass('js-hide-label');
+ }
+});
+```
diff --git a/pt-br/demo/layout.md b/pt-br/demo/layout.md
new file mode 100644
index 0000000..ee064e4
--- /dev/null
+++ b/pt-br/demo/layout.md
@@ -0,0 +1,16 @@
+# Atualizando o layout
+
+Atualize o arquivo `layout.jade` para usar o `application.css`
+
+```
+link(rel='stylesheet', href='/stylesheets/application.css')
+```
+
+## Adicionando o LiveReload
+
+```
+script(src="//localhost:35729/livereload.js")
+```
+
+Atualize o browser e em seguida, faça pequenas modificações nos arquivos Sass e Jade para certificar-se que o Livereload está funcionando.
+
diff --git a/pt-br/demo/module.md b/pt-br/demo/module.md
new file mode 100644
index 0000000..1115d4d
--- /dev/null
+++ b/pt-br/demo/module.md
@@ -0,0 +1,71 @@
+# Criando um módulo
+
+No diretório Sass, vamos criar um diretório de módulos com os seguintes arquivos:
+
+```
+$ mkdir modules
+$ mkdir modules/message-container
+$ touch modules/message-container/_module-message-container.scss
+$ touch modules/message-container/_manifest.scss
+
+```
+
+Adicione o seguinte no arquivo `_module-message-container.scss`:
+
+```
+.message-container {
+ margin: 1em auto;
+ width: 90%;
+ padding-bottom: 100px;
+ @media #{$tablet} {
+ width: 75%;
+ }
+ @media #{$desktop} {
+ width: 50%;
+ }
+}
+```
+
+## Adicione em _manifest.scss
+
+```
+@import "module-message-container";
+```
+
+## Adicione em application.scss
+
+```
+/////// Modules
+@import "modules/message-container/manifest";
+```
+
+## Manifesto do módulo central
+
+No arquivo `application.scss` poderíamos entrar em cada módulo um por um como descrito acima, mas poderíamos também adicionar o manifesto no diretório raiz dos módulos que ira importar outros manifestos.
+
+Então no arquivo `application.scss` vamos fazer o seguinte:
+
+```
+/////// Modules
+@import "modules/manifest";
+```
+
+Então no `modules/manifest.scss` vamos fazer isso:
+
+```
+/////// Sub-Modules
+@import "message-container/manifest";
+```
+
+Isso ajuda a manter as coisas mais fáceis para gerenciar, já que nunca é necessário atualizar o arquivo `application.scss` e na raiz do diretório de módulos, onde vamos trabalhar, apenas precisamos adicionar uma nova lista lá. Tudo é importado e tudo funciona.
+
+Nossa estrutura de pastas seria parecida com seguinte:
+
+```
+|- application.scss
+|--- modules/
+|----- _manifest.scss
+|----- message-container/
+|------- _manifest.scss
+|------- _module-message-container.scss
+```
diff --git a/pt-br/demo/reset.md b/pt-br/demo/reset.md
new file mode 100644
index 0000000..57335f3
--- /dev/null
+++ b/pt-br/demo/reset.md
@@ -0,0 +1,194 @@
+# Incluindo o Reset
+
+Crie o seguinte arquivo:
+
+```
+$ touch _reset.scss
+```
+
+Adicione referência a ale no `application.scss`
+
+```
+/////// Standard CSS reset stuff here
+// *-------------------------------------------------
+@import "reset";
+```
+
+Inclua o seguinte código:
+
+```
+// * Let's default this puppy out
+// *-------------------------------------------------
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+* {
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ font-size: 100%;
+ -webkit-font-smoothing: antialiased;
+}
+
+article, aside, figure, footer, header, hgroup, nav, section {
+ display: block;
+}
+
+// * Responsive images and other embedded objects
+// * Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
+// * There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue.
+
+img, object, embed {
+ max-width: 100%;
+}
+
+img {
+ border-style: none;
+ border-color: transparent;
+ border-width: 0;
+}
+
+// * we use a lot of ULs that aren't bulleted.
+// * don't forget to restore the bullets within content.
+
+ol,ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+
+ &:before, &:after {
+ content: '';
+ content: none;
+ }
+}
+
+a {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+ &:focus {
+ text-decoration: underline ;
+ outline: none;
+ }
+}
+
+del {
+ text-decoration: line-through;
+}
+
+
+pre {
+ //white-space: pre
+ // * CSS2
+ white-space: pre-wrap;
+ // * CSS 2.1
+ //white-space: pre-line
+ // * CSS 3 (and 2.1 as well, actually)
+ word-wrap: break-word;
+ // * IE
+}
+
+input {
+ &[type="radio"] {
+ vertical-align: text-bottom;
+ }
+}
+
+input, textarea, select, button {
+ font-family: inherit;
+ font-weight: inherit;
+ background-color: #fff;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+table {
+ font-size: inherit;
+}
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+// * standardize any monospaced elements
+
+pre, code, kbd, samp {
+ font-family: monospace, sans-serif;
+}
+
+input {
+ &[type=button], &[type=submit] {
+ @extend %stipe-cursor-pointer;
+ }
+}
+
+button {
+ cursor: pointer;
+ margin: 0;
+ width: auto;
+ overflow: visible;
+}
+
+a.button {
+ display: inline-block;
+}
+
+// * scale images in IE7 more attractively
+
+.ie7 img {
+ -ms-interpolation-mode: bicubic;
+}
+
+// * Ok, this is where the fun starts.
+// *-------------------------------------------------
+
+a:link {
+ -webkit-tap-highlight-color: $webkit-tap-hightlight;
+}
+
+ins {
+ background-color: $ins-color;
+ color: black;
+ text-decoration: none;
+}
+
+mark {
+ background-color: $mark-color;
+ color: $primary-text;
+ font-style: italic;
+ font-weight: bold;
+}
+
+::selection {
+ background: $selection-color;
+ color: $selection-text-color;
+}
+
+::-moz-selection {
+ background: $selection-color;
+ color: $selection-text-color;
+}
+```
diff --git a/pt-br/demo/set-up.md b/pt-br/demo/set-up.md
new file mode 100644
index 0000000..13913c6
--- /dev/null
+++ b/pt-br/demo/set-up.md
@@ -0,0 +1,119 @@
+# Getting libsass set up
+
+
+
+Install libsass with Grunt Sass and add Bourbon. Node-Sass is installed as a dependency of Grunt-Sass
+
+```
+$ npm install grunt-sass --save
+$ npm install node-bourbon --save
+```
+
+## Add bower.json file
+
+```
+{
+ "name": "class-demo",
+}
+```
+
+Add some Bower packages
+
+```
+$ bower install color-scale --save
+$ bower install type-rhythm-scale --save
+$ bower install rwd-toolkit --save
+```
+
+## Install Grunt
+
+```
+npm install grunt --save
+```
+
+## Install Grunt Watch
+
+```
+npm install grunt-contrib-watch --save-dev
+```
+
+Add `gruntfile.js`
+
+```
+module.exports = function(grunt) {
+ grunt.initConfig({
+ sass: {
+ dist: {
+ files: {
+ 'public/stylesheets/application.css': 'sass/application.scss'
+ },
+ options: {
+ sourceMap: true,
+ includePaths: [
+ require('node-bourbon').includePaths,
+ './bower_components/color-scale',
+ './bower_components/type-rhythm-scale',
+ './bower_components/rwd-toolkit'
+ ]
+ }
+ }
+ },
+ watch: {
+ source: {
+ files: ['sass/**/*.scss', 'views/**/*.jade'],
+ tasks: ['sass'],
+ options: {
+ livereload: true, // needed to run LiveReload
+ }
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-sass');
+ grunt.registerTask('default', ['sass']);
+};
+```
+
+## Create new Sass file
+
+Create the following directory and file, then add some sass to the file.
+
+```
+$ mkdir sass
+$ touch sass/application.scss
+```
+
+## Install library dependencies
+
+Add these to the `application.scss` manifest to make Sass aware of these dependencies.
+
+```
+@import "bourbon";
+@import "type-rhythm-scale";
+@import "rwd-toolkit";
+```
+
+
+## Get grunt started
+
+```
+$ grunt
+$ grunt watch
+```
diff --git a/pt-br/demo/typo.md b/pt-br/demo/typo.md
new file mode 100644
index 0000000..c5abda8
--- /dev/null
+++ b/pt-br/demo/typo.md
@@ -0,0 +1,38 @@
+
+# Tipografia
+
+Crie um novo arquivo sass
+
+```
+$ touch _typography.scss
+```
+
+Adicione no seguinte código:
+
+```
+html {
+ font: em($font-size, 16) $primary-font-family;
+ line-height: baseline($font-size);
+ color: $primary-text
+}
+
+h1, h2, h3, h4, h5, h6, [role=heading] {
+ @include heading();
+}
+
+.title {
+ margin-bottom: em(5);
+ padding: 0.25em 0;
+ text-align: center;
+ background-color: $delta-scale-bravo;
+ color: $white;
+ border-radius: em(5) em(5) 0 0;
+}
+```
+
+## Adicione o reset abaixo no application.scss
+
+```
+/////// Base
+@import "typography";
+```
diff --git a/pt-br/demo/vc.md b/pt-br/demo/vc.md
new file mode 100644
index 0000000..38d4fdb
--- /dev/null
+++ b/pt-br/demo/vc.md
@@ -0,0 +1,32 @@
+# Controle de versão
+
+Adicione no arquivo `.gitignore` o seguinte:
+
+```
+# OS generated files
+####################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Generated CSS output
+#######################
+public/stylesheets/*.css
+public/stylesheets/*.css.map
+
+# Package dependencies
+######################
+node_modules/
+bower_components
+```
+
+## Adiconado as alterações
+
+```
+$ git add --all
+$ git commit -m "add all the things"
+```
diff --git a/pt-br/demo/view.md b/pt-br/demo/view.md
new file mode 100644
index 0000000..a3f01b1
--- /dev/null
+++ b/pt-br/demo/view.md
@@ -0,0 +1,36 @@
+# Criando a view
+
+Começe com o layout, coloque o código a seguir na view.
+
+```
+meta(charset='utf-8')
+meta(http-equiv='X-UA-Compatible', content='IE=edge')
+meta(name='description', content='#{description}')
+meta(name='viewport', content='width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0 minimal-ui')
+```
+
+Atualize o arquivo `index.js` em `./routes`
+
+```
+res.render('index', { title: 'Contact me', description: 'This is a new demo' });
+```
+
+Abra o arquivo `./views/index.jade` e adicione o seguinte:
+
+```
+section.message-container
+ h1.title= title
+ form#form.form(action='#', method='get')
+ ul
+ li
+ label(for='name') Your Name:
+ input#name(type='text', placeholder='Your Name', name='name', tabindex='1')
+ li
+ label(for='email') Your Email:
+ input#email(type='email', placeholder='Your Email', name='email', tabindex='2')
+ li
+ label(for='message') Message:
+ textarea#message(placeholder='Message…', name='message', tabindex='3')
+
+ button#submit Send Message
+```
diff --git a/pt-br/deploy-app.md b/pt-br/deploy-app.md
new file mode 100644
index 0000000..b84dae5
--- /dev/null
+++ b/pt-br/deploy-app.md
@@ -0,0 +1,157 @@
+# Deploy do seu primeiro aplicativo
+
+Nesse momento, nós devemos ter um aplicativo que está funcionando localmente em seu computador. A seguintes etapas descreve o que você precisa fazer para fazer um *deploy* de código;
+
+## Atualizando o package.json
+
+Nessa etapa, precisarmos adicionar alguns códigos no arquivo `package.json` de modo que podemos executar o aplicativo a partir de um servidor remoto.
+
+Agora mesmo, há uma boa chance do arquivo estar assim:
+
+```
+{
+ "name": "application-name",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "node ./bin/www"
+ },
+ "dependencies": {
+ "express": "~4.0.0",
+ "static-favicon": "~1.0.0",
+ "morgan": "~1.0.0",
+ "cookie-parser": "~1.0.1",
+ "body-parser": "~1.0.0",
+ "debug": "~0.7.4",
+ "jade": "~1.3.0"
+ }
+}
+```
+
+No final do objeto `dependencies": { ... }`, você precisa adicionar um virgula `,` para que possamos acionar mais código. Primeiro vamos adicionar a palavra-chave `main`.
+
+```
+"main": "app.js",
+```
+
+Observe a virgula no final? Isso é porque vamos adicionar mais coisas. Depois disso, adicionamos o objeto `engines` que especificamos o que precisamos para executar o aplicativo.
+
+```
+"engines": {
+ "node": "0.10.26",
+ "npm": "1.4.3"
+}
+```
+
+Você deve ter algo parecido com isso:
+
+```
+{
+ "name": "application-name",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "node ./bin/www"
+ },
+ "dependencies": {
+ "express": "~4.0.0",
+ "static-favicon": "~1.0.0",
+ "morgan": "~1.0.0",
+ "cookie-parser": "~1.0.1",
+ "body-parser": "~1.0.0",
+ "debug": "~0.7.4",
+ "jade": "~1.3.0"
+ },
+ "main": "app.js",
+ "engines": {
+ "node": "0.10.26",
+ "npm": "1.4.3"
+ }
+}
+```
+
+### Não se esqueça do Grunt + Bower
+
+Se nesse momento você não tem qualquer pacote Grunt ou Bower no objeto `dependenciess` precisamos pegar o que está lá.
+
+Você pode adicionar cada um manualmente no arquivo `package.json` ou executar:
+
+```
+$ npm install --save grunt
+$ npm install --save grunt-sass
+$ npm install --save bower
+```
+
+Algo que você provavelmente não tem é a permissão para o servidor executar tarefas Grunt. Para isso no precisamos do Grunt-CLI.
+
+```
+$ npm install --save grunt-cli
+```
+
+### Publicar instruções de instalação
+
+Quando nos publicamos código no Heroku, temos que informar a ele para executar alguns comandos, basicamente instalar os pacotes Bower e executar tarefas Grunt. Para fazer isso, precisamos adicionar instruções dentro do objeto `scripts` e no arquivo `package.json`.
+
+Diretamente sob o `"start": "node ./bin/www"`, adicione:
+
+```
+"postinstall": "./node_modules/.bin/bower install && ./node_modules/.bin/grunt"
+```
+
+Agora temos tudo o que o Heroku precisa para instalar os pacotes e executar os scripts.
+
+## Adicionando o Procfile
+
+Esse é o arquivo que o Heroku precisar para iniciar a aplicação.
+
+```
+$ touch Procfile
+```
+
+Adicione o seguinte código:
+
+```
+web: npm start
+```
+
+Heroku vai usar isso para iniciar a aplicação.
+
+## Crie um repositório Git
+
+É importante fazer um repositório Git ANTES de criar um servidor Heroku. **ESPERE!** Antes de todos ficarem loucos no Git, existem coisas que precisamos fazer.
+
+Você deve ter um arquivo `.gitignore` em seu repositório, abra e certifique-se que você está ignorando todo o `node_modules`, e todo o `bower_components` e algo no espectro `/stylesheets/*.css`.
+
+```
+node_modules
+public/stylesheets/*.css
+bower_components
+```
+
+Bom. Agora você podem executar `git init` no seu repositório
+
+```
+$ git add .
+$ git commit -m "initial commit"
+```
+
+Não é preciso criar nesse momento um repositório no GitHub, mas você podem querer fazer isso em uma aplicação real.
+
+## Deploy do código
+
+Isso é bem difícil aqui. Certifique-se de seguir os seguintes comandos:
+
+```
+$ heroku create
+$ git push heroku master
+```
+
+## Alegre-se
+
+Se tudo estiver correto, você deve ver um retorno como este:
+
+```
+http://.herokuapp.com/ deployed to Heroku
+```
+
+Acesse a URL e veja.
diff --git a/pt-br/express.md b/pt-br/express.md
new file mode 100644
index 0000000..b2e6880
--- /dev/null
+++ b/pt-br/express.md
@@ -0,0 +1,37 @@
+# Express o framework Node
+
+[Expressjs](http://expressjs.com/) é um framework Node.js para aplicações web.
+
+> Express é um pequeno e flexível framework node.js para aplicações web, ele prove um conjunto robusto de funcionalidades para criar *single* e *multi-page*, além de aplicações web hibridas.
+
+Tem uma rica [API](http://expressjs.com/4x/api.html) que é RÁPIDA COMO O INFERNO!!
+
+Express é bem conhecido por não seguir Rails, tanto quanto frameworks go, para isso é preciso levar em conta outro framework Ruby chamado [Sinatra](http://www.sinatrarb.com/). O conceito é simples, o framework dá para você o suficiente para fazer as coisas e executar o mais rápido possível, tudo isso sem ficar no seu caminho.
+
+Nas maiores partes, Express continua de acordo com essa afirmação.
+
+Para este workshop, nós vamos usar o Express como ferramenta central para criar uma aplicação *web* e executar em um servidor, com suporte a rotas, páginas de erro, logs, etc ...
+
+## Instalando o Express
+
+Instalar o Express com o npm é muito fácil. Tenha em sua mente que uma parte muito importante no Express, a biblioteca que executa um incrível gerador.
+
+Para instalar o Express:
+
+```
+$ npm install express -g
+```
+
+Para instalar o gerador:
+
+```
+$ npm install express-generator -g
+```
+
+## Versão do gerador
+
+Express 4.0 foi liberado recentemente, nós vamos utilizar a versão 3 do gerador, o npm tem um poder de especificar qual a versão do gerador que você quer instalar.
+
+```
+$ npm install -g express-generator@3
+```
diff --git a/pt-br/grunt-watch.md b/pt-br/grunt-watch.md
new file mode 100644
index 0000000..b8e1d40
--- /dev/null
+++ b/pt-br/grunt-watch.md
@@ -0,0 +1,66 @@
+# Grunt-watch w/Livereload
+
+Agora que nós temos o Grunt configurado com o Sass, quando executarmos uma tarefa no CLI `grunt`, ela vai processar as edições que temos. Enquanto em desenvolvimento rápido, temos que voltar ao CLI, e digitar `grunt`, e atualizar o navegador.
+
+Felizmente, nós temos uma opção. `grunt-contrib-watch` é um pacote npm que monitora os arquivos Sass e quando algo é modificado, ele executa as tarefas Grunt. Para instalar:
+
+```
+npm install --save-dev grunt-contrib-watch
+```
+
+Com um bônus adicional, não só podemos executar um observador que vai processar nossos arquivos Sass, mas também podemos monitorar arquivos `.jade` quando modificados.
+
+No arquivo `Gruntfile.js` precisamos adicionar algumas tarefas Grunt:
+
+```javascript
+module.exports = function(grunt) {
+ grunt.initConfig({
+ sass: {
+ dist: {
+ files: {
+ 'public/stylesheets/style.css': 'sass/style.scss'
+ }
+ }
+ },
+ watch: {
+ source: {
+ files: ['sass/**/*.scss', 'views/**/*.jade'],
+ tasks: ['sass'],
+ options: {
+ livereload: true
+ }
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-sass');
+ grunt.registerTask('default', ['sass']);
+};
+```
+
+E ai temos isso. Grunt está instalado, nós temos um arquivo funcional `Gruntfile.js` e podemos começar a escrever alguns Sass também.
+
+## Adicionado Livereload ao layout.jade
+
+A fim de obter Livereload para disparar no projeto, precisamos adicionar uma referência a um arquivo JavaScript não existente no arquivo `layout.jade` como um última coisa na tag ``.
+
+```jade
+script(src='http://localhost:35729/livereload.js')
+```
+
+Em um novo projeto Express, é algo parecido com isso:
+
+```jade
+doctype html
+html
+ head
+ title= title
+ link(rel='stylesheet', href='/stylesheets/style.css')
+ body
+ block content
+
+ script(src='http://localhost:35729/livereload.js')
+```
+
+Depois disso incluído, voltamos e ATUALZIAMOS o browser, em seguida edite qualquer arquivo Sass e Jade para acionar o Livereload.
diff --git a/pt-br/grunt.md b/pt-br/grunt.md
new file mode 100644
index 0000000..e12ab25
--- /dev/null
+++ b/pt-br/grunt.md
@@ -0,0 +1,31 @@
+# Instalando de configurando o Grunt
+
+Grunt é o carro-chefe do mundo Node. Você precisa executar tarefas, então coloque o Grunt para trabalhar. Se você é do mundo Rails, Grunt é muito parecido com make ou Rake. A muita documentação sobre este *task runner*, mas nesse workshop, eu vou focar no básico para executar em uma aplicação.
+
+Grunt é bastante e simples de configurar, crie um arquivo chamado `Gruntfile.js` na raiz do seu projeto e adicione a seguinte sintaxe.
+
+```javascript
+module.exports = function(grunt) {
+ grunt.initConfig({
+
+ ...
+
+ });
+
+ grunt.loadNpmTasks('');
+};
+```
+
+Para executar o Grunt, é comum instalar ele globalmente:
+
+```
+npm install grunt -g
+```
+
+MAS ESPERE!! E sobre o desenvolvimento? Nos criarmos uma tarefa que requer o Grunt para executar no servidor, nós precisamos que essa dependência seja no app. Então, vamos instalar como uma dependência local:
+
+```
+npm install --save grunt
+```
+
+Usando essa estrutura base e o Grunt instalado, nós podemos começar a adicionar novos recursos ao nosso app.
diff --git a/pt-br/gulp.md b/pt-br/gulp.md
new file mode 100644
index 0000000..3025011
--- /dev/null
+++ b/pt-br/gulp.md
@@ -0,0 +1,23 @@
+# Precisa saber mais sobre o Gulp
+
+A seguir estão alguns artigos interessantes que serão ser trabalhados nesse workshop GitBook.
+
+### Começando com o Gulp
+
+> Este artigo vai dar entendimento caso você nunca tenha usado um *task runner* ou uma interface de linha de comando antes de mostrar os passos requeridos para configurar e executar o Gulp.
+
+> [Fonte](http://travismaynard.com/writing/getting-started-with-gulp)
+
+### Rodando seu próprio Asset Pipeline com o Gulp
+
+> Esses dias eu encontrei no Gulp quase tudo envolvendo HTML/CSS/JS. Ele é super rápido, fácil para escrever scripts e flexível. Eu estou em um ponto agora onde eu tenho um tonelada de projetos e eu posso apenas executar cd, run gulp, instalar e ver funcionando. Ele é a melhor solução que eu encontrei para entregar *assets* para desenvolvimento local e em produção.
+
+> [Fonte](http://blog.carbonfive.com/2014/05/05/roll-your-own-asset-pipeline-with-gulp/)
+
+### Arquivo avançado Gulp
+
+> Como o Gulp começando a ser utilizado em meu fluxo de trabalho todos os dias- Eu comecei a entender sua peculiaridade, e como se dar bem com ele. Meus gulfile.js tem se tornado muito mais puro e avançou em funcionalidade comparado com o original desenvolvido em Março.
+
+> [source](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file)
+
+
diff --git a/pt-br/heroku.md b/pt-br/heroku.md
new file mode 100644
index 0000000..aa2dfc0
--- /dev/null
+++ b/pt-br/heroku.md
@@ -0,0 +1,41 @@
+# Heroku
+
+A seguir estão os passos básicos que você precisa para configurar um app Node.js com Express para *deploy* no Heroku.
+
+### Passo 1 - Conta no Heroku
+
+Certifique-se que você tem uma conta configurada
+
+### Passo 2 - Instalar o Heroku Toolbelt
+
+Baixe e instale a ferramenta especifica para seu SO.
+
+##### OSX
+
+[https://toolbelt.heroku.com/osx](https://toolbelt.heroku.com/osx)
+
+#### Windows
+
+[https://toolbelt.heroku.com/windows](https://toolbelt.heroku.com/windows)
+
+#### Linux
+
+```
+$ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh
+```
+
+### Passo 3 - Login em sua conta no Heroku
+
+Com o toolbelt instalado, você deve ser capaz acessar sua conta
+```
+$ heroku login
+Enter your Heroku credentials.
+Email: adam@example.com
+Password:
+Could not find an existing public key.
+Would you like to generate one? [Yn]
+Generating new SSH public key.
+Uploading ssh public key /Users/adam/.ssh/id_rsa.pub
+```
+
+Isso é muito bom. Passando esses passos você está pronto para o DEPLOY DO CÓDIGO.
diff --git a/pt-br/new-app.md b/pt-br/new-app.md
new file mode 100644
index 0000000..c4e3873
--- /dev/null
+++ b/pt-br/new-app.md
@@ -0,0 +1,108 @@
+# Criando uma aplicação Express
+
+Nesse ponto, você deve ser capaz de criar uma aplicação. Neste exemplo, vamos criar um Node.js app com o framework Express.
+
+```
+$ express
+```
+
+Execute esse comando (usando `demo-app` como exemplo), você deve ver a seguinte saída:
+
+```
+ create : demo-app
+ create : demo-app/package.json
+ create : demo-app/app.js
+ create : demo-app/public
+ create : demo-app/public/javascripts
+ create : demo-app/public/images
+ create : demo-app/public/stylesheets
+ create : demo-app/public/stylesheets/style.css
+ create : demo-app/routes
+ create : demo-app/routes/index.js
+ create : demo-app/routes/users.js
+ create : demo-app/views
+ create : demo-app/views/index.jade
+ create : demo-app/views/layout.jade
+ create : demo-app/views/error.jade
+ create : demo-app/bin
+ create : demo-app/bin/www
+
+ install dependencies:
+ $ cd demo-app && npm install
+
+ run the app:
+ $ DEBUG=my-application ./bin/www
+```
+
+BOOM! Express cuida da maior parte do trabalho. Agora vamos fazer o que o computador está dizendo, mude de diretório, e dentro do diretório da aplicação execute `npm install`.
+
+## O que está no app?
+
+Agora, execute o comando `ls` e veja a estrutura que foi criar para você.
+
+```
+app.js node_modules/ public/ views/
+bin/ package.json routes/
+```
+
+#### app.js
+
+Ele é o ponto partida para sua aplicação. Vamos falar sobre alguns códigos dessa estrutura.
+
+A seguinte linha não e necessária para esse tipo de aplicação.
+
+```
+var user = require('./routes/user');
+
+app.get('/users', user.list);
+```
+
+Define o caminho do diretório onde os arquivos das views estão localizadas:
+
+```
+app.set('views', path.join(__dirname, 'views'));
+```
+
+Define o caminho do diretório onde estão os *assets*:
+
+```
+app.use(express.static(path.join(__dirname, 'public')));
+```
+
+Define o diretório raiz do aplicação:
+
+```
+app.use('/', routes);
+```
+
+#### node_modules/
+
+Esse é o diretório onde todas as suas dependências vão estar.
+
+#### public/
+
+Diretório dos *assets*, como por exemplo imagens, JavaScript, CSS, fonts, etc ...
+
+#### views/
+
+Onde todos os arquivos de layouts e views Jade deve estar.
+
+#### bin/
+
+Ha um único arquivo aqui, `www` e este é o que ativa o servidor Node.
+
+#### package.json
+
+Descrições do projeto, script de gerenciamento do projeto e o arquivo de manifesto da aplicação. Observe o seguinte objeto.
+
+```
+"scripts": {
+ "start": "node ./bin/www"
+},
+```
+
+Esse é o código que permite você execute o `npm start` para seu app.
+
+#### routes/
+
+Esse é o diretório onde você deve criar as rotas RESTful para sua aplicação. Com base na instalação deve existir dois arquivos lá dentro, `index.js` e `users.js`.
diff --git a/pt-br/node-npm.md b/pt-br/node-npm.md
new file mode 100644
index 0000000..8409516
--- /dev/null
+++ b/pt-br/node-npm.md
@@ -0,0 +1,171 @@
+# Introdução ao Node
+
+Há muita documentação que apoia a questão, "Por que Node?". Algo que realmente soa verdadeiro para mim não é o lugar onde Node está hoje, mas onde Node está indo. Sem dúvida, a comunidade Rails trouxe muitas ideias para a mesa, mas o que faz todas essas ideias incríveis difíceis de serem entendidas foi o fato de que elas estão disponíveis somente dentro do mundo Ruby. Ruby é incrível, mas nem todo mundo quer ser um desenvolvedor Ruby.
+
+Eu particularmente gosto desta questão, [_Why The Hell Would I Use Node.js? A Case-by-Case Introduction_](http://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js) por [Tomislav Capan](http://www.toptal.com/resume/tomislav-capan).
+
+
+> ... vale a pena notar que Ryan Dahl, o criador do Node.js, teve o objetivo de criar *real-time websites* com muitas possibilidades, "inspirada em aplicações com o Gmail". Em Node.js, ele criou para os desenvolvedores uma ferramenta para trabalhar com *non-blocking*, *event-driven* e *I/O paradigm*.
+
+## Instalando o Node
+
+Antes de você executar qualquer instalador, certifique-se que você sabe se o Node está instalado em seu computador. Veja a versão executando:
+
+```
+$ node --version
+```
+
+Claro que para criar e executar uma aplicação Node, você precisar instalar o Node. Para instalar o Node, você pode executar o [instaldor desse site](http://nodejs.org/).
+
+[Instalando Node e npm](http://www.joyent.com/blog/installing-node-and-npm/) é um bom artigo onde há todas maneiras de fazer a instalação. Preste a atenção no passo 4 onde existe opiniões sólidas de como fazer isso.
+
+Um [gist](https://gist.github.com/579814) disponibilizado ilustra uma série de maneiras para instalar o Node.
+
+O artigo representa uma opinião pessoal contra o uso do Homebrew. Brew tem trabalhado muito bem para mim, mas essa é uma opinião que você precisa formular com suas próprias experiências.
+
+## Node Package Manager (npm)
+
+> npm é um gerenciador de pacotes NodeJS. Como o próprio nome indica, você pode usar ele para instalar programas Node, também pode usar ele no ambiente de desenvolvimento como uma forma fácil de especificar as dependências de seu projeto.
+
+[Leia mais](http://howtonode.org/introduction-to-npm) sobre o npm.
+
+Dependendo do seu processo de instalação você pode ou não ter o npm instalado. Para verificar, execute:
+
+```
+$ npm --version
+```
+
+#### Se você não tem o npm instalado, execute o seguinte comando:
+
+Nota: npm é um gerenciador de pacotes para o Node, dessa forma você não pode usar o gerenciador de pacotes para instalar o próprio gerenciador de pacotes.
+
+```
+$ curl http://npmjs.org/install.sh | sh
+```
+
+## Usando npm
+
+Agora que você tem o npm instalado, todos os pacotes são registrados com um simples comando. Para instalar um pacote básico execute:
+
+```
+$ npm install
+```
+
+Esse método de instalação vai instalar os pacotes no diretório (`node_modules/`) relativo ao seu projeto. Às vezes você vai precisar instalar bibliotecas globalmente, assim seu acesso pode ser feito de qualquer aplicação sem necessariamente exigir a instalação do pacote como uma dependência.
+
+Para fazer isso, você precisa adicionar a *flag* `-g` no comando de instalação.
+
+```
+$ npm install -g
+```
+
+**Nota:** Dependendo de como o Node está instalado em seu sistema, você pode não ter acesso para instalar pacotes globalmente. Para contornar essa situação, adicione `sudo` antes do `npm` no comando de instalação.
+
+```
+$ sudo npm install -g
+```
+
+### Usando npm com um projeto
+
+O caso mais comum de uso do `npm` está em manter um arquivo de manifesto de dependências para seu projeto. Ele é mantido em um arquivo chamado [package.json](https://www.npmjs.org/doc/json.html).
+
+Você mesmo pode criar esse arquivo, existe também uma maneira de gerar esse arquivo. Em algum diretório execute `npm init`, o CLI vai orientá-lo em uma série de perguntas e criar algo parecido com isso:
+
+```
+{
+ "name": "toss-this",
+ "version": "0.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "ISC"
+}
+```
+
+Uma vez que você tem isso adicionado em seu projeto o comando `npm install` instala todas as dependências. Adicione a *flag* --save` ao comando, veja:
+
+```
+$ npm install --save
+```
+
+Para adicionar o Grunt ao seu projeto, você deve atualizar o `package.json` adicionando ao objeto `dependencies` do arquivo, veja:
+
+```
+{
+ "name": "toss-this",
+ "version": "0.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "grunt": "^0.4.5"
+ }
+}
+```
+
+Somando-se a isso, se você quiser adicionar uma dependência utilizada somente em ambiente de desenvolvimento, você deve passar a flag `-dev`:
+
+```
+$ npm install --save-dev
+```
+
+Para adicionar o Gulp como uma dependência utilizada apenas em ambiente de desenvolvimento, no arquivo `package.json` adicionamos ele ao objeto `devDependencies`, veja:
+
+```
+{
+ "name": "toss-this",
+ "version": "0.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "grunt": "^0.4.5"
+ },
+ "devDependencies": {
+ "gulp": "^3.6.2"
+ }
+}
+```
+
+### Aprendendo mais sobre o npm
+
+npm é um utilitário incrível e complexo quando se trata de gerenciamento de dependências, Veja o [npm cheatsheet](http://blog.nodejitsu.com/npm-cheatsheet/) para informações mais detalhadas.
+
+### Aprendendo mais sobre package.json
+
+O `package.json` tem muitas funcionalidades. Para saber mais sobre como tudo isso trabalha [package.json An interactive guide](http://package.json.nodejitsu.com/#) é uma incrível ferramenta de aprendizado.
+
+## Mantendo dependências
+
+Ao contrário de outros gerenciadores de pacotes, npm instala suas dependências dentro da pasta raiz de seu projeto. Sem passos extras, essas bibliotecas podem ser facilmente versionadas no seu controle de versão.
+
+Você provavelmente não vai querer fazer isso, O versionamento dessas dependências é mantido pelo arquivo `package.json` e você deve evitar versionar esses pacotes no controle de versão.
+
+### Usando o .gitignore
+
+Para manter bibliotecas npm fora do seu controle de versão, adicione a seguinte linha no arquivo `.gitignore`. Caso o arquivo `.gitignore` não exista crie ele.
+
+```
+node_modules
+```
+
+### Obtendo as dependências
+
+O arquivo `package.json` está mantendo suas dependências e você não deve versionar essas dependências no seu repositório Git, quem clonar o seu repositório precisa instalar as dependências, isso é muito simples, veja:
+
+```
+$ npm install
+```
+
+Depois de executar esse comando você deve ver seu CLI fazer download das dependências.
diff --git a/pt-br/routes.md b/pt-br/routes.md
new file mode 100644
index 0000000..0b21104
--- /dev/null
+++ b/pt-br/routes.md
@@ -0,0 +1,116 @@
+# Diversão com rotas
+
+O método `app.VERB()` fornece a funcionalidade de roteamento no Express, onde **VERB** é um verbo HTTP, como `app.post()`. Várias chamadas de retorno podem existir, todos tem tratamento igual, e se comportam como um *middleware*, com uma única exceção onde as camadas podem invocar `next('route')` que ignoram as chamadas de rotas remanescentes. Este mecanismo pode ser usado para executar pré-condições em uma rota e passar o controle para a rota seguinte quando não há mais necessidade de prosseguir com a rota atual.
+
+O trecho a seguir mostra uma simples definição de rota. Express traduz a sequência do caminho para uma expressão regular usada internamente para combinar com as requisições de entrada. Sequências de consulta como **not** quando consideradas representam estas combinações, por exemplo `GET /` poderia combinar com a seguinte rota, com faria `GET /?name=tobi`.
+
+Mais sobre [app.VERB](http://expressjs.com/4x/api.html#app.VERB).
+
+
+```javascript
+app.VERB(path, [callback...], callback)
+```
+
+No arquivo `app.js` veja como as rotas são definidas.
+
+```javascript
+var routes = require('./routes/index');
+```
+
+O que está acontecendo aqui? Basicamente, o Express está definindo uma variável chamada `routes`, para referenciar com o caminho do arquivo `./routes.index`.
+
+Esta variável está usada para definir o caminho raiz do app.
+
+```javascript
+app.use('/', routes);
+```
+
+Outra coisa, nós podemos usar o `res.send()` e o que nos passamos no parâmetro será enviado diretamente para o browser. Por exemplo:
+
+```javascript
+router.get('/foo', function(req, res){
+ res.send('hello world');
+});
+```
+
+Usando o `res.send()` podemos fazer coisas divertidas como enviar objetos JSON.
+
+```javascript
+router.get('/foo', function(req, res){
+ res.send({'name':'Bob Goldcat', 'age': '41'})
+});
+```
+
+Esse método permite manter todas as rotas que precisamos no arquivo `index.js`. Há melhores maneiras de tratar soluções de roteamento mais complexas, mas para o escopo desse workshop, isso já é o suficiente.
+
+## O que é o arquivo index.js
+
+Olhando para o arquivo`index.js` você deve ver o seguinte:
+
+```javascript
+var express = require('express');
+...
+var router = express.Router();
+...
+/* GET home page. */
+router.get('/', function(req, res) {
+ res.render('index', { title: 'Express' });
+});
+
+module.exports = router;
+```
+
+##### router.get
+
+Esta é a função que decide o caminho da URL para `/`. Em seguida precisamos criar uma função que define uma `req` (requisição) e uma `res` (resposta). Outro conceito é o `next` que irá aqui para encadear eventos, mas não será mostrado nesse exemplo.
+
+##### O que é o módulo exports
+
+É um objeto que é devolvido como resultado de uma chamada a um módulo. É uma funcionalidade do Node, mais sobre isso em [nodejs.org/api](http://nodejs.org/api/modules.html#modules_module_exports).
+
+## Criando uma nova rota
+
+Olhando para o padrão da sintaxe, se nós quisermos adicionar uma nova rota na aplicação, podemos simplesmente fazer algo parecido com isso:
+
+```javascript
+router.get('/app', function(req, res) {
+ res.render('app', { title: 'Express' });
+});
+```
+
+Tenha em mente que o valor da URL, `/app`, não precisar ser o mesmo que o próprio arquivo da *view*. Se o nome da *view* for `foo.jade` nos poderíamos fazer o seguinte:
+
+```javascript
+router.get('/app', function(req, res) {
+ res.render('foo', { title: 'Express' });
+});
+```
+
+## É uma rota? É um controlador?
+
+O que é interessante sobre isso é que a função da rota esta contendo lógica. Dentro da rota tem uma função `res.render`.
+
+```javascript
+res.render('foo', { title: 'Express' });
+```
+
+No *template* da *view* temos isso:
+
+```jade
+h1= title
+p Welcome to #{title}
+```
+
+Aqui está dois exemplos de como nós podemos extrair dados do 'controller/route' e mostrar na *view*. Nesse exemplo nós pegamos o HTML obtemos a saída de:
+
+```html
+Express
+Welcome to Express
+```
+
+Tudo isso parece ser um punhado de preocupações, como a rota pode também conter informações do controlador? Isso é verdade, a um movimento na comunidade para mudar o nome do diretório de `routes` para `controllers`.
+
+Um bom exemplo disso pode ser visto em [Holowaychuk's](https://github.com/visionmedia/express/tree/master/examples/mvc), um exemplo MVC com Express.
+
+Mas para o objetivo desse workshop, vamos adotar a conveção atual.
+
diff --git a/pt-br/sass.md b/pt-br/sass.md
new file mode 100644
index 0000000..e0317a7
--- /dev/null
+++ b/pt-br/sass.md
@@ -0,0 +1,66 @@
+# Adicionando libsass
+
+Sass, é a base da libsass, é o principal pré-processador CSS e de longe o mais rico em funcionalidades. Mas uma coisa que separa a libsass de outros na comunidade JavaScript é que ele não é escrito em JavaScript, ele na verdade é escrito em C/C++. Então, a mesma biblioteca é portável para qualquer linguagem. E de longe o `node-sass` é o mais popular warpper.
+
+Tudo isso realmente não importa. A única uma coisa que isso significa é que precisamos passar por uns passos adicionais, embora é extremamente simples a suas configuração.
+
+## Primeiro, vamos instalar Node-Sass:
+
+```
+$ npm install --save node-sass
+```
+
+Isso vai instalar o *wrapper* Node para o Sass e a biblioteca C/C++ libsass. Depois, para o Grunt usar a biblioteca, precisamos adicionar o pacote Grunt-Sass
+
+```
+$ npm install grunt-sass --save
+```
+
+Para conseguir tudo isso integrado no projeto, precisamos atualizar o `Gruntfile.js`.
+
+```javascript
+module.exports = function(grunt) {
+ grunt.initConfig({
+ sass: {
+ dist: {
+ files: {
+ 'public/stylesheets/style.css': 'sass/style.scss'
+ }
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-sass');
+ grunt.registerTask('default', ['sass']);
+};
+```
+
+No objeto `files:` você precisa listar o caminho de saída do CSS e o cominho de entrada do arquivo SCSS.
+
+## Adicionado o Sass
+
+Para fazer isso funcionar, precisamos adicionar o diretório `sass` e colocar o arquivo `style.scss` lá. Na raiz do projeto execute:
+
+```
+$ mkdir sass
+```
+
+No diretório `sass`:
+
+```
+$ touch style.scss
+```
+
+E adicionamos o seguinte Sass, assim nos sabemos se ele está funcionando:
+
+```scss
+$color: orange;
+
+body {
+ background-color: $color;
+}
+```
+
+## Execute o Grunt
+
+Nesse momento nós estamos prontos para executar um comando `grunt` e processar o Sass.