Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maratdev/fraemwork
Стартовый шаблон для frontend разработки
https://github.com/maratdev/fraemwork
Last synced: 13 days ago
JSON representation
Стартовый шаблон для frontend разработки
- Host: GitHub
- URL: https://github.com/maratdev/fraemwork
- Owner: maratdev
- Created: 2016-08-23T13:55:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-08T15:01:47.000Z (about 8 years ago)
- Last Synced: 2024-11-07T01:20:55.138Z (2 months ago)
- Language: CSS
- Homepage:
- Size: 371 KB
- Stars: 0
- 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 / - плагин, альтернатива полос прокрутки;