Ответы пользователя по тегу HTML
  • Как быстро верстать (нужен совет как быть дальше)?

    Препроцессоры на полную мощь (попробуйте jade для html), gulp, библиотека снипетов, опыт, опыт и ещё раз опыт.

    Так же важно: мощный компьютер, хорошие мониторы в достаточном количестве удобное рабочее место и позволяющая состредоточиться атмофера.

    Ну и самое главное:
    846381d51bb74da8b80e2558501ceb5e.png

    Позиционируйте себя, находите своего клиента.
    Быстро хотят все, но есть и те кто понимает, что лучше подождать немного дольше и получить готовый, кроссбраузерный, качественный продукт. Чем кривую поделку, которую потом в 2 раза дольше править.
    Ответ написан
    3 комментария
  • Верстать без фреймвороков это значит быть не професионалом?

    Верстаем мы всегда с макета.
    Я не говорю о таком кейсе как собрать админку из компонентов бутстрапа по прототипу - это как раз самое правильное его использование.

    Так вот от макета мы очень сильно зависим.
    Если дизайнер потрудился хотя бы использовать сетку, то сетка и система breakpoints из Botstrap (4 версия, на scss) нам очень поможет. Если дизайнер идиот - не поможет ничего.

    В моем шаблоне проекта сетка и брекпоинты есть по умолчанию. Так же как некоторые helper-классы.

    Что касается остальных компонентов (типографика, таблицы, формы, кнопки и т.д.) - всегда нужно задавать вопрос, что проще/лучше: стилизовать свою кнопку или переопределить имеющиеся.

    Насколько классы предлагаемые бутстрапом впишутся в общий стиль проекта?

    Насколько мы облегчим поддержку проекта, перекостылив под дизайн половину того что взяли от бутстрапа, а 2/3 проекта написав своими стилями?

    Я видел как по дефолту суют
    bootstrap.min.css
    bootstrap-theme.min.css
    bootstrap.min.js
    потом в отдельном файле переопределяя и дописывая все что нужно. Целый мать его bootstrap.min.js из которого использовалось только меню-бутерброд!

    Видел целую коллекцию костылей, перемотанную изолентой чтобы было как в дизайне.

    И что, насколько я новичёк и максималист с моей библиотекой миксинов (документированных, в т.ч. из бутстрапа), scss файлами, разнесенными по блокам и BEM-подходом к наименованию классов?
    С опрятным css на выходе и инструкцией-рекомендацией как и зачем всё же использовать препроцессоры.

    Таким образом, присоединяюсь к ответам Сергей и Serj-One . Каждой задаче - свой инструмент.
    А поддерживать легко не столько код где использовался фреймворк (особенно в контексте css), а код, где использовалась голова.

    P.S. Вот ещё достойное мнение например:https://gist.github.com/iAdramelk/d328b73c72cab92ef95f
    Ответ написан
    Комментировать
  • Где найти такой плагин?

    Это имитация input[type=range]
    Гуглите "range slider"
    Ответ написан
    Комментировать
  • Нет плавной анимации. поможете?

    Возьмите готовый
    Ответ написан
    Комментировать
  • Что значит "опыт верстки под битрикс, вордпресс и т. д."?

    Тут 2 варианта:

    1. Заказывают верстку, подразумевают создание шаблона/темы для CMS. По хитрости, по не знанию, по глупости - не важно. Важно не подписаться пилить это по цене только верстки.

    Верстка - это когда макет превращается в набор html/css/js файлов.

    Да, могут быть вариации. Может быть сразу под движок: Smarty, Twig, Jade, или все шаблоны в Handlebars, или сразу чтобы всё под Angular было. Но это всё частные случаи, требующие более высокой квалификации, или находящиеся уже где-то во front-end разработке.

    2. Просят учесть особенности CMS.

    Маленьких нюансов может быть много.

    Вот Битрикс, например, и его Эрмитаж (тыкнул в блок - тут же его отредактировал если по простому). Где-то лишняя обертка элемента, чтобы в режиме редактирования не разваливалось. Везде - z-index меньше 1000, чтобы Эрмитаж не перекрывало.

    Wordpress вообще генерирует огромное количество своих классов. Взять те же навигационные меню. Использовать их = наплевать на все эти ваши БЭМ и прочее.
    И т.д.

    Если я верстал и без проблем натягивал свои макеты на Wordpress - могу ли сказать что у меня есть опыт верстки под Wordpress?

    Могу.
    Так же как могу сказать что есть опыт верстки под Drupal (не знаю натягивали ли какие-то из моих работ на Drupal, но чё бы нет).

    Правда нет гарантии что человек, который будет натягивать мою верстку, не затупит например с
    .nav
        .nav__list
            .nav__item

    Когда ему движок выдаст меню в виде
    .menu
        ul
            li

    Но я не считаю это своей проблемой.
    Когда понадобилось, оказалось нет ничего сложного 1 раз потратить время и написать свой вывод меню в Wordpress, чтобы можно было любую верстку натянуть. Почему так не может сделать тот кто натягивает? Почему в ТЗ об этом не предупредили?

    Уменьшает ли "опыт верстки под CMS" время верстки?
    Если не были оговорены нюансы (те же меню WP) - то нет.
    Может увеличиться время натягивания верстки на движок, но это уже проблемы заказчика, который не озвучил требования заранее.

    Таким образом, хотя в идеале на движок должно быть возможным натянуть любую верстку, действительно некоторые имеют CMS особенности.
    Об этих особенностях следует договариваться заранее. Должно быть конкретное ТЗ на верстку.
    В остальном как правило речь об "опыте верстки под %CMS%" - просто болтовня.
    Ответ написан
    Комментировать
  • Как настроить javascript плагин?

    $(function(){
      $('.circlestat').circliful();
    });


    Вот у вас инициализация плагина по document ready. Остальной код приведенный в вопросе не нужен.

    Замените на инициализацию при прокрутке.

    https://www.google.ru/#newwindow=1&q=javascript+wh...
    Ответ написан
    Комментировать
  • Как вы оцениваете стоимость и время верстки?

    Стоимость - по времени, время - по опыту.
    Ответ написан
    Комментировать
  • Как в input type="number" добавить % после числа?

    Input Text
    + кнопочки
    + js чтобы это все оживить
    Ответ написан
    4 комментария
  • За и против Bootstrap?

    Сетка от бутстрапа (4 версии, в scss) отлично помогает в вёрстке любых проектов, которые рисовала не обезьяна, а дизайнер понимающий что такое сетки и как это все работает.

    Верстальщиков втыкающих в любой проект полный набор бутстрапа и занимающихся переопределением его стилей (речь о сильном перепиливании, а не о настройке переменных) и накостыливанием чтобы все это было похоже на макет - считаю грязными извращенцами.

    Если личный кабинет несёт сугубо утилитарную роль и лишь бы работал, без претензий на уникальность и всякий там маркетинг, то взять готовый ui - отличная и экономичная идея.
    Ответ написан
    Комментировать
  • Способы генерации нескольких спрайтов?

    Соответствующий плагин под Gulp / Grunt и немного заморочиться с конфигами.
    Мой сборщик смотрит на папку sprites. Каждая папка внутри неё - отдельный спрайт, название папки - название спрайта и префикс для его переменной в scss.

    Речь разумеется о сборке спрайтов из отдельных картинок.
    Ответ написан
    4 комментария
  • Шрифты или картинки для иконок что оптимальнее?

    Учитывая кроссбраузерность и кроссплатформенность, а так же удобство редактирования - потенциальных проблем со шрифтами больше всего.

    Создание svg-спрайта с генерацией fallback для не поддерживающих svg браузеров легко автоматизируется.
    Для иконок с градиентами, тенями и т.д. так же не сложно делать png-спрайты с версиями под ретину.

    Если устраивает поддержка браузерами - svg symbols. Это все преимущества спрайтов + все преимущества шрифтов.

    Так что, на мой взгляд, в топку шрифты. В проектах не использую их принципиально.
    Ответ написан
    3 комментария
  • Кто-нибудь уже задумывался сделать страницу полностью на svg?

    А как этот сайт в будущем поддерживать?
    Как это порезать на шаблоны и натянуть на движок?
    Как быть с индексацией, кроссбраузерностью, клиентскими скриптами?

    Сайт долже работать, а тут разве что одноразовое дизайнерское безумство может получиться.
    И в обычных сайтах этого безумства хватает :(
    Ответ написан
    1 комментарий
  • Насколько вы используете flexbox? Почему нет?

    Не использу, так как в ТЗ как правило пишут ie9+ :(
    Ответ написан
    3 комментария
  • Почему не работает gulp-combine-media-queries?

    Он поломался с новой нодой и что-то не чинится.
    Попробуйте https://www.npmjs.com/package/gulp-group-css-media...
    Ответ написан
    3 комментария
  • Как правильно делать спрайты под ретину?

    Стили для обычных экранов должны содержать:
    background-size
    background-position
    width и height иконки
    и background-image

    Стиль для retina-экрана переопределяет только background-image.
    В этом случае, при точном совпадении спрайтов, все будет работать.
    Ответ написан
  • Почему localstorage сохраняет только один вариант?

    При каждом запуске пишется один и тот же href в localStorage, с чего бы ему меняться
    Ответ написан
    5 комментариев
  • Как менять css-файл с помощью JS и возвращать изначальное значение?

    Ну возьмите текущее значение атрибута и в зависимости от него сделайте что нужно.

    var link = document.getElementById("styleBright"),
        href = link.getAttribute('href');
    
    if(href == 'css/style.css') {
        // do something
    } else if (href == 'css/style2.css') {
        // do something
    }
    Ответ написан
    Комментировать
  • Как грамотно темизировать/верстать плагины для Вордпресс?

    .plugin-name .selector-a {
    // styles
    }
    .plugin-name .selector-b {
    // styles
    }
    Ответ написан
    Комментировать
  • Как отцентрировать radio input?

    Да, вы неправильно используете grid.
    Колонки должны быть - в строках. Одна строка - не более 12 колонок.
    .row
        .col
            .row
                .col
                .col
        .col


    Для начала разделите блок на 2 колонки: с адресом и с формой.
    Затем внутри колонки с формой уже делайте новые колонки (не забывайте что они в бутстрапе в процентах от родителя).

    Что касается расположения радиобаттонов по центру - добавьте к их родителю (form-group) класс со свойством text-aligh: center.

    UPD: если имеете в виду центрирование по вертикали, то добавьте радио свойство vertical-align: top
    Ответ написан