Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrnko/mrnko-starter
HTML5 Starter
https://github.com/mrnko/mrnko-starter
css css-framework html html-starter html-starter-template javascript js sass sass-framework
Last synced: 1 day ago
JSON representation
HTML5 Starter
- Host: GitHub
- URL: https://github.com/mrnko/mrnko-starter
- Owner: mrnko
- License: mit
- Created: 2023-09-16T13:24:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-01T10:21:02.000Z (5 months ago)
- Last Synced: 2024-07-02T08:45:56.396Z (5 months ago)
- Topics: css, css-framework, html, html-starter, html-starter-template, javascript, js, sass, sass-framework
- Language: SCSS
- Homepage:
- Size: 3.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# HTML5 Starter — сборка Oleksii Myronenko
> Используется ViteJS. Тестировалось на node.js 20.15.0
## Начало работы
Для работы с данной сборкой в новом проекте, склонируйте все содержимое репозитория
`git clone `
Затем, находясь в корне проекта, запустите команду `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-скрипты](#npm-скрипты)
2. [Работа с HTML](#работа-с-html)
3. [Работа с CSS](#работа-с-css)
4. [Работа с JavaScript](#работа-с-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`
[](https://github.com/mrnko/mrnko-starter "Go to GitHub repo")
[](https://github.com/mrnko/mrnko-starter)
[](https://github.com/mrnko/mrnko-starter)