Шаблон для быстрого старта верстки. Проект заморожен.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintrc.json
.gitignore
.htaccess
README.md
gulpfile.js
package.json
yarn.lock

README.md

Andylight

Шаблон для быстрого старта верстки.

Как начать?

У вас должны быть установлены:

Далее выполняем:

yarn
gulp build

После выкачивания всех зависимостей проекта и успешной первичной сборки, запустите задачу gulp или gulp serve и можете приступать к работе.

Что включено?

  • BrowserSync
  • компиляция jade и sass
  • сжатие стилей, скриптов (ES2015) и изображений
  • проверка javascript-кода на наличие ошибок (eslint)

BrowserSync

Задача gulp serve откроет вкладку в браузере, и в консоли вы увидите local и external пути до вашего проекта. Так вы сможете отлаживать верстку сразу в нескольких браузерах и устройствах.

Jade

В папке src/jade расположены шаблоны для генерации. После выполнения задачи gulp jade в корне проекта появятся html-файлы, которые будут результатом компиляции из вышеуказанной папки с исходниками.

По умолчанию имеется один index.jade, в котором импортируются includes/head.jade, includes/header.jade и includes/footer.jade. Их стоит использовать в других подобных создаваемых шаблонах.

Файлы, расположенные в папке src/jade/includes, не компилируются.

Стили

Все стили находятся в папке src/sass. Gulp собирает их в один файл main.min.css и кладет в папку dist/css.

Все делится на логические блоки (файлы). Если вы хотите добавить еще один, создайте новый sass-файл и подключите его в main.sass.

Вы можете активировать плагин gulp-uncss, чтобы убрать ненужные стили (см. файл gulpfile.js: задача sass-build).

Стоит придерживаться единому стилю написания кода, чтобы обеспечить высокую скорость разработки и поддерживаемость ваших проектов.

Postcss

В шаблоне для изменения скомпилированного css-кода используются плагины Postcss.

  • autoprefixer (автоматически проставляет браузерные префиксы)
  • cssnano (сжимает css-код)

Изображения

За сжатие изображений отвечает задача gulp images (в том числе gulp webp). Вы можете вызывать ее самостоятельно, либо запустить gulp, и после этого каждый файл изображения, размещенный в src/img (включая svg), будет сжат и положен в dist/img с тем же именем. Также используется генерация WebP-изображений. Их можно использовать так:

html:

<picture>
	<source srcset="dist/img/image.webp" type="image/webp">
	<img src="dist/img/image.jpg">
</picture>

css (вместе с modernizr):

body
    background-position: center center
    background-attachment: fixed

.no-webp body
    background-image: url(#{$img}/bg-main.jpg)

.webp body
    background-image: url(#{$img}/bg-main.webp)

Вы можете использовать систему символов SVG. Эти символы описываются единожды в самом начале документа (для этого заводится один скрытый тег svg), а затем их можно использовать повторно где-либо на страницах, менять их заливку, размер, применять трансформации (поворот и др.), а также анимировать какие-либо значения (fill и др.) с помощью transition или применять сложную анимацию на основе keyframes.

Пример:

...
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
        <symbol id="icon-test" viewBox="0 0 100 100">
            <path d="..."></path>
        </symbol>
    </svg>
    
	...
	
	<svg class="icon-test">
		<use xlink:href="#icon-test"></use>
	</svg>
	...

Для автоматизации процесса хорошо подходит плагин gulp-svgstore. Именно он используется в Andylight. Все иконки в виде скрытого svg автоматически добавляются в шаблон, располагаясь сперва в подключаемом js-файле, а затем встраиваясь в страницу. Просто кладите нужные иконки в папку src/img/svg/icons и используйте их на страницах с помощью конструкции svg use (задача gulp svgstore).

Favicons

Для генерации favicons вы можете пользоваться сервисом RealFaviconGenerator. Положите сгенерированные иконки в папку /src/favicons.

Дополнительная информация про иконки.

Скрипты

Для сборки ваших и сторонних модулей используется Browserify.

Все необходимые пакеты устанавливаются через yarn (yarn add package) и после этого их можно использовать у себя в коде. Например:

import _find from 'lodash/find';

Входная точка приложения - src/js/app.js.

Финальная сборка

После того, как вы закончили работу над очередной частью вашего проекта, выполните задачу gulp build, чтобы привести выходные файлы с правильное состояние. Так, например, вы добьетесь того, что js будет сжат и из него сборщик удалит карты кода.

Тестируем баги верстки

Откройте отладчик и выполните следующий код:

var a,w=document.createTreeWalker(document,NodeFilter.SHOW_TEXT);while(a=w.nextNode()){if(a.textContent.trim().length)a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'}

Это поможет вам увидеть, где что поехало, какие блоки сломались.

Код взят из статьи на Хабрахабре от 2ГИС.

Вы также можете воспользоваться расширением для Google Chrome.

Контакты

Если у вас имеются какие-либо вопросы или пожелания, пишите письма на nikbelikov@me.com или воспользуйтесь твиттером.

Лицензия

Copyright (c) 2014-2017 nikbelikov.ru

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.