Ответы пользователя по тегу Вёрстка
  • Как бы вы оценили свёрстанный сайт портфолио?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    В целом выглядит симпатично.
    Все завернуто в тег main. это семантически неправильно.
    Логотип внесен в общее меню, это вроде и не ошибка, но при интеграции с любой цмс будут проблемы.
    Адаптив выглядит так, как будто мета тега viewport нет, хотя он есть.
    Меню не прячется в бутерброд. Возможно вы скажете, что оно и так влазит, но это первый признак совсем начинающего, сам таким был.
    Вы кое где используете сетку бутстрап, но не до конца понимаете как она работает, поэтому пишите лишние классы. например col-md-6 col-lg-6. В этом месте класс col-lg-6 лишний, так как делает ровно то же, что col-md-6, потому что бустстрап мобайл-фест. А там где одна колонка не нужен ни row ни col-12.
    Не понял я смысл скроллов в карточках, выглядит намного хуже, как если бы где то было больше или меньше контента.
    методАлогия))
    Ответ написан
    Комментировать
  • Стоит ли делить css на несколько файлов для продакшена в 2020 году?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Мой первый сборщик из какого-то урока собирал два файла - минифицированные все стили и минифицированные скрипты. Достаточно быстро я понял, что это неподдерживаемая хрень и на всякий случай стал собирать это в двух вариантах - миниф и обычное. Дальше больше. Я отделил весь чужой код от своего и получил уже комплект из libs.min.css, libs.min.js, main.css, main.min.css, common.js, common.min.js. В файле с либами скриптов первым шел самый свежий jquery и собственно он заставил меня снова модифицировать сборку. Так как я часто работаю с вордпресс, я столкнулся с несовместимостью последней версии jquery с некоторыми плагинами. теперь у меня еще и отделено от jquery, для того, чтобы я мог использовать любую версию.

    Добавлю ещё. Если имеем сайт на wp, то независимо от того сколько моих css файлов ещё куча будет системных, часть из которых можно отключить и у каждого плагина будут свои. Тут решений немного, нужно ставить плагин типа autoptimize, который склеит весь css в один файл и минифицирует его
    Ответ написан
    Комментировать
  • Преимущества вордпресс для landing page?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Для статичного сверстанного лендинга wordpress как по мне не нужен. Разве что для формы обратной связи, которую вам придется для статики настроить самому, но это не так сложно, используем класс PHPMailer, обучалок по нему масса.
    Для статики есть админки для изменения контента, например интересный проект Textolite
    Ответ написан
    Комментировать
  • Ограничить ширину содержимого fluid контейнера?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    <footer class="page-footer">
    	<div class="container">
    		Content
    	</div>
    </footer>

    .page-footer {
    	background-color: teal;
    }
    Ответ написан
    Комментировать
  • Как оформить первые две карточки?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Если нужно менять не только стили но и структуру, то для цикла добавляете счётчик, ставите проверку на первые два итема и для них выводите другую разметку, а для остальных стандартную
    <?php if ( have_posts() ) : $ir = 0; while ( have_posts() ) : the_post();
    
      if ( $ir == 0 || $ir == 1 ) {
        get_template_part( 'template-parts/article-wide' );
      } else {
        get_template_part( 'template-parts/article' );
      }
    
    $ir++; endwhile; endif; ?>
    Ответ написан
    2 комментария
  • Как сделать первый пост во всю ширину wordpress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Если вы используете готовую тему, то сначала нужно создать дочернюю тему.
    Если тема ваша - то не обязательно.
    Найдите шаблон, который используется для вывода записей.
    Переопределите его в дочерней теме или правьте в вашей.
    Для того чтобы вывести первый пост другой версткой можно воспользоваться счетчиком:

    <?php if ( have_posts() ) : $ir = 0; while ( have_posts() ) : the_post();
    
    	if ( $ir == 0 ) {
    		get_template_part( 'template-parts/article-wide' );
    	} else {
    		get_template_part( 'template-parts/article' );
    	}
    
    $ir++; endwhile; endif; ?>
    Ответ написан
    Комментировать
  • Как осуществить такие ползунки в css и html?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Как по мне это у вас не ползунки, а прогресс бары в виде ползунков, судя по тому что в них написано
    Ответ написан
    Комментировать
  • Как сделать масштаб в верстке?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Если абсолютно все размеры задать в rem, то вы можете менять масштаб изменяя лишь размер базового шрифта для html
    Ответ написан
    Комментировать
  • Должен ли верстальщик реализовывать переключение языка страницы?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    если сайт потом будет сажаться на cms, то чаще всего мультиязычность реализуется плагином, плагинов много, у всех переключатель языка разный. Под всех не застилишь, поэтому достаточно оформить как в макете, работать оно не должно, все равно потом переделывать
    Ответ написан
    Комментировать
  • Что можно посоветовать новечку для обучения фронтенду?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Можете предложить начать с интерактивных курсов HTML Academy
    https://htmlacademy.ru/courses
    Ответ написан
    Комментировать
  • Как сделать блоки в шахматном порядке?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Как вариант вертикальные колонки, в каждой по 2 фото и через один смещение в разные стороны
    Ответ написан
    Комментировать
  • Итог натяжки верстки на вп и создания темы на вп один и тот же?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Как мне представляется, создание темы это нечто более глобальное, чем просто натяжка верстки. В теме надо предусмотреть оформление всех возможных страниц, которые пользователь захочет создать, будь то запись блога, архив блога, просто страница, 404 итд. В зависимости от направленности темы могут создаваться кастомные типы записей, например отзывы. Настройки темы опять же, чтобы пользователь мог менять шрифты, бекграунды итд. Какие-то оформления для стандартных элементов, например несколько видов кнопок.
    Если тема на продажу, то она должна еще и соответствовать кодексу и пройти валидацию.

    А натяжка сайта на движок это чаще всего когда есть уже утвержденный дизайн, который не будет особо меняться и настроек там ровно столько сколько нужно для дизайна. Никто не будет делать 4 варианта футера при просто натяжке, а в теме может быть такое предусмотрено. При посадке лендинга (хотя никогда не понимал для чего лендингу нужна админка) можно вообще ограничиться одной страницей, нужное для редактирования вывести через метаполя, ну еще 404. Остальные шаблоны никогда не будут использоваться.

    Как-то так. Это больше мое ИМХО, возможно я не прав
    Ответ написан
    Комментировать
  • Как верстать многостраничные сайты с использованием однотипных блоков?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Я тоже периодически задаюсь похожим вопросом. И если для html вполне можно пользоваться копипастом или, например, gulp-rigger в сборщике, то со стилями вечная проблема. Особенно если макеты страниц добавляются постепенно. И особенно если гадкий дизайнер не придерживается какой-то системы. И ты делал например блок features на главной и классы обзывал подобным образом и тут бац! Появляется страница features с похожими но отличающимися элементами. И в большинстве случаев проще скопипастить стили и немного изменить и код разрастается, разрастается...
    Bem хороший помощник, если адекватный дизайнер, и в макете реально есть реиспользуемые блоки.
    Фишку с добавлением дополнительного класса часто использую. Это в сторону бем, но не так глобально
    Ответ написан
    Комментировать
  • Swiper slider создает дубликаты слайдов, что делать при использовании лайтбокса?

    AntonLitvinenko
    @AntonLitvinenko Автор вопроса
    HTML coder
    Мне данное решение немного не подошло (я не смог прикрутить к нему опции для видео итд), но в принципе оно рабочее, по крайней мере из того что смог найти, может кому пригодится:
    $('.product-tab-gallery').each(function() {
    
      var items = [];
      var $gallery = $(this);
      // Get links
      $gallery.find('a.imageitem').each(function() {
        items.push($(this).attr('href'));
      });
    
      var uniqueItems = [];
    
      // Remove duplicates
      $.each(items, function(i, el) {
        if($.inArray(el, uniqueItems) === -1) {
          uniqueItems.push(el);
        }
      });
    
      items = [];
    
      // Put in Magnific format
      $.each(uniqueItems, function(i, el) {
        items.push({
          src: el,
          type: 'image'
        });
      });
    
      // Assign an index to each link so the clicked one is shown first
      $gallery.find('a.imageitem').each(function() {
        var $a = $(this);
        $.each(items, function(i, el) {
          if (el.src == $a.attr('href')) {
            $a.data('index', i);
            return;
          }
        });
      });
    
      $gallery.on('click', 'a.imageitem', function(e) {
        e.preventDefault();
        var $a = $(this);
        $.magnificPopup.open({
          type: 'image',
          items: items,
          gallery: {
            enabled: true
          }
        });
    
        $.magnificPopup.instance.goTo($a.data('index'));
    
      });
    
    });
    Ответ написан
    Комментировать
  • Адаптация дизайна под ширину устройства - работа дизайнера или верстальщика?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Если дизайнер не предоставил мобильный макет, то верстальщик делает на свое усмотрение. В большинстве случаев верстальщику это удобнее. Хороший ВЕБ-дизайнер (не иллюстратор) должен понимать минимально принципы верстки и поток документа, систему колонок итд. К сожалению, постоянно сталкиваюсь с тем, что дизайнер далек от того, как работает верстальщик. Да, я согласен, сверстать можно все что угодно, но перо дизайнера, которое смещает элемент драг-енд-дропом за секунду часто выливается в лишних полчаса работы.
    Самое печальное, что почти всегда дизайн главнее чем здравый смысл, почти всегда дизайн апрувают до того, как верстальщик на него посмотрел. Крик души, блин...
    Ответ написан
    Комментировать