Ответы пользователя по тегу HTML
  • Bootstrap не для bootstrap дизайна?

    AleksFront
    @AleksFront
    Frontend Developer
    Вопрос наверное должен стоять по другому.
    Нарисован ли дизайн вообще под какую либо сетку. Если дизайнер соблюдал определнные правила (отступы, размеры колонок и т.д. ) можно сделать на бутстрап - если брать стили то там вообще много того что не потребуется особенно если дизайн не под UI бутстрапа.
    1. Дизайнер рисовал по сетке ( пусть и сам которую придумал ) скачиваете исходники sass / less подключаете к проекту нужные ( предположительно в данном случае только grid - и его зависимости ). Дальше в переменных указываете стандарты которые использовал дизайнер. Но это при том, что дизайнер добрый чел и рисовал по сетке все.
    2. Когда дизайн откровенно не по сетке, сразу желательно предупредить заказчика о том, что сетки нету, определенных стандартов нету. Вариант А - получит не соответствие по отступам ( имею ввиду речь о пиксель в пиксель - не возможна ). Вариант Б - получите бутстрап используете только сетку так же, но для себя в дизайне выделяете приемущественный стандарт под который будете костамизировать сетку, т.е. блоки в котрых сетка одинаковая - выделяете их по максимум и делаете под нее сетку бутстрапа. Для остальных ручками ( + согревая уши дизайнера ) дописываете сами.

    Выбираете из двух зол меньшее, но сколько работаю - очень редко попадаются макеты под UI бутстрапа. Много всего отсеивается и по сути получаешь только привычну сетку ( как альетрнатива можно сгененрировать ее на сайте бутстрпа и не париться и не тащить весь css / js, а только сетку. ) Так и делаю в основном :)
    Ответ написан
    Комментировать
  • Как сохранить сайт картинкой?

    AleksFront
    @AleksFront
    Frontend Developer
    joxi.ru установить плагин для браузера. Можно делать как область сайта так и всю страничку.3496779b84fa4ed480bc6b8ab429ad22.png
    Ответ написан
  • Какие есть неписаные правила организации верстки?

    AleksFront
    @AleksFront
    Frontend Developer
    Сейчас перехожу на сборщики проектов и можно так сказать, только блогадаря им наврное понял всю прелесть модульности проектов. Очень удобно полезно и т.д. Особенно когда делаешь шаблоны скажем под определную систему ( cms, сборку на фреймворке и т.д.) Перекидываешь модульные частик кода вместе с стилями, определенным html и js.

    app/
    -bower_components
    -/less
    --main.less
    -/js
    --main.js
    -/img
    --/icons
    -/fonts
    -/tpl
    --такой подход позволяет мне перекидывать оформление различных блоков с проекта на проект.
    --/header
    ---*.html
    ---*.js
    ---*.less
    --/footer
    ---*.html
    ---*.js
    ---*.less
    --...
    --/search
    ---*.html
    ---*.js
    ---*.less
    -index.html
    -...
    -inner-page.html
    dev/
    -тут не сжимаем картинки, не уменьшаем скрипты и т.д. Просто работаем, так как сжатие и т.д. порой замедляет процесс.
    build/
    -тут после окончания определенного этапа спринта и т.д. Сжатую версию кидаем на продакшен.
    Такой метод наглядно отражает, куда надо зайти что бы поправить тот или иной модуль. Но думаю не каждому это подойдет, бывают специфические проекты. Там затачиваемся под проект :)
    Ответ написан
    Комментировать
  • Не стандартый размер контейнера div?

    AleksFront
    @AleksFront
    Frontend Developer
    Самый простой способ: codepen.io/anon/pen/MaGOdx
    Дальше круче: css.yoksel.ru/css-and-svg-masks - через маску svg можете хоть любую завертеть фигуру :)
    Ответ написан
    Комментировать
  • Как в HTML в таблице строки (tr) можно сделать ссылками?

    AleksFront
    @AleksFront
    Frontend Developer
    Я бы дополнил так.

    <table class="linkRow">
        <tr data-href="http://example.com"> // все же html 5 сочтет это куда более приемлемым вариантом :)
            ...
        </tr>
    </table>
    
    <script>
    ...
    $('body').on('click', '.linkRow tr', function(e){
        e.prevenDefault; // на случай если вместо <tr> кто то захочет поставить поставить <a href="#"><tr>
        document.location.href = $(this).data('href');
    })
    ...
    </script>


    Но лучше знать задачу полностью, так как тег tr не обладает css свойствами близким к тегу a, что порой не обходимо. И в таких случаях лучше воспользоваться, примером их но не всегда актуально.
    Ответ написан
    1 комментарий