design studio_one page template

Дизайнерская студия одностраничная шаблон - архивировано

Плоский и отзывчивый шаблон веб -сайта, разработанный CSSauthor и закодированный Maxim Orlov.

Демо: http://website-templates.github.io/design-studio_one-page-template

Макет продукта, созданный с http://frame.lab25.co.uk/

Содержимое

• Структура папки и файла
• Требования:
  • EditorConfig
• Как начать
• Конфигурация сайта
• Задачи
  • Уборка
  • Девчонка
  • Строить
  • Восстановить
  • Сервер
  • Спрайт
• Живая перезагрузка
• Лицензия

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

 ./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   └── aliases.js
│   |
|   └── task.js
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * body scripts
|   │
|   ├── sass/                                  * sass preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.sass
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.sass
|   │   ├── noscript.sass
|   │   └── screen.sass
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

Требования

• Node.js
• Строить ситом: grunt или gulp
• Необязательно:
  • EditorConfig

EditorConfig

Этот проект имеет файл .editorConfig в корне. Он описывает стиль отступления, запекающие пробелы и т. Д. См. Подробнее здесь

Как начать

Если вы раньше не использовали Gulp, обязательно ознакомьтесь с руководством по началу работы, также проверьте эти Recips

Перед началом вам необходимо установить NPM , а также Gulp во всем мире.

Несколько простых шагов для начала:

• Установите зависимости от package.json , работая: npm install .
• Запустите задачи из приведенного ниже списка и начните разрабатывать!
• Редактировать общие настройки в dev/data/config.json См. Раздел конфигурации сайта

Конфигурация сайта

В этом шаблоне мониля используются шаблоны моника с внешними конфигурациями данных. Основные настройки можно найти в файле dev/data/config.json . И они доступны для использования в шаблонах с config.key-name

Задачи

Здесь приходят группы задач с некоторыми объяснениями

Уборка

Удалить заполнители из рабочих каталогов. Gulp: gulp cleanup

• Удалить файлы gitkeep

Девчонка

Задача разработчика со статическим сервером. Gulp: gulp dev

• Пандл Javascripts
• Скомпилируйте таблицы стилей
• Добавить префиксы поставщика в CSS
• Объединить медиа -запросы в файлах CSS
• Скомпилируйте шаблоны мопса
• Синхронизация помощников и других активов
• Синхронизированные изображения
• Запустить BrowserSync Static Server с Live Reload с помощью
• Следите за изменениями и запустите задачу DEV

Строить

Строительство задачи. Gulp: gulp build

• Минимизировать изображения
• Минифицируйте файлы JavaScript
• Минифицируйте таблицы стилей
• Минифицировать HTML
• Запустить BrowserSync Static Server

Восстановить

Регенерируйте и создайте проект, выполняя все задачи. Gulp: gulp rebuild

• Пандл Javascripts
• Скомпилируйте таблицы стилей
• Добавить префиксы поставщика в CSS
• Объединить медиа -запросы в файлах CSS
• Скомпилируйте шаблоны мопса
• Синхронизация помощников и других активов
• Синхронизированные изображения
• Минимизировать изображения
• Минифицируйте файлы JavaScript
• Минифицируйте таблицы стилей
• Минифицировать HTML

Сервер

Запустите сервер, не наблюдая за изменениями. Gulp: gulp server

• Запустить BrowserSync Static Server

Живая перезагрузка

Этот проект использует BrowserSync в качестве статического сервера с включенным и настроенным параметром Live Reload.

Лицензия

Грань