GithubHelp home page GithubHelp logo

tolyandimov / pepelac Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alexsoin/pepelac

0.0 0.0 0.0 2.39 MB

PEPELAC - Современный инструментарий для вёрстки и создания статичных сайтов с использованием vitejs

License: MIT License

Shell 3.84% JavaScript 8.51% TypeScript 2.49% SCSS 17.36% Twig 67.81%

pepelac's Introduction

template engine - twig node.js vite bootstrap sass javascript

PEPELAC - frontend boilerplate

logo

PEPELAC - Современный инструментарий для вёрстки и создания статичных сайтов.

Используются современные инструменты для разработки сайтов, возможно использование как typescript, так и javascript кода. При использовании vscode будут предложены к установке дополнения, помогающие придерживаться единой стилистики кода при командной разработки.

Требования к окружению

  • node.js
  • git

Установка

1. Клонирование и инициализация

Скачайте файлы с github или клонируйте его c помощью команды:

git clone https://github.com/alexsoin/pepelac.git

Инициализация проекта(Работает только в UNIX системах)

./init

2. Установки зависимостей проекта

Для установки зависимостей проекта необходимо в командной строке ввести команды:

npm i

Если требуются дополнительные пакеты, то для их установки нужно выполнить команду:

  • Установка пакета, при этом информация о нём, автоматически прописывается в секцию "devDependencies" файла " package.json"
npm i -D название_пакета
  • Установка пакета, при этом информация о нём, автоматически прописывается в секцию "dependencies" файла "package.json"
npm i название_пакета

Как использовать окружение

  • npm run dev - запуск live-server
  • npm run build - сборка проекта
  • npm run lint:script - линтинг скриптов
  • npm run lint:style - линтинг стилей

Чтобы исправить ошибки линтинга запустите команду с дополнительным параметром -- --fix

Список инструментов

Окружение, предназначенное для разработки фронтенд проекта, построено на базе следующих инструментов:

  • node.js (среды, в которой будет выполняться окружение);
  • npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки плагинов и фронтенд пакетов);
  • popover, bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);

Файловая структура проекта

├── .vscode/                   # дополнительная конфигурация редактора vs code
│   ├── extensions.json        # список рекомендуемых дополнений
│   └── settings.json          # настройки среды
├── init                       # инициализатор проекта
├── dist/                      # скомпилированный код проекта, готовый для размещения на сервере
├── public/                    # статические файлы проекта (изображения, видео и т.д.)
├── src/                       # исходники
│   ├── assets/                # ресурсы, используемые в проекте (изображения, шрифты и т.д.)
│   │   ├── fonts/             # шрифты
│   │   └── img/               # изображения
│   ├── data/                  # массивы данных для вывода значений в twig файлах
│   │   └── site.js            # файл для вывода данных
│   ├── scripts/               # js файлы
│   │   ├── helpers/           # вспомогательные js файлы
│   │   ├── index.js           # точка входа js файлов
│   │   └── main/              # js файлы проекта
│   ├── styles/                # scss файлы
│   │   ├── helpers/           # вспомогательные scss файлы
│   │   ├── index.scss         # точка входа scss файлов
│   │   └── main/              # scss файлы проекта
│   │       ├── base.scss      # пользовательские стили
│   │       ├── fonts.scss     # подключение шрифтов
│   │       └── variables.scss # переменные стилей
│   ├── templates/             # шаблоны и куски кода
│   │   ├── layouts/           # шаблоны страниц
│   │   └── partials/          # подключаемые куски кода
│   └── views/                 # twig файлы страниц проекта (преобразуются в html)
│       ├── 404.twig           # страница ошибки 404
│       ├── index.twig         # главная страница
│       └── ui.twig            # список страниц сайта
└── vite.config.ts             # конфигурационный файл vitejs

src/scripts/

В папке js находится файл index.js, который является входной точкой для js файлов.

При сборке проекта, все импорты внешних зависимостей(таких как boostrap) будут собираться в единый файл index.js который после сборки будет находиться в папке dist/assets/js/.

src/styles/

Папка scss отведена под стили. В данной папке находятся следующие файлы:

  • index.scss - импорты файлов, содержимое которых необходимо включить в итоговый файл стилей
  • main/base.scss - используется для написания своих стилей
  • main/variables.scss - содержит SCSS переменные, с помощью которых будем изменять стили bootstrap, а также использовать его для создания своих переменных
  • main/fonts.scss - подключаются шрифты, используемые на сайте
  • helpers/bootstrap.scss - подключаются boostrap зависимости

src/views/

В данной папке находятся страницы проекта в формате twig, которые после сборки преобразуются в html.

Файл index.twig - это главная страница создаваемого проекта, 404.twig - шаблон страницы ошибки, а файл ui.twig используется для отображения списка всех страниц проекта с ссылками на них.

Кроме index.twig в данную директорию можно поместить и другие twig файлы из которых будут созданы html страницы.

src/templates/

Папка layouts/ содержит общие шаблоны, используемые в большинстве страниц приложения. Эти шаблоны определяют общую структуру страницы.

В папке partials/ содержатся небольшие куски верстки, которые могут быть использованы и переиспользованы в различных частях сайта. Они включают в себя элементы пользовательского интерфейса, такие как кнопки, формы, меню, header, footer и т.д.


Logo vituum

powered by vituum

pepelac's People

Contributors

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