Giter VIP home page Giter VIP logo

sass-7-1-structure's Introduction

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.

sass-7-1-structure's People

Contributors

kadueng avatar whatiskadudoing avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.