Como organizamos o código front-end na CODELAND

Codeland? A Codeland é uma empresa de desenvolvimento web de Porto Alegre, conta com uma galera muito maneira e cheia de idéias, se um dia tiver de bobeira e quiser trocar uma idéia com a gente, sera muito bem bem vindo :D.

Estou trabalhando na Codeland a quase 5 meses e quando eu cheguei não existia muito bem definido como funcionaria a organização do front. Depois de algumas conversar e analises sobre qual seria a melhor forma de fazer isso chegamos a um set de ferramentas e metódologias que eu irei mostrar pra vocês nesse post.

 Começando

Começando pelo mais básico, assim é a organização nosso código e essas são as melhores práticas utilizadas para manter a consistência.

 “Best Pactrices” SCSS Syntax

 Ferramentas

 Sass

Para lidar com o CSS utilizamos Sass. Ele fornece uma infinidade de features na hora de lidar com CSS como: variáveis, mixins, placeholders, functions. e muito mais. Isso agiliza bastante o nosso trabalho e também ajuda muito na hora da organização.

 Slim

Como template engine usamos o slim, que em nossa opinião é a forma mais limpa e organizada de escrever html. Slim está para html como sass está para css, é simplesmente lindo!

Estrutura de pastas Como havia comentado, usamos atomic design como metodologia para organizar, e é de lá que tiramos nossa estrutura de pastas.

Folders

 Metodologias

Aqui totalmente caberia um novo post para ir a fundo em casa uma delas, então por hora escolhi deixar o link de um artigo do tableless para cada, assim se você se interessar pode dar uma conferida lá.

Bem um novo método para CSS — Thaiana Poplade

O que é Design Atômico? — Dani Guerrato

Frameworks Como framework base costumamos utilizar o já bastante utilizado bootstrap. Ele traz uma infinidade de components e estilos que são muito uteis, mas devem ser usados com sabedoria para no final das contas não ficar uma macarronada no código.

Concluindo Na stack de front-end procuramos estar sempre atualizados com o que há de mais novo, as melhores tecnicas para e, principalmente, o que facilita e nos ajuda para melhor desenvolver nossos projetos. Espero que esse texto possa ajudar você a conhecer alguma metodologia ou ferramenta nova, e que tenham gostado de conhecer um pouco de como funcionam as coisas aqui na Codeland!

 
4
Kudos
 
4
Kudos

Now read this

Material Design, Part 1 - O começo.

Vou começar uma série de posts sobre Material Design, onde eu pretendo abordar desde a história que motivou a criação, até os detalhes dessa linguagem visual. Esse primeiro post é uma breve história do que levou a criação do Material,... Continue →