• Как правильно верстать такие сайты?

    это обычная png картинка, сверху которой положен слой свг, в котором отлавливается hover и производится вся "магия"
    Ответ написан
    Комментировать
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .header - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан
    2 комментария
  • Как в figma объединить сразу несколько изображений?

    kubris
    @kubris
    Верстка сайтов, натяжка на модх
    Object => Group selection (Ctrl+G) - объединить в группу и экспортировать в нужном формате.

    Object => Flatten selection (Ctrl + E) - объединить несколько svg частей и экспортировать, как одно.

    Если Ctrl+E не активно и Ctrl+G тупит (такой способ не работает, если компонент вложен в какой-либо другой фрейм), надо скопировать все части svg-шки и вставить их в новый документ (File => New design file), потом объединить через Ctrl+G или Ctrl+E - и экспортировать, как нужно.
    Ответ написан
    Комментировать
  • Макеты для очень начинающего верстальщика?

    сам придумывай - это же элементарно
    в ином случае игнорируй все, что касается JS
    Ну и верстальщик без JS - не верстальщик
    Верстка это как два пальца, можно за неделю-две научиться всему что надо и потом постигать остальное на практике.
    Лучше сразу с JS работай. И даже не думай о jQuery, только посмей притронуться к библиотеке, не научившись нативному JS. Я прослежу.
    Ответ написан
    6 комментариев
  • Почему Gulp не создаёт в папке DIST, папку IMG?

    @aspirantes
    Мне кажется у вас изображения не добавлены в наблюдатель, вот здесь
    function watchFiles(params) {
    gulp.watch([path.watch.html], html);
    gulp.watch([path.watch.css], css);
    }


    и в экспорт, здесь
    exports.fonts = fonts;
    exports.html = html;
    exports.css = css;
    exports.build = build;
    exports.watch = watch;
    exports.default = watch;
    Ответ написан
    Комментировать