HTML5 Starter — сборка Oleksii Myronenko

Используется ViteJS. Тестировалось на node.js 20.15.0

Начало работы

Для работы с данной сборкой в новом проекте, склонируйте все содержимое репозитория
git clone <this repo> Затем, находясь в корне проекта, запустите команду npm i, которая установит все находящиеся в package.json зависимости. После этого вы можете использовать любую из предложенных команд сборки (подробнее - ниже, в разделе npm-скрипты).

Структура папок и файлов

├── .core/                        # Системная папка проекта
│   ├── scripts/                  # папка с системными скриптами
│   │   ├── clear.js              # скрипт очистки проекта от демо данных
│   │   └── zip.js                # скрипт создания архива из файлов проекта
├── public/                       # Все файлы для публичного доступа
│   ├── fonts/                    # директория со шрифтами
│   ├── images/                   # директория с изображениями
│   │   ├── favicons/             # директория с favicon изображениями
│   │   └── og-image.jpg          # обложка сайта для социальных сетей (1200x630px)
│   └── partials/                 # директория с подключаемыми файлами html
├── src/                          # Исходники проекта
│   ├── js/                       # Скрипты
│   │   ├── components/           # js-компоненты
│   │   ├── functions/            # js функции
│   │   ├── _vars.js              # файл с переменными проекта
│   │   ├── _functions.js         # файл с готовыми функциями на js
│   │   ├── _components.js        # файл с подключениями компонентов
│   │   └── app.js                # Главный скрипт
│   ├── scss/                     # Стили сайта (препроцессор sass в scss-синтаксисе)
│   │   ├── abstracts/            # директория с подключением стилей и переменными проекта
│   │   ├── base/                 # базовые стили
│   │   ├── components/           # scss-компоненты
│   │   ├── functions/            # функции
│   │   ├── mixins/               # директория для сохранения готовых scss-компонентов
│   │   ├── pages/                # директория для стилей страниц
│   │   ├── vendors/              # директория для хранения локальных css-стилей библиотек
│   │   └── style.scss            # Главный файл стилей
└── index.html                    # Главная страница проекта
└── package.json                  # файл с настройками сборки и установленными пакетами
└── package-lock.json             # файл с настройками сборки и установленными пакетами
└── .editorconfig                 # файл с настройками форматирования кода
└── vite.config.js                # файл с настройщиком сборки
└── CHANGELOG.md                  # файл с информацией о изменениях в проекте
└── LICENSE.md                    # файл с информацией о лицензии
└── README.md                     # документация сборки

Оглавление

1. npm-скрипты
2. Работа с HTML
3. Работа с CSS
4. Работа с JavaScript
5. Работа со шрифтами
6. Работа с изображениями

npm-скрипты

Проект позволяет вызывать нужные системные npm скрипты через командную строку / терминал.

• npm run dev — базовая команда, которая запускает проект в режиме разработки.
• npm run build — команда, запускающая продакшн-версию сборки.
• npm run preview — команда, запускающая локальный предпросмотр продакшн-версии сборки.
• npm run clear — очистить проект от демо данных.
• npm run zip — команда собирает ваш готовый код в zip-архив.

Работа с HTML

Lorem ipsum...

Работа с CSS

Lorem ipsum...

Работа с JavaScript

Lorem ipsum...

Работа со шрифтами

Lorem ipsum...

Работа с изображениями

Lorem ipsum...

Автор: Алексей Мироненко (https://mrnko.com)

Изменения в версии 0.0.4 (от 30.06.2024)

• Добавлена директория .core с системными файлами проекта.
• Добавлен скрипт сброса демо данных проекта по команде npm run clear.
• Добавлен скрипт создания архива из файлов проекта по команде npm run zip.
• Добавлена документация к проекту.
• Добавлена страница 404.html в корневой папке проекта.
• Добавлен файл public/partials/page-not-found.html.
• Добавлен класс .fluid для SASS компонента container.
• Добавлен пользовательский класс .tablet-only для опеределния устройства пользователя.
• Добавлена директория src/scss/pages для подключения специфических стилей для страниц.
• Добавлен файл src/scss/pages/_page-not-found.scss для подключения стилей страницы 404.
• Изменена структура проекта.
• Изменена структура JS скриптов и улучшен функционал скриптов.
• Изменены файлы проекта и добавлены комментарии.
• Изменены названия пользовательских классов: .is-mobile и .is-desktop на .mobile-only и .desktop-only.
• Изменен файл public/partials/head.html
• Удален файл src/scss/abstracts/placeholders