Giter VIP home page Giter VIP logo

nunjucks-frontend-template's Introduction

Шаблон для сборки фронтенда с использованием БЭМ, Scss с шаблонизацией Nunjucks.

Назначение файлов и папок

app/                           # Ресурсы проекта
  blocks/                      # - cтатические сниппеты из html, добавляемые в шаблоны и страницы
  components/                  # - библиотека БЭМ-компонентов проекта (как правило, .html + .scss + .js)
    example/
        example.html
        example.js
        example.scss
  fonts/                       # - директория шрифтов проекта
  html/                        # - список страниц проекта
  images/                      # - директория картинок фронтенда
  js/                          # - глобальные и вспомогательные скрипты, которые не относятся к компонентам
    common.js                  # - общие инициализации скриптов для сайта
    constants.js               # - глобальные js-переменные, использумеые в разработке
    helpers.js                 # - переиспользуемые функции всего проекта
  layouts/                     # - шаблоны html-страниц
  scss/                        # - глобальные стилевые файлы 
     base/                     # - базовые стили для всего проекта
         fonts.scss            # - подключение и задание правил шрифтов
         mixins.scss           # - перечень примесей
         print.scss            # - стили для печати
         page.scss             # - стили для корневого элемента страницы (базовый лейаут)
         reset.scss            # - сброс стилей по умолчанию
         scaffolding.scss      # - общие стилевые правила для проекта
         svg_sprite.scss       # - описание классов для использования svg из спрайта в качестве background-image
         variables.scss        # - описание используемых переменных
     partials/                 # - стили для библиотек и независимые сниппеты, не относящиеся к компонентам
     style.scss                 # - главный стилевой файл для импорта всех остальных
  ajax.pages_list.php          # - файл работает только на сервере, формирует список страниц на основе файлов в /html
  data.json                    # - тестовые массивы данных, используемые в вёрстке
  dinamic-links.js             # - скрипт, который работает только на сервере. Получает список страниц от ajax .pages_list.php и вставляет меню по страницам
  favicon.ico                  # - фавиконка
  script.js                      # - основной диспетчер скриптов проекта
build/                         # Папка сборки, отсюда сервер транслирует файлы.
loaders/                       # Скрипты, используемые для копирования и преобразования файлов при командах сборки

Удобное создание нового компонента

Предусмотрена команда для быстрого создания файловой структуры нового компонента (БЭМ-блока).

# формат: node createComponent.js ИМЯКОМПОНЕНТА [доп. расширения через пробел]
node createComponent.js block-1 # создаст папку компонента, block-1.html, block-1.scss и подпапку img/ для этого компонента в папке /app/components
node createComponent.js block-2 js pug # создаст папку компонента, block-2.html, block-2.scss, block-2.js, block-2.pug и подпапку img/ для этого компонента

Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.

Описание команд сборки:

  • start - дев-сборка статической верстки в папке frontend_checkout
  • build - сборка статического фронтента из frontend_checkout в папку build

nunjucks-frontend-template's People

Contributors

ururustaru 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.