Skip to content

whatiskadudoing/Sass-7-1-structure

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Documentação

Este é um boiletPlate usando o Padrão de arquitetura 7-1 e seguindo as convenções do Sass.

O Padrão 7-1

O padrão de arquitetura de pastas 7-1 para Sass pensando por Hugo Giraude basicamente tem arquivos parciais em 7 diretórios, e um arquivo no diretório raiz(normalmente nomeado main.scss), responsável por importar todos os outros arquivos parciais para serem compilados em um único arquivo CSS.

      sass/
      │
      ├── abstracts/ (or utilities/)
      |   ├── _variables.scss    // Sass Variaveis 
      |   ├── _functions.scss    // Sass Functions
      |   ├── _mixins.scss       // Sass Mixins
      |
      ├── base/
      |   ├── _reset.scss        // Reset/normalize
      |   ├── _typography.scss   // Regras de tipografia 
      |
      ├── components/ (or modules/)
      |   ├── _buttons.scss      // Buttons
      |   ├── _carousel.scss     // Carousel
      |   ├── _slider.scss       // Slider
      |
      ├── layout/
      |   ├── _navigation.scss   // Navigation
      |   ├── _grid.scss         // Grid system
      |   ├── _header.scss       // Header
      |   ├── _footer.scss       // Footer
      |   ├── _sidebar.scss      // Sidebar
      |   ├── _forms.scss        // Formularios
      |
      ├── pages/
      |   ├── _home.scss         // styles especificos da pagina Home
      |   ├── _about.scss        // styles especificos da About
      |   ├── _contact.scss      // styles especificos da Contact
      |
      ├── themes/
      |   ├── _theme.scss        // Default theme
      |   ├── _admin.scss        // Admin theme
      |
      ├── vendors/
      |   ├── _bootstrap.scss    // Bootstrap
      |   ├── _jquery-ui.scss    // jQuery UI
      |
      `– main.scss              // Main Sass file

Base: Contém os arquivos de resets, variáveis, mixins e qualquer classe utilitária. Layout: Contém todo css que lida com o layout, exemplo container ou qualquer sistema de grid. Components: Reutilizáveis, como botões, navbars, cards e etc... Main: deve contém APENAS os imports dos arquivos acima.

Abstracts (or utilities): Contém Sass tools, helpers, variáveis, funções, mixins e outros arquivos de config. Esses arquivos são para os helpers que não produzem nenhum output e nenhum css quando compilados.

Base: Contém os códigos boilerplate para o projeto. Incluindo styles padrão como reset e regras de tipografia. Muito usados por todo o projeto.

Components (or modules): Contém todo os seus styles para botões, carousels, sliders, e componentes similares (pense widgets). Seu projeto normalmente vai contém uma punhado de componentes - já que o site/app deve ser composto por pequenos módulos.

Layout: Contém todos styles envolvidos com o layout do seu projeto. Como styles para o header, footer, navigation e o sistema grid.

Pages: Qualquer style especifico de uma página individual deve estar aqui. Por exemplo é muito incomum para a página inicial do seu site contém um style que nenhuma outra pagina recebe.

Themes: Este não é muito usado na maioria dos projetos. Poderia contém arquivos de projeto com temas específicos. Por exemplo se alguma sessão do seu site alterna o color schemes.

Vendors: Contém qualquer código de terceiros de alguma biblioteca externa ou framework - como por exemplo, Normalize, Bootstrap, JQueryUI, e etc. Apesar de sempre ter a necessidade de reescrever um código de terceiro. Se for necessário, é uma boa pratica criar outra pasta chamada vendors-extensions/ e depois nomeie qualquer arquivo de acordo com o arquivo de terceiro a ser reescrito. O arquivo filevendors-extensions;_boostrap.scss deveria contém todo o código que você subscrever do bootstrap - rescrever o arquivo de terceiros diretamente, normalmente não é uma boa ideia.

 Main.scss:
      Este arquivo deve conter apenas os seus imports! Por exemplo...

                @import 'abstracts/variables';
                @import 'abstracts/functions';
                @import 'abstracts/mixins';

                @import 'vendors/bootstrap';
                @import 'vendors/jquery-ui';

                @import 'base/reset';
                @import 'base/typography';

                @import 'layout/navigation';
                @import 'layout/grid';
                @import 'layout/header';
                @import 'layout/footer';
                @import 'layout/sidebar';
                @import 'layout/forms';

                @import 'components/buttons';
                @import 'components/carousel';
                @import 'components/slider';

                @import 'pages/home';
                @import 'pages/about';
                @import 'pages/contact';

                @import 'themes/theme';
                @import 'themes/admin';

Não existe a necessidade de incluir o _ ou extensão .scss quando importando.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages