Initial commit

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+.idea
+*.ai
+*.log
+*.pdf
+*.psd
+*.sublime*
+node_modules/
+build/
+npm-debug.log*
+Thumbs.db

README.md

@@ -1 +1,56 @@
-# html-marketplace-1.0-uikit
+# html-marketplace-1.0-uikit
+
+**Типография**
+
+HTML заголовки, начиная с `<h1>` до `<h3>`, доступны к использованию. Если нет необходимости использовать именно
+теги, то для них есть классы `".h1"` до `".h3"`. Они отлично подходят для `<div>` или `<span>`.
+
+Для абзацев используется тег `<p>`. Если необходимо показать ошибку, то к нему добавляется класс `".error"`.
+Так же доступен тег `<caption>`, который предназначен для описания содерживания таблиц. 
+Если нужно просто отобразить похожий стиль в тексте,
+то для этого есть класс `".caption"`.
+
+**Поля**
+
+Для добавления обычного текстового поля используется `<input class="ui-input">`.
+Для добавления поля для Выбора из списка используется `<select class="ui-select">`, внутри которого находятся варианты внутри своих `<option>`. Если нужно
+сделать Выпадающий список, то вместо `".ui-select"` указываеться класс `".ui-select-custom"`.
+
+Кнопки добавляются с помощью тега `<button class="button">`. По умолчанию кнопка серая, но с помощью добавления дополнительного
+класса `".button--success"` её можно переопределить в зеленый цвет, подходящий для обозначения положительного выбора.
+
+Для добавления чекбокса/флажка используется конструкция на базе тега `<label class="option check">`. Внутри находится
+сам тег `<input class="check__input">`, тег `<span class="check__box">` для отображения кастомизированного внешнего вида, и
+`<span class="check__text">` для добавления текста выбора.
+
+Для добавления радиокнопки/переключателя используется конструкция на базе тега `<label class="option radio">`. Внутри находится
+сам тег `<input class="check__input">`, тег `<span class="check__box">` для отображения кастомизированного внешнего вида, и
+`<span class="check__text">` для добавления текста выбора.
+
+**Вкладки**
+
+Вкладки добавляются в блоки `<div class="tabs js-tabs">` или `<div class="tabs-border js-tabs">`.
+Шапка вкладок представляет собой список `<ul class="tabs__buttons">` или `<ul class="tabs-border__buttons">`.
+Пункты идут подряд друг за другом и являются элементами списка `<li class="tabs__button js-tabs-button">` или
+`<li class="tabs-border__button js-tabs-button">`. Активный пункт в шапке помечается классом `".b-active"`.
+Сам контент распологается в `<div class="tabs__items">` или `<div class="tabs-border__items">`, который разбит на несколько блоков
+`<div class="tabs__item js-tabs-item">` или `<div class="tabs-border__item js-tabs-item">`. Активный блок помечается классом `".b-active"`.
+Классы с префиксом `js-*` необходимы для инициализации и работы вкладок. Класс `".tabs"` и `".tabs-border"` отвечают за внешний вид. Количество пунктов должно
+быть равно количеству блоков с контентом.
+
+**Всплывающие окна**
+
+Для вызова всплывающего окна нужно добавить к кнопке `<button class="button">` класс `".js-popup-open"`. Чтобы кнопка открывала нужное окно, и в ней,
+и в самом окно указывается одинаковый `data-name`.
+Всплывающее окно представляет собой блок `<div class="popup js-popup-window b-hide">`, в котором находятся `<div class="popup__overlay js-popup-close">`
+для затемнения фона и `<dialog class="popup__body" open>`, что является самим окном.
+Заголовок распологается в блоке `<div class="popup__title">`, а контент в блоке `<div class="popup__content">`.
+Для закрытия окна используется кнопка `<button class="popup__close js-popup-close">`.
+Для взаимодействия с окном можно добавить блок `<div class="buttons">`, в который размещаются как одна, так и несколько кнопок `<button class="button">`.
+Для закрытия окна нажатием на них, так же используется класс `".js-popup-close"`.
+
+**Таблицы**
+
+Таблица добавляется тегом `<table class="ui-table">`. Навигация в таблице находится в подвале `<tfoot>` внутри блока `<div class="ui-table__pager">`.
+Элементы управления распологоются в `<div class="ui-table__buttons">` и добавляются с помощью `<a href="#" class="ui-table__link"><button class="ui-table__button" title=""></button></a>`.
+Для отображения количества страниц используется блок `<div class="ui-table__count">`.

gulpfile.js

@@ -0,0 +1,89 @@
+"use strict";
+
+const gulp = require("gulp");
+const del = require("del");
+const plugins = require("gulp-load-plugins")();
+const autoprefixer = require("autoprefixer");
+const mqpacker = require("css-mqpacker");
+const include = require("posthtml-include");
+
+gulp.task('clean', function () {
+    return del("./build");
+});
+
+gulp.task("copy", function () {
+    return gulp
+        .src([
+            "./source/fonts/**/*.{eot,ttf,woff,woff2}",
+            "./source/img/**",
+            "./source/index.html",
+        ], {
+            base: "source"
+        })
+        .pipe(gulp.dest("./build"));
+});
+
+gulp.task("styles", plugins.parameterized(function (args) {
+    return gulp
+        .src("./source/scss/uikit.scss")
+        .pipe(plugins.sass({outputStyle: "expanded"}))
+        .pipe(plugins.concat("uikit.css"))
+        .pipe(plugins.postcss([
+            autoprefixer(),
+            mqpacker({sort: true})
+        ]))
+        .pipe(plugins.if(args.params.production, plugins.csso({comments: false})))
+        .pipe(gulp.dest("./build/css"))
+}));
+
+gulp.task("scripts", plugins.parameterized(function (args) {
+    return gulp
+        .src("./source/js/uikit.js")
+        .pipe(plugins.include())
+        .pipe(plugins.concat("uikit.js"))
+        .pipe(plugins.babel({"presets": ["@babel/preset-env"]}))
+        .pipe(plugins.if(args.params.production, plugins.uglify()))
+        .pipe(gulp.dest("./build/js"))
+}));
+
+gulp.task("html", function () {
+    return gulp.src("source/*html")
+        .pipe(plugins.posthtml([
+            include()
+        ]))
+        .pipe(gulp.dest("./build"));
+});
+
+gulp.task("images", function () {
+    return gulp
+        .src("./source/img/**/*.{png,jpg,svg}")
+        .pipe(plugins.imagemin([
+            plugins.imagemin.optipng({optimizationLevel: 3}),
+            plugins.imagemin.jpegtran({progressive: true}),
+            plugins.imagemin.svgo()
+        ]))
+        .pipe(gulp.dest("./build/img"));
+});
+
+gulp.task("watch", function () {
+    gulp.watch("./source/scss/**/*", gulp.series("styles"));
+    gulp.watch("./source/js/**/*", gulp.series("scripts"));
+    gulp.watch("./source/*.html", gulp.series("html"));
+});
+
+gulp.task("build", gulp.series(
+    "clean",
+    "copy",
+    "styles",
+    "scripts",
+    "html",
+    "watch"
+));
+
+gulp.task("production", plugins.parameterized.series(
+    "clean",
+    "copy",
+    "styles --production",
+    "scripts --production",
+    "html"
+));