Portuguese-BR translation added

README.md

@@ -1,4 +1,4 @@
-##### Viewing this from GitHub? Visit the website for the full experience. **[rscss.io →](http://rscss.io)**
+##### Visitando pelo GitHub? Visite o website para melhor experiência. **[rscss.io →](http://rscss.io)**
 <!-- {h5: style='display:none'} -->
 
 ----
@@ -8,23 +8,24 @@
 
 <!-- {h1:.massive-header.-with-tagline} -->
 
-> Styling CSS without losing your sanity
+> Estilizando CSS sem perder sua sanidade
 
-Reasonable System for CSS Stylesheet Structure.<br>
-A set of simple ideas to guide your process of building maintainable CSS.
+Sistema fundamentado para estruturas de folhas de estilo CSS.<br>
+Um simples pacote de ideias para guiar seu processo de construção de CSS com prática manutenção.
 
-Introduction
+Introdução
 ------------
 
-Any CSS greater than 1000 lines will get unwieldy. You'll eventually run into these common pitfalls:
 
-* "What does this class mean?"
-* "Is this class still being used?"
-* "If I make a new class `green`, will there be a clash?"
+Qualquer CSS com mais de 1000 linhas ficará desconfortável. Você acabará se depararando com essas armadilhas comuns:
 
-**rscss** is an attempt to make sense of all these. It is not a framework. It's simply a set of ideas to guide your process of building maintainable CSS for any modern website or application.
+* "O que essa classe quer dizer?"
+* "Para o que essa classe está sendo usada?"
+* "Se eu faço uma nova classe chamada `green`, haverá conflitos?"
 
-Let's get started by learning about components.
+**rscss** é uma tentativa de dar sentido a tudo isso. Não é um framework. É simplesmente um conjunto de ideias para guiar seu processo de criação de um CSS de fácil manutenção para qualquer site ou aplicativo moderno.
+
+Vamos começar aprendendo sobre componentes.
 [Continue →](docs/components.md)
 <!-- {p:.pull-box} -->
 

docs/README.md

@@ -1,19 +1,19 @@
-# Table of contents
+# Tabela de conteúdo
 
 - [rscss](../README.md)
-- **Components**
-  - [About components](components.md)
-  - [Elements](elements.md)
-  - [Variants](variants.md)
-  - [Nested components](nested-components.md)
+- **Componentes**
+  - [Sobre componentes](components.md)
+  - [Elementos](elements.md)
+  - [Variantes](variants.md)
+  - [Compoentens aninhados](nested-components.md)
   - [Layouts](layouts.md)
   - [Helpers](helpers.md)
-- **Structure**
-  - [CSS Structure](css-structure.md)
-- **Notes**
-  - [Pitfalls](pitfalls.md)
-  - [Apprehensions](apprehensions.md)
-  - [Other resources](other-resources.md)
-- [Summary](summary.md)
-- **External resources**
-  - [Translations](translations.md)
+- **Estrutura**
+  - [Estrutura CSS](css-structure.md)
+- **Notas**
+  - [Armadilhas](pitfalls.md)
+  - [Apreensões](apprehensions.md)
+  - [Outros recursos](other-resources.md)
+- [Sumário](summary.md)
+- **Referências externas**
+  - [Traduções](translations.md)

docs/apprehensions.md

@@ -1,20 +1,20 @@
-# Apprehensions
+# Receio
 
-Some people may have apprehensions to these conventions, such as:
+Algumas pessoas podem ter receios à estas convenções, como por exemplo:
 
-#### "But dashes suck"
+#### "Mas dashes é um saco"
 
-You're free to omit them and just use regular words, but keep the rest of the ideas in place (components, elements, variants).
+Você está livre para remove-los e apenas usar palavras normais, mas mantenha o resto das ideias no lugar correto (componentes, elementos, variantes).
 
-#### "But I can't think of 2 words!"
+#### "Mas eu não consigo pensar em 2 palavras!"
 
-Some components will only need one word to express their purpose, such as `alert`. In these cases, consider that using some suffixes will make it clearer that it's a block-level element:
+Alguns componentes vão precisar apenas de uma palavra para expressar seu propósito. Por exemplo: `alert`. Nesses casos, considere que usando alguns sufixos irá fazer com que fique mais claro que isso é um elemento block-level:
 
   * `.alert-box`
   * `.alert-card`
   * `.alert-block`
 
-  Or for inlines:
+  Ou para inlines:
 
   * `.link-button`
   * `.link-span`

docs/components.md

@@ -1,18 +1,18 @@
-Components
+Componentes
 ==========
 
-Think in components. Consider each piece of your UI as an individual "component".
+Pense em componentes. Considere cada pedaço de sua UI como um "componente" individual.
 
 ![](images/component-example.png)
 
-## Naming components
-Components will be named with **at least two words**, with a dash between each word. Examples of components:
+## Nomeando Componentes
+Componentes serão nomeados com **ao menos duas palavras**, com um dash entre cada palavra. Exemplos de componentes:
 
-  * A like button (`.like-button`)
-  * A search form (`.search-form`)
-  * A news article card (`.article-card`)
-  * A namespaced component (`.rico-custom-header`)
+  * Um botão de like (`.like-button`)
+  * Um formulário de pesquisa (`.search-form`)
+  * Um cartão de notícia (`.article-card`)
+  * Um componente com namespace (`.rico-custom-header`)
 
-How do you write a component exactly? Let's learn about Elements.
+Como você exatamente escreve um componente? Vamos aprender sobre Elementos.
 [Continue →](elements.md)
 <!-- {p:.pull-box} -->

docs/css-structure.md

@@ -1,7 +1,7 @@
-# CSS structure
+# Estrutura CSS 
 
-## One component per file
-For each component, place them in their own file.
+## Um componente por arquivo
+Para cada componente, coloque eles em seus respectivos arquivos.
 
   ```scss
   /* css/components/search-form.scss */
@@ -10,24 +10,24 @@ For each component, place them in their own file.
     > .field { /* ... */ }
     > .label { /* ... */ }
 
-    // variants
+    // variantes
     &.-small { /* ... */ }
     &.-wide { /* ... */ }
   }
   ```
 
-## Use glob matching
-In sass-rails and stylus, this makes including all of them easy:
+## Use globo correspondente
+O sass-rails e stylus facilitam a inclusão dos componentes:
 
   ```scss
   @import 'components/*';
   ```
 
-## Avoid over-nesting
-Use no more than 1 level of nesting. It's easy to get lost with too much nesting.
+## Evite multiplos aninhamento
+Não use mais do que 1 nível de aninhamento. É fácil se perder quando se tem muitos aninhamentos.
 
   ```scss
-  /* ✗ Avoid: 3 levels of nesting */
+  /* ✗ Evite: 3 níveis de aninhamento */
   .image-frame {
     > .description {
       /* ... */
@@ -38,7 +38,7 @@ Use no more than 1 level of nesting. It's easy to get lost with too much nesting
     }
   }
 
-  /* ✓ Better: 2 levels */
+  /* ✓ Melhor: 2 níveis */
   .image-frame {
     > .description { /* ... */ }
     > .description > .icon { /* ... */ }

docs/elements.md

@@ -1,11 +1,11 @@
-# Elements
+# Elementos
 
-Elements are things inside your component.
+Elementos são coisas dentro do seu componente.
 
 ![](images/component-elements.png)
 
-## Naming elements
-Each component may have elements. They should have classes that are only **one word**.
+## Nomeando Elementos
+Cada componente pode ter elementos. Eles deve ter classes com apenas **uma palavra**.
 
 ```scss
 .search-form {
@@ -14,18 +14,18 @@ Each component may have elements. They should have classes that are only **one w
 }
 ```
 
-## Element selectors
-Prefer to use the `>` child selector whenever possible. This prevents bleeding through nested components, and performs better than descendant selectors.
+## Seletor nos Elementos
+Dê preferência ao uso do seletor filho `>` sempre que possivel. Isso previne complicações nos componentes aninhados, e se comporta melhor nos seletores descendentes.
 
 ```scss
 .article-card {
   .title     { /* okay */ }
-  > .author  { /* ✓ better */ }
+  > .author  { /* ✓ melhor */ }
 }
 ```
 
-## On multiple words
-For those that need two or more words, concatenate them without dashes or underscores.
+## Em multiplas palavras
+Para essas que necessitam de duas ou mais palavras, concatene eles sem dashes ou underscores.
 
 ```scss
 .profile-box {
@@ -35,16 +35,16 @@ For those that need two or more words, concatenate them without dashes or unders
 }
 ```
 
-## Avoid tag selectors
-Use classnames whenever possible. Tag selectors are fine, but they may come at a small performance penalty and may not be as descriptive.
+## Evite seletores de tag
+Use nome de classes sempre que possível, seletores de Tag são bons, mas eles são pouco perfomáticos e podem não ser muito descritivos.
 
 ```scss
 .article-card {
-  > h3    { /* ✗ avoid */ }
-  > .name { /* ✓ better */ }
+  > h3    { /* ✗ evite */ }
+  > .name { /* ✓ melhor */ }
 }
 ```
 
-Not all elements should always look the same. Variants can help.
+Nem todos elementos devem sempre parecer iguais. Variantes podem ajudar.
 [Continue →](variants.md)
 <!-- {p:.pull-box} -->

docs/helpers.md

@@ -1,6 +1,6 @@
 # Helpers
 
-For general-purpose classes meant to override values, put them in a separate file and name them beginning with an underscore. They are typically things that are tagged with *!important*. Use them *very* sparingly.
+Para propósito geral, classes significam sobrescrever valores, coloque eles em arquivos separados e nomeie eles começando com um underscore. Eles são tipicamente coisas que são marcadas como *!important*. Use eles com *muita* moderação.
 
 ```css
 ._unmargin { margin: 0 !important; }
@@ -9,13 +9,15 @@ For general-purpose classes meant to override values, put them in a separate fil
 ._pull-right { float: right !important; }
 ```
 
-## Naming helpers
-Prefix classnames with an underscore. This will make it easy to differentiate them from modifiers defined in the component. Underscores also look a bit ugly which is an intentional side effect: using too many helpers should be discouraged.
+## Nomeando helpers
+
+Prefixe nome de classes com um underscore. Isso fará com que fique fácil diferenciar eles dos modificadores definidos em um componente. Underscores são um pouco feios de se olhar, o que é um efeito colateral intencional: usar muitos helpers deve ser desencorajado.
 
   ```html
   <div class='order-graphs -slim _unmargin'>
   </div>
   ```
 
-## Organizing helpers
-Place all helpers in one file called `helpers`. While you can separate them into multiple files, it's very preferrable to keep your number of helpers to a minimum.
+## Organizando helpers
+
+Coloque todos os helpers em um arquivo chamado `helpers`. Enquanto você pode separar eles em vários arquivos, é preferível que você tenha um menor número de arquivos helpers possível.

docs/layouts.md

@@ -2,21 +2,21 @@
 
 ![](images/layouts.png)
 
-## Avoid positioning properties
-Components should be made in a way that they're reusable in different contexts. Avoid putting these properties in components:
+## Evite posicionar propriedades
+Os componentes devem ser feitos de forma que sejam reutilizáveis ​​em diferentes contextos. Evite colocar essas propriedades em componentes:
 
-  * Positioning (`position`, `top`, `left`, `right`, `bottom`)
-  * Floats (`float`, `clear`)
-  * Margins (`margin`)
-  * Dimensions (`width`, `height`) *
+  * Posicionamento (`position`, `top`, `left`, `right`, `bottom`)
+  * Flutuadores (`float`, `clear`)
+  * Margens (`margin`)
+  * Dimensões (`width`, `height`) *
 
-## Fixed dimensions
+## Dimensões fixas
 
-Exception to these would be elements that have fixed width/heights, such as avatars and logos.
+Exceção a estes seria elementos que tenham largura / alturas fixas, como avatares e logotipos.
 
-## Define positioning in parents
+## Defina o posicionamento nos pais
 
-If you need to define these, try to define them in whatever context they will be in. In this example below, notice that the widths and floats are applied on the *list* component, not the component itself.
+Se você precisar defini-las, tente defini-las em qualquer contexto em que elas estejam. Neste exemplo abaixo, observe que as larguras e os flutuadores são aplicados no componente *list*, não no próprio componente.
 
   ```css
   .article-list {
@@ -38,6 +38,6 @@ If you need to define these, try to define them in whatever context they will be
   }
   ```
 
-How do you apply margins outside a layout? Try it with Helpers.
+Como você aplica margens fora de um layout? Experimente com os Helpers.
 [Continue →](helpers.md)
 <!-- {p:.pull-box} -->

docs/nested-components.md

@@ -1,4 +1,4 @@
-# Nested components
+# Componentes aninhados
 
 ![](images/component-nesting.png)
 
@@ -12,18 +12,18 @@
 </div>
 ```
 
-Sometimes it's necessary to nest components. Here are some guidelines for doing that.
+Às vezes é necessário aninhar componentes. Aqui estão algumas diretrizes para fazer isso.
 
-## Variants
-A component may need to appear a certain way when nested in another component. Avoid modifying the nested component by reaching into it from the containing component.
+## Variantes
+Um componente pode precisar aparecer de uma determinada maneira quando aninhado em outro componente. Evite modificar o componente aninhado tentando alcança-lo a partir do componente que o contém.
 
 ```scss
 .article-header {
-  > .vote-box > .up { /* ✗ avoid this */ }
+  > .vote-box > .up { /* ✗ evite isso */ }
 }
 ```
 
-  Instead, prefer to add a variant to the nested component and apply it from the containing component.
+Em vez disso, prefira adicionar uma variante ao componente aninhado e aplique-o a partir do componente contido.
 
 ```html
 <div class='article-header'>
@@ -40,8 +40,9 @@ A component may need to appear a certain way when nested in another component. A
 }
 ```
 
-## Simplifying nested components
-Sometimes, when nesting components, your markup can get dirty:
+## Simplificando componentes aninhados
+
+Às vezes, ao aninhar componentes, seu markup pode ficar sujo:
 
 ```html
 <div class='search-form'>
@@ -50,7 +51,7 @@ Sometimes, when nesting components, your markup can get dirty:
 </div>
 ```
 
-You can simplify this by using your CSS preprocessor's `@extend` mechanism:
+Você pode simplificar isso usando o mecanismo de `@extend` do seu pré-processador CSS:
 
 ```html
 <div class='search-form'>
@@ -69,6 +70,6 @@ You can simplify this by using your CSS preprocessor's `@extend` mechanism:
 }
 ```
 
-What about repeating elements like lists? Learn about Layouts.
+Que tal repetir elementos como listas? Aprenda sobre layouts.
 [Continue →](layouts.md)
 <!-- {p:.pull-box} -->