From 07560111c28337dd501599f56bce591369135251 Mon Sep 17 00:00:00 2001 From: Vitor Takara Date: Tue, 5 Mar 2019 20:49:00 -0300 Subject: [PATCH 1/5] Portuguese-BR translation added --- README.md | 23 ++++++++++++----------- docs/README.md | 30 +++++++++++++++--------------- docs/apprehensions.md | 14 +++++++------- docs/components.md | 18 +++++++++--------- docs/css-structure.md | 20 ++++++++++---------- docs/elements.md | 28 ++++++++++++++-------------- docs/helpers.md | 12 +++++++----- docs/layouts.md | 22 +++++++++++----------- docs/nested-components.md | 21 +++++++++++---------- docs/other-resources.md | 23 ++++++++++++----------- docs/pitfalls.md | 9 +++++---- docs/summary.md | 12 ++++++------ docs/variants.md | 26 +++++++++++++------------- 13 files changed, 132 insertions(+), 126 deletions(-) diff --git a/README.md b/README.md index 7037a43..17a1438 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -##### Viewing this from GitHub? Visit the website for the full experience. **[rscss.io →](http://rscss.io)** +##### Visitando isso pelo GitHub? Visite o website para melhor experiência. **[rscss.io →](http://rscss.io)** ---- @@ -8,23 +8,24 @@ -> Styling CSS without losing your sanity +> Estilizando CSS sem perder sua sanidade -Reasonable System for CSS Stylesheet Structure.
-A set of simple ideas to guide your process of building maintainable CSS. +Sistema fundamentado para estruturas de folhas de estilo CSS.
+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 quadro. É 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) diff --git a/docs/README.md b/docs/README.md index f6c3f3e..0a22015 100644 --- a/docs/README.md +++ b/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) diff --git a/docs/apprehensions.md b/docs/apprehensions.md index 2a3973c..8f9f612 100644 --- a/docs/apprehensions.md +++ b/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` diff --git a/docs/components.md b/docs/components.md index 333e8b9..14e2db7 100644 --- a/docs/components.md +++ b/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) diff --git a/docs/css-structure.md b/docs/css-structure.md index 476b388..1e9298a 100644 --- a/docs/css-structure.md +++ b/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 { /* ... */ } diff --git a/docs/elements.md b/docs/elements.md index 4afdc0d..f00b7ad 100644 --- a/docs/elements.md +++ b/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) diff --git a/docs/helpers.md b/docs/helpers.md index 7848435..bc8a036 100644 --- a/docs/helpers.md +++ b/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
``` -## 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. \ No newline at end of file diff --git a/docs/layouts.md b/docs/layouts.md index 2c5693f..d0edb71 100644 --- a/docs/layouts.md +++ b/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) diff --git a/docs/nested-components.md b/docs/nested-components.md index 51dfab2..6dd0d59 100644 --- a/docs/nested-components.md +++ b/docs/nested-components.md @@ -1,4 +1,4 @@ -# Nested components +# Componentes aninhados ![](images/component-nesting.png) @@ -12,18 +12,18 @@ ``` -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
@@ -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
@@ -50,7 +51,7 @@ Sometimes, when nesting components, your markup can get dirty:
``` -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
@@ -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) diff --git a/docs/other-resources.md b/docs/other-resources.md index 4e36385..ffc9494 100644 --- a/docs/other-resources.md +++ b/docs/other-resources.md @@ -1,13 +1,14 @@ # Other resources - * [ITCSS](https://speakerdeck.com/dafed/managing-css-projects-with-itcss#49) ("Inverted Triangle CSS") is a nice complement to any rscss structure. - * [rsjs](http://ricostacruz.com/rsjs/) ("Reasonable Standard of JavaScript Structure") is a work-in-progress document for structuring JavaScript on basic sites. + * [ITCSS](https://speakerdeck.com/dafed/managing-css-projects-with-itcss#49) ("Inverted Triangle CSS") é um bom complemento para qualquer estrutura rscss. + * [rsjs](http://ricostacruz.com/rsjs/) ("Reasonable Standard of JavaScript Structure") é um documento que está em andamento para estruturar o JavaScript em sites básicos. -Other solutions +Outras soluções --------------- ### BEM -[BEM] is nice, but some may be irked at its unconventional syntax. RSCSS pretty much follows BEM conventions, only with a different syntax. +[BEM] é bom, mas alguns podem ficar irritados com sua sintaxe não convencional. O RSCSS praticamente segue as convenções do BEM, apenas com uma sintaxe diferente. + ```html @@ -27,14 +28,14 @@ Other solutions ## Terminologies -The same concepts exist in similar ways in other CSS structuring ideologies. +Os mesmos conceitos existem de formas semelhantes em outras ideologias de estruturação de CSS. -| RSCSS | BEM | SMACSS | -| --- | --- | --- | -| Component | Block | Module | -| Element | Element | Sub-Component | -| Layout | ? | Layout | -| Variant | Modifier | Sub-Module & State | +| RSCSS | BEM | SMACSS | +| --- | --- | --- | +| Componente | Bloco | Módulo | +| Elemento | Elemento | Sub-Componente | +| Layout | ? | Layout | +| Variante | Modificador | Sub-Módulo & Estado | [BEM]: http://bem.info/ [Smacss]: https://smacss.com/ diff --git a/docs/pitfalls.md b/docs/pitfalls.md index 3097ce8..62c1643 100644 --- a/docs/pitfalls.md +++ b/docs/pitfalls.md @@ -1,7 +1,8 @@ -# Pitfalls +# Armadilhas -## Bleeding through nested components -Be careful about nested components with elements sharing the same name as elements in its container. +## Sofrendo com componentes aninhados + +Tenha cuidado com componentes aninhados com elementos que compartilham o mesmo nome de elementos dentro do seu contêiner. ```html
@@ -29,4 +30,4 @@ Be careful about nested components with elements sharing the same name as elemen } ``` -In this case, if `.article-link > .count` did not have the `>` (child) selector, it will also apply to the `.vote-box .count` element. This is one of the reasons why child selectors are preferred. +Nesse caso, se `.article-link > .count` não tivesse o `>` seletor filho, ele seria aplicado para o elemento `.vote-box .count`. Essa é uma das razões do porquê seletores filho são o ideal. \ No newline at end of file diff --git a/docs/summary.md b/docs/summary.md index f4fe2c4..de4bc2c 100644 --- a/docs/summary.md +++ b/docs/summary.md @@ -1,7 +1,7 @@ -# Summary +# Sumário -* Think in **components**, named with 2 words (`.screenshot-image`) -* Components have **elements**, named with 1 word (`.blog-post > .title`) -* Name **variants** with a dash prefix (`.shop-banner.-with-icon`) -* Components can nest -* Remember you can extend to make things simple +* Pense em **componentes** nomeados com 2 palavras (`.screenshot-image`) +* Componentes possuem **elementos**, nomeados com 1 palavra (`.blog-post > .title`) +* Nomeie **variantes** com o prefixo de dash (`.shop-banner.-with-icon`) +* Componentes podem aninhar +* Lembre-se você pode estender para tornar as coisas simples \ No newline at end of file diff --git a/docs/variants.md b/docs/variants.md index 641ac71..671694f 100644 --- a/docs/variants.md +++ b/docs/variants.md @@ -1,13 +1,13 @@ -# Variants +# Variantes -Components may have variants. Elements may have variants, too. +Componentes podem ter variantes. Os elementos podem ter variantes também. ![](images/component-modifiers.png)
-## Naming variants -Classnames for variants will be prefixed by a dash (`-`). +## Nomeando variantes +Nomes de classes para variantes serão prefixados por um dash (`-`). ```scss .like-button { @@ -17,8 +17,8 @@ Classnames for variants will be prefixed by a dash (`-`). } ``` -## Element variants -Elements may also have variants. +## Variantes de elemento +Elementos também podem ter variantes. ```scss .shopping-card { @@ -27,14 +27,14 @@ Elements may also have variants. } ``` -## Dash prefixes -Dashes are the preferred prefix for variants. +## Prefixos com Dash +Dashes são os ideais para prefixar variantes. - * It prevents ambiguity with elements. - * A CSS class can only start with a letter, `_` or `-`. - * Dashes are easier to type than underscores. - * It kind of resembles switches in UNIX commands (`gcc -O2 -Wall -emit-last`). + * Isso evita a ambigüidade com elementos. + * Uma classe CSS apenas pode iniciar com a letra `_` ou `-`. + * Dashes são mais fáceis de digitar comparado ao underscore. + * É parecido com switches nos comandos do UNIX (`gcc -O2 -Wall -emit-last`). -How do you deal with complex elements? Nest them. +Como você lida com elementos complexos? Aninhe-os. [Continue →](nested-components.md) From 618d68abf2f91b9e3b4ea978502e9b0bd42e05e6 Mon Sep 17 00:00:00 2001 From: Vitor Takara Date: Tue, 5 Mar 2019 20:53:43 -0300 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 17a1438..716a9d4 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ Qualquer CSS com mais de 1000 linhas ficará desconfortável. Você acabará se * "Para o que essa classe está sendo usada?" * "Se eu faço uma nova classe chamada `green`, haverá conflitos?" -**rscss** é uma tentativa de dar sentido a tudo isso. Não é um quadro. É 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. +**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) From 64c1680e2ae5579f4085ffb2546a8073199b4dfd Mon Sep 17 00:00:00 2001 From: Vitor Takara Date: Tue, 5 Mar 2019 21:00:47 -0300 Subject: [PATCH 3/5] Portuguese-BR translation added --- docs/translations.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/translations.md b/docs/translations.md index c018715..7e10bd2 100644 --- a/docs/translations.md +++ b/docs/translations.md @@ -6,3 +6,4 @@ Some unofficial translations are available courtesy of the community. - [Thai](http://rscss.in.th/) - [Japanese](http://qiita.com/kk6/items/760efba180ec526903db) - [Spanish](https://github.com/jameskolce/rscss-es) +- [Portuguese-BR](https://github.com/VitorTakara/rscss-ptbr) From 5cce7e243dd2d815e79e76ba76b07fe0d23d6f80 Mon Sep 17 00:00:00 2001 From: Vitor Takara Date: Tue, 5 Mar 2019 21:03:00 -0300 Subject: [PATCH 4/5] Update translations.md --- docs/translations.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/translations.md b/docs/translations.md index c018715..7e10bd2 100644 --- a/docs/translations.md +++ b/docs/translations.md @@ -6,3 +6,4 @@ Some unofficial translations are available courtesy of the community. - [Thai](http://rscss.in.th/) - [Japanese](http://qiita.com/kk6/items/760efba180ec526903db) - [Spanish](https://github.com/jameskolce/rscss-es) +- [Portuguese-BR](https://github.com/VitorTakara/rscss-ptbr) From eaa4ff56f80c826c13cfd5bc15f79c1c4463756e Mon Sep 17 00:00:00 2001 From: Vitor Takara Date: Tue, 5 Mar 2019 21:03:26 -0300 Subject: [PATCH 5/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 716a9d4..4f17217 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -##### Visitando isso pelo GitHub? Visite o website para melhor experiência. **[rscss.io →](http://rscss.io)** +##### Visitando pelo GitHub? Visite o website para melhor experiência. **[rscss.io →](http://rscss.io)** ----