maratdev / fraemwork

Стартовый шаблон для frontend разработки

HTML5 Start Fraemwork - cтартовый шаблон для frontend разработки на html5

Что входит в сборку:

Gulp:

1. gulp-sass: Sass пакет;
2. gulp-util: Логирование, подсветка вывод в консоль;
3. browser-sync: Автообновление страницы во всех браузерах на всех устройствах при их изменение;
4. gulp-concat: Для конкатенации файлов (объединяет несколько файлов в один файл);
5. gulp-clean-css: Минимизация CSS;
6. gulp-rename: Библиотека для переименования файлов;
7. del: Библиотека для удаления файлов и папок;
8. gulp-imagemin: Библиотека для работы с изображениями (сжатие изобр. .JPG / .JEPG);
9. imagemin-pngquant: Библиотека для работы с изображениями (сжатие изобр. .PNG);
10. gulp-cache: Библиотека для кеширования;
11. gulp-autoprefixer: Автоматически расставляет префиксы к CSS свойствам;
12. gulp-file-include: Для вставки файла или кода в html;
13. gulp-remove-html: Удаляет HTML-код, когда файлы идут в сборку (в данном случае header.min);
14. gulp-remove-html: Библиотека mixin-ов для SASS;
15. vinyl-ftp: Автодеплой;

Таски Gulp:

• gulp: запуск дефолтного gulp таска (sass, js, watch, browserSync) для разработки;
• build: сборка проекта в папку dist (очистка, сжатие картинок, удаление всего лишнего);
• deploy: выгрузка проекта на рабочий сервер из папки dist по FTP;
• clearcache: очистка кеша gulp. Полезно для очистки кеш картинок и закешированных путей..

HTML:

```html //html code //преобразование телефонных номеров в ссылки в мобильных браузерах //автор, создатель сайта //автор, создатель сайта //Разрешать или запрещать роботам, приходящим на сайт, индексировать данную страницу

//Социальные плагины Facebook и Open Graph //URL-адрес изображения, который должен определить Ваш объект в графе для изображения. //Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Например, "IMDb". //Название вашего объекта, как он должен отображаться в графе, например фильм, "The Rock". //Одно-два предложения описания вашего объекта. //Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID в графе, например, "http://www.imdb.com/title/tt0117500/". //Тег локации.

//Меняем фон верхней панели браузера //Chrome, Firefox OS and Opera //Windows Phone //iOS Safari

<h3>CSS/SCSS:</h3>
<ol>
	<li>Все Sass переменные размещайте в <strong>app/sass/_vars.sass</strong>;</li>
	<li>Все CSS медиазапросы размещайте в <strong>app/sass/_media.sass</strong>;</li>
	<li>Все CSS стили jQuery библиотек размещайте в <strong>app/sass/_libs.sass</strong>;</li>
	<li>Все базовые стили (html, body, fonts, buttons, etc...) размещайте в <strong>app/sass/_base.sass</strong>;</li>
	<li>В файле <strong>app/header.sass</strong> должны размещаться стили, предназначенные для отображения верхней части сайта на первом экране (на самых больших мониторах). Здесь отображаются стили как главной, так и всех внутренних страниц;</li>
</ol>
<h3>JavaScript:</h3>
<p>В common.js находяться данные компоненты:</p>
<ol>
	<li>SVG Fallback</li>
	<li>Плавная прокрутка к объекту</li>
	<li>E-mail Ajax форма</li>
	<li>Chrome Smooth Scroll (плавная прокрутка для Chrome);</li>
	<li>Плавный скролл</li>
</ol>
<h3>Включеные в сборку библиотеки:</h3>
<ol>
<li><a href="http://daneden.github.io/animate.css/" target="_blank">Animate.css</a>  / - плагин для простого добавления анимации на страницы;</li>
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - Полная и облегченная (bootstrap-grid.min.css) версия Bootstrap.
				<br>В index.html подключена облегченная - только сетка, без JS и компонентов.</li>
<li><a href="https://jquery.com" target="_blank">jQuery</a> первой ветки;</li>
<li><a href="http://modernizr.com" target="_blank">Modernizr</a> - библиотека, сканирует браузер на поддержку тех или иных свойств. Вместе с html5shiv (HTML5 в IE.)</li>
<li><a href="https://github.com/inuyaksa/jquery.nicescroll" target="_blank">Nicescroll 3</a>  / - плагин, альтернатива полос прокрутки;</li>

</ol>