Проект Vizavi
Карта прототипа
- СтраницаДесектопМобилыПланшетыСсылка на дизайн
- Главная страница app/templates/pages/main.html95%5%0%
- Партнерём app/templates/pages/partners.html98%5%0%
- Инвестору app/templates/pages/investor.html95%5%0%
- Торговый терминал app/templates/pages/trading-terminal.html95%5%0%
- Торговый счет app/templates/pages/trading-account.html99%5%0%
- О компании app/templates/pages/about.html99%5%0%
- Сохранность средств app/templates/pages/safety.html95%5%0%
- Регламентирующие документы app/templates/pages/documents.html99%99%99%
- Обратная связь app/templates/pages/contact-form.html99%99%0%
- Страница «Спасибо» app/templates/pages/contact-thanks.html99%99%99%
- Ошибка 404 app/templates/pages/404.html99%99%99%
- Типовая текстовая страница app/templates/pages/guideline.html
Как всё устроено и почему
Исходный код статичной версии лежит на GitHub: github.com/4enki/vizavi (закрытый репозиторий). Готовые к употреблению шаблоны расположены в корне проекта, точка входа в проект — файл index.html.
Кодовая база вёрстки построена на основе собстенного gulp-сборщика SPT. Базовая документация по структуре, шаблонам и использованию — описана в файле spt/README.md в корне проекта. Базовый набор слов и технологий: Nunjucks, SCSS, PostCSS, jQuery.
Отдельной про элементы со скошенными углами
Для части декоративных элементов со скошенными углами применён transform: skew(-20deg);, а для другой части элементов — clip-path. Чтобы не мучать других людей, которые будут заниматься проектом, оставляю ссылки, которые помогали мне:
- clippy — клёвый онлайн-инструмент для разметки точек для
clip-path - clip-path на MDN
- clip-path на сайте Can I use
- transform: skew на MDN
- transform: skew Generator
- transform: matrix Generator
SVG-графика через use
Превью можно посмотреть через сервис svgsymbolviewer.io, загрузиз файл app/templates/layouts/svg.symbols.html, предварительно сменив расширение на .svg.
Контакты и выходные данные
Ссылка на демо: http://vi.4enki.ru/. Базовая авторизация: tst/super54. Демо ссылка будет работать до сентября 2019 года.
Адрес эл.почты: yaglazov@gmail.com, остальные способы связи есть на 4enki.ru.
Важное замечание: пожалуйста, не забудьте указать для боевого сайта полный путь к икноках в файлах app/resources/browserconfig.xml и app/resources/manifest.json
Базовые UI-элементы
Кнопки
Кнопки включаются через класс .button, который может быть применёнк любому элементу, но лучше всего использовать <a> или <button>. В кнопку можно превратить ссылку, обычную кнопку и инпут (ну и на самом деле вообще всё). У кнопок существуют разные модификации.
<button type="button" class="button button-red">Вот-вот запустим</button><button type="button" class="button button-shadow">Вот-вот запустим</button><button type="button" class="button button-dark">Вот-вот запустим</button><button type="button" class="button button-light">Вот-вот запустим</button>Поля и элементы форм
Отдельные элементы форм кладутся в блок-родитель с классом .form-group. Внутри формы работает стандратная сетка. Страндартный класс для поля любого типа — .form-control. Для полей ошибок используется класс .has-error у родительского элемента .form-group.
<!-- begin .form-group -->
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Логин"
>
</div>
<!-- end .form-group -->Типографика и текстовые элементы
Базовые классы для текста
Текст справа
Немного текста для примера
<p class="text-right">Немного текста для примера</p>Текст по центру
Немного текста для примера
<p class="text-center">Немного текста для примера</p>Текст слева
Немного текста для примера
<p class="text-left">Немного текста для примера</p>Цвета текста
Класс для цвета .text-green
Класс для цвета .text-gray
Класс для цвета .text-red
Класс для цвета .text-blue