Ответы пользователя по тегу CSS
  • Как написать masonry сетку без сторонних плагинов?

    Evanre
    @Evanre
    Front-end developer
    Если не подходят колонки, то выводите посты в 3 разных блока. Выставляете эти блоки в ряд. Все. (если нет возможности вывести блоки нужным порядком и в контейнерах, есть простенький легковесный плагин salvattore, который сделает это за вас).

    Если нужен подход как у оригинального плагина от desandro. Самостоятельно писать смысла нет. Слишком долго + требует значительных знаний js. Есть более легковесные варианты:
    Shuffle и quicksand. Они помимо самой сетки еще умеют сортировать\фильтровать элементы (как Isotope).
    Ответ написан
    Комментировать
  • Настройка окружения для front end?

    Evanre
    @Evanre
    Front-end developer
    На хабре есть одна полезнейшая статья, на которой учился сам.
    Статья относительно старая, но именно она мне в свое время "открыла глаза". У меня на полном серьезе после ее прочтения было такое же выражения лица, как у пацана на картинке)) Прошло 2 года но моя сборка фронта принципиально не изменилась. npm, gulp, sass, и т.д. Для сборки чисто фронта использую свой Blank-project, который изначально вышел из этой статьи.

    Все зависит от поставленных задач и того, под что вы собираете фронтенд. Я например сейчас в 90% случаев собираю его под WordPress, поэтому вместо html сходу использую php и т.д..
    Ответ написан
    Комментировать
  • Верстка сайта, возможно ли так организовать структуру и переходы(в описании) ??

    Evanre
    @Evanre
    Front-end developer
    Не могу сказать точно, может такие варианты и есть, но js в любом случае нужен. Самый простой вариант сделать что-то вроде табов. При клике по ссылке прятать остальные блоки, и показывать текущий (в css по умолчанию скрываем все секции и показываем первую). Вариант на jquery:

    $('.menu-item a').on('click', function(e)) { // Событие клика по ссылке в меню
    	e.preventDefault(); // Отменияем действие ссылки по умолчанию (переход по ссылке)
    	var section = $(this).attr('href'); // id нужного контейнера (#section-1)
    	$('.sections').slideUp(); // Скрываем все секции
    	$(section).slideDown(); //Показываем нужный контейнер
            // Можно использовать любой вариант скрытия показа в jquery - slide, fade, show\hide
    });

    А вообще, будь я на вашем месте, для меня это был бы отличный случай посидеть и нормально разобраться с Ajax'ом.
    Ответ написан
    1 комментарий
  • Как грамотно сделать date- и timepicker?

    Evanre
    @Evanre Автор вопроса
    Front-end developer
    Решил проблему с помощью отличного плагина Flatpickr. Он делает именно то что мне было нужно: плагин детектит мобильные устройства и для них подставляет нативный инпут. Очень гибкие настройки, поддерживает и пикер дат и времени.
    Надеюсь, кому-то пригодится.
    Ответ написан
    Комментировать
  • Вертикальное центрирование inline-block колонок с text-align:justify в сетке (БЕЗ flexbox)?

    Evanre
    @Evanre
    Front-end developer
    Извините, а чем Вам FlexBox не угодил? Есть прекрасная сетка на нем, я даже форкнул на SASS, использую в работе ее уже год. Умеет все то, что Вам нужно и даже больше С префиксами у него сейчас отличная поддержка. Если так нужна поддержка совсем старых браузеров, есть отличный полифил для IE8-9. Все же слишком малый процент людей сейчас использует откровенно старые браузеры, чтобы ради них мучать остальных лишними костылями вроде псевдоклассов и трансформов.
    Ответ написан
    2 комментария
  • Можете помочь с flexbox'ом?

    Evanre
    @Evanre
    Front-end developer
    Первый рисунок это поведение флексбокса (выравнивания контента) по умолчанию (justify-content: flex-start), то что у вас получается это скорее всего justify-content: center; Чтобы получить еффект как на первом рисунке (элементы заполняли собой в ряду все пространство и выравнивались по левому краю) уберите контейнеру justify-content: center; и дайте элементам равную ширину (например если их 4шт в ряду то по 25% каждому и т.д.) либо пропишите элементам (не флекс контейнеру) свойство flex-grow: 1;. Вот ссылка на песочницу, можете поиграться в ней, помогает понять, как работает флексбокс.
    Ответ написан
    Комментировать
  • Как подгружаются изображения на adidas.ru?

    Evanre
    @Evanre
    Front-end developer
    Ничего особенного не заметил, если Вы говорите о подгрузке увеличенных изображений, то используется библиотека EasyZoom, которая использует lazy load подгрузку увеличенных изображений (в картинке помимо src с обычного размера фоткой еще передается дата атрибут с ссылкой на фотку большого размера ).
    Ответ написан
    Комментировать
  • Горизонтальное меню в одну строку смещение активного элемента относительно остальных?

    Evanre
    @Evanre
    Front-end developer
    Если делать правильно, то только с помощью бекенда. Сервер уже должен отдавать менюшку, где первым пунктом будет стоять нужная меюшка с активным классом, ну или хотя-бы просто с активным классом. Если получится второй вариант, то с помощью js просто переместить пункт в начало либо css (display: flex + order: -1). Городить костыли и определять с помощью js на какой странице Вы находитесь - не есть хорошо. Это можно сделать, но будет говнокод. Нужно больше вводных данных, ссылка, какой бекенд и т.д.
    Ответ написан
    Комментировать
  • Как без костылей сделать так, чтобы footer сайта всегда был внизу?

    Evanre
    @Evanre
    Front-end developer
    Тут много хаков на flexbox включая Sticky footer.
    Ответ написан
    Комментировать
  • Как отследить логику подключения js и css в шаблоне wordpress?

    Evanre
    @Evanre
    Front-end developer
    1. ВК Аналитика настроена криво.
    2. Устраните ошибки в js коде, с ними сайт в принципе работать не будет. У меня даже прелоадер на главной не удалился.
    3. Оптимизируйте загрузку скриптов: уберите не нужное, по максимуму опустите все скрипты из шапки в футер. Читайте доки по wp. Ищите функцию wp enqueue script в теме, там есть аргумент который определяется в каком месте сайта будет грузиться скрипт, так же оберните скрипты в в условные операторы, например если скрипт нужен только на главной то используйте что-то вроде этого:
    if ( is_front_page() ) {
        wp_enqueue_script( $handle, $src, $deps, $ver );
    }


    Этот сайт Вам очень пригодится wp-kama.
    Ответ написан
    5 комментариев
  • Как фиксить высоту на iphone?

    Evanre
    @Evanre
    Front-end developer
    Нужно повесить не большой скрипт на событыие ресайза окна. Код звучит примерно так: При каждом событии ресайза окна взять высоту документа и присовить это значение высоте блока.
    Рабочий пример тут.
    Сам код js
    window.addEventListener('resize', function() {
    		var container = document.getElementById('block');
    		container.style.height = window.innerHeight + 'px';
    	}); // Listen for resize
    Ответ написан
    Комментировать
  • Можно ли как-нибудь починить overflow у svg path?

    Evanre
    @Evanre
    Front-end developer
    Дело не в overflow. Сам svg объект выходил за рамки артборда codepen. Откройте иллюстратор и там посмотрите.
    Ответ написан
  • "Норматив верстки", какой он?

    Evanre
    @Evanre
    Front-end developer
    Имхо, посылайте такого заказчика в увлекательное "трех-буквенное" путешествие легкой пешей походкой. Не стоит этот человек Вашего времени. Он всегда найдет к чему придраться, он никогда не будет уважать Ваш труд.

    Развивайтесь лучше профессионально, прокачивайте скилы, учите JS. Хороший фронт разраб сейчас берет в среднем 100 баксов за одну уникальную страницу, за лендинг больше. Что касается почасовки - от 10 баксов\час. На апворке фронты пишущие на js-фреймворках начинаются от 30\час. Это без TeamViewer'a, Скайпа и прочих извращений. Максимум - прога апворка, которая делает скрины каждые 5 минут, но это только при почасовке.

    Вот Вам пример с собственного опыта. Нарисовался заказчик. Сделать сайт с представлением услуг по продаже и установке заборов и прочего, около 18 страниц, пару сингл продуктов, архив, услуги главная в виде лендинга. Все как положено. Все должно наполняться из админки. Ну я потратил время, посчитал фронт + бекенд (дизайн был), написал ТЗ. По деньгам выходило примерно 950$ (Чтобы Вы понимали, зарубежные заказчики платят за такой функционал минимум в 2 раза больше). Он отказался, сказал дорого, рассчитывал не дороже 800. Ну я отказался сперва, потом через пару дней понял, что в данный момент работы другой нет и написал ему что соглашаюсь на его условия. Он ответил что если что напишет. Прошел месяц, я вчера ради интереса решил загуглить название его фирмы. И что Вы думаете? Убогий лендинг на бесплатном домене. Вместо полноценного сайта ему сделали кривой статический (index.html) лендос. Про то что творится в инспекторе я промолчу....
    Ответ написан
    Комментировать
  • Плагин для Intellij Idea для извлечения значений и ресурсов из psd для ускорения верстки?

    Evanre
    @Evanre
    Front-end developer
    Плагина не знаю, могу посоветовать для верстки, Avocode. Тоже самое что описанный выше Zeplin, но мне больше нравится.
    Ответ написан
    1 комментарий
  • Как на twitter bootstrap сделать так, чтобы одна колонка имела фиксированную ширину в пикселях, а остальные были резиновыми?

    Evanre
    @Evanre
    Front-end developer
    С этим прекрасно справится flexbox layout. Можно либо ручками для конкретного блока сделать (что приоритетно, если Вы уже используете другие фреймворки), либо взять flexboxgrid (раздел Auto-Width).
    Ответ написан
    Комментировать
  • Как сделать такое меню?

    Evanre
    @Evanre
    Front-end developer
    Конкретно в Вашем примере на Envato обычный постраничный лендинг. Это не меню. Но если Вам нужно именно большое меню то ищите в гугле по запросу megamenu.
    Ответ написан
    Комментировать
  • Как изменить длину select относительно выбранного option?

    Evanre
    @Evanre
    Front-end developer
    Нативный селект, никак. По крайней мере без js - либо фиксированный width, либо auto по самому длинному option.
    Если с js то есть 2 варианта либо что-то такое, либо сторонняя js\jquery библиотека вроде такой.

    ps. Кстати а зачем Вам это? Кому нужен прыгающий select на странице? Если у Вас есть селект в котором куча option разной длинны, и Вам не нужен длинный select - просто ограничте его width. Тогда сам select будет нужной длинны, а список с option подстроится по самому длинному элементу.
    Ответ написан
    Комментировать
  • Как реализовать нормальное отображение картинки как фона на любом разрешении?

    Evanre
    @Evanre
    Front-end developer
    Пробуй разные свойства для background. Все очень индивидуально, зависит от картинки (ее размера и соотношения сторон). Картинка становится слишком большой, потому что, по всей видимости, ее соотношение сторон близится к квадрату (1:1 ли 4:3 например) a у cover стоит задача заполнить картинкой всю площадь. Либо обрежь ее, либо найди в более высоком разрешении (с соотношением сторон 16:9 например).
    Лучше смогу помочь если накидаете пример в codepen либо дадите ссылку на проект.
    Ответ написан
    Комментировать
  • Плохое отображение шрифтов на сайте без сглаживания, как победить?

    Evanre
    @Evanre
    Front-end developer
    Если на 7ке все отображается хорошо, и прописан font-smooth, то все должно быть в порядке. У меня и на 7ке шрифты криво отображались, пока в самой системе не настроил сглаживание.

    Другие шрифты отображаются лучше? Попробуйте временно поставить Roboto с Google Fonts, если с ним лучше, то либо меняйте шрифт, либо ищите\покупайте нормальную версию этого.
    Ответ написан
    Комментировать