https://github.com/maratdev/mini-lannd

https://github.com/maratdev/mini-lannd

Last synced: 13 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/maratdev/mini-lannd
• Owner: maratdev
• Created: 2016-12-15T19:07:08.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T19:10:49.000Z (about 8 years ago)
• Last Synced: 2024-11-07T01:20:57.174Z (2 months ago)
• Language: HTML
• Size: 224 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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


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


Gulp:





gulp-sass: Sass пакет;



gulp-util: Логирование, подсветка вывод в консоль;



browser-sync: Автообновление страницы во всех браузерах на всех устройствах при их изменение;



gulp-concat: Для конкатенации файлов (объединяет несколько файлов в один файл);



gulp-clean-css: Минимизация CSS;



gulp-rename: Библиотека для переименования файлов;



del: Библиотека для удаления файлов и папок;



gulp-imagemin: Библиотека для работы с изображениями (сжатие изобр. .JPG / .JEPG);



imagemin-pngquant: Библиотека для работы с изображениями (сжатие изобр. .PNG);



gulp-cache: Библиотека для кеширования;



gulp-autoprefixer: Автоматически расставляет префиксы к CSS свойствам;



gulp-file-include: Для вставки файла или кода в html;



gulp-remove-html: Удаляет HTML-код, когда файлы идут в сборку (в данном случае header.min);



gulp-remove-html: Библиотека mixin-ов для SASS;



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

```

CSS/SCSS:



	
Все Sass переменные размещайте в app/sass/_vars.sass;

	
Все CSS медиазапросы размещайте в app/sass/_media.sass;

	
Все CSS стили jQuery библиотек размещайте в app/sass/_libs.sass;

	
Все базовые стили (html, body, fonts, buttons, etc...) размещайте в app/sass/_base.sass;

	
В файле app/header.sass должны размещаться стили, предназначенные для отображения верхней части сайта на первом экране (на самых больших мониторах). Здесь отображаются стили как главной, так и всех внутренних страниц;



JavaScript:

В common.js находяться данные компоненты:



	
SVG Fallback

	
Плавная прокрутка к объекту

	
E-mail Ajax форма

	
Chrome Smooth Scroll (плавная прокрутка для Chrome);

	
Плавный скролл



Включеные в сборку библиотеки:





Animate.css  / - плагин для простого добавления анимации на страницы;



Bootstrap - Полная и облегченная (bootstrap-grid.min.css) версия Bootstrap.

				
В index.html подключена облегченная - только сетка, без JS и компонентов.



jQuery первой ветки;



Modernizr - библиотека, сканирует браузер на поддержку тех или иных свойств. Вместе с html5shiv (HTML5 в IE.)



Nicescroll 3  / - плагин, альтернатива полос прокрутки;