Frontstarter

a frontend development template

View project on GitHub

Frontstarter — это шаблон для вёрстки сайтов с нуля. Его цель — ускорить и упорядочить процесс преобразования макетов в код.

Frontstarter состоит из двух частей: самого шаблона (каталог blank), а также набора типовых решений (каталог add-ins).

Frontstarter задумывался как очень простой инструмент, поэтому для работы нужен только вебсервер с PHP. Тем не менее, предусмотрена возможность использовать Gulp для сборки стилей и скриптов.

Результат может быть выгружен в виде статических HTML-страниц; впрочем, можно использовать вёрстку и без них, как есть.

EN

Frontstarter is a boilerplate for quick creation of HTML pages from ground. It is aimed to speed-up and organize the process of turning design into code.

Frontstarter consists of two parts: a boilerplate itself (blank folder) and a set of typical solutions (add-ins folder).

Frontstarter is designed to be simple, so the only requirement is webserver with PHP installed. However, it is possible to use Gulp to build styles and scripts.

The result markup can be converted into HTML pages or be used as is.


  1. Содержимое-проекта
  2. Сборка стилей и скриптов
  3. Выгрузка html-страниц
  4. Размещение на сервере

1. Содержимое проекта

index.html                - оглавление страниц проекта  

Разметка:

*.php в корне проекта     - основная разметка страниц  
templates/*.php           - повторяющиеся фрагменты разметки  

Скрипты:

js/libs                   - сторонние библиотечные скрипты  
js/modules                - скрипты текущего проекта  
js/ie                     - заплатки для IE  

Стили:

css/libs                  - сторонние библиотечные стили  
css/modules               - стили текущего проекта  

Прочее:

classes/Mobile_Detect.php - предоставляет методы для определения типов устройств  
classes/Frontstarter.php  - добавляет антикэш для стилей и скриптов; позволяет выгружать html-страницы.  
build                     - сборщик стилей и скриптов (gulp)  
fonts                     - иконочные и обычные шрифты  

В особо крупных проектах могут также присутствовать:

js/pages/                 - скрипты для отдельных страниц  
css/pages/                - стили для отдельных страниц  
ui.php                    - набор типовых компонентов (ui kit)

pages указываются в build/gulpfile.js аналогично modules.

2. Сборка стилей и скриптов

Производится из папки build c использованием gulp.

Собранные файлы (в т.ч. их min-версии) попадают не в build, а в папки css и js:

js/libs.js                - скрипты из папки js/libs  
js/script.js              - скрипты из папки js/modules  
css/styles.css            - стили из папок css/libs и css/modules  

Установка необходимых модулей:

$ npm install

Сборка + слежение за изменениями:

$ gulp watch

Разовая сборка:

$ gulp css
$ gulp js

3. Выгрузка html-страниц

Если нужно получить страницы в виде .html вместо .php, можно сделать это следующим образом:

Способ А:

Запросить php-страницу с параметром: ?html
Обычно применяется, когда нужно выгрузить одну-две страницы.

Способ Б:

В templates/header.php: define('SAVE_HTML', true);
и запросить php-страницу как обычно.
Обычно применяется, когда нужно выгрузить много страниц сразу.

4. Размещение на сервере

Обычно применяется только для демонстрации проекта.

  1. в classes/Frontstarter.php: define('IS_PRODUCTION', true);
  2. переименовать main.php в index.php, а index.html удалить
  3. выгрузить на хостинг с версией PHP не ниже 5.3