• Откуда Вы берете Графику сайты?

    vaux
    @vaux
    Курящий лыжник
    1. Рисуем ручками;
    2. покупаем на стоках типа graphicriver;
    3. берем из всяких freebies, которые дизайнеры выкладывают для свободного использования;
    4. заказываем на фриланс-биржах у иллюстраторов или техдизайнеров;
    5. находим дизайнера с нужным портфолио и заказываем графику у него напрямую.
    Ответ написан
    Комментировать
  • Замена содержимого и появление div при клике. Как реализовать?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Способов масса. Вот один из:

    HTML:
    <button class="js-button" data-toggle-text="Close">Open</button>
    <div class="js-container hidden">
    Some text here.
    </div>

    CSS:
    .hidden {
      display: none;
    }

    Если вы не используете jQuery в проекте, то посмотрите пример на чистом JavaScript:

    JavaScript: (Демо: codepen.io/anon/pen/EjzYpy )
    ;(function($D){
        var $button    = $D.querySelector('.js-button'),
            $container = $D.querySelector('.js-container');
      
        $button.addEventListener('click', function(e){
          var data = e.target.dataset,
              toggleText = $button.innerHTML,
              isVisible = $container.style.display == 'block';
          
          $button.innerHTML = data.toggleText;
          data.toggleText = toggleText;
          
          $container.style.display = isVisible ? 'none' : 'block';
        });
    })(document);

    Если используете jQuery, посмотрите следующий пример:

    jQuery: (Демо: codepen.io/anon/pen/MwdgEN )
    $(function(){
      var $button    = $('.js-button'),
          $container = $('.js-container');
      
      $button.on('click', function(){
        var toggleText = $(this).data('toggle-text');
        
        $(this).data('toggle-text', $(this).text())
               .text(toggleText);
        
        $container.toggleClass('hidden');
      });
    });
    Ответ написан
  • Правильно ли я верстаю?

    Apathetic
    @Apathetic
    Frontend
    адаптивить

    Есть простое слово "адаптировать". Не насилуйте язык.

    1) Правильно верстать так, чтобы потом другие могли понять, что вы там наверстали. Причин не использовать абсолютное позиционирование в данном случае я не вижу.

    2) только тогда

    4) Если вы имеете ввиду расстановку классов под "с помощью бутстрап сетки", то, наверное, и да и нет. Потому что адаптация - это не только сетка. Это сплошные нюансы в расстановке блоков и элементов, в их размерах, в типографике и так далее.

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

    должен ли я адаптивить под абсолютно любое пиксельное разрешение или же только под самые распространенные?

    Это в корне неверный подход. Если вдруг случилось так, что вы а) верстаете не по принципу mobile-first, б) не имеете в наличии дизайна мобильных версий, в) должны кровь из носу всё сделать самостоятельно, то подход, на мой взгляд, должен быть следующим: постепенно уменьшаете экран (не забывая и про высоту тоже), что-то поехало или стало выглядеть плохо - вносим соответствующие стили для этого конкретного разрешения. И так до самого минимума.

    На третий вопрос не отвечаю, потому что тема очень обширна. Нюансы верстки в одной статье и даже книге в принципе покрыть невозможно. Ну, разве что это будет очень большая книга. Жаль, такая устарела бы сразу после выхода. А правил хорошего кода по сети раскидано немеряно. Ну вот, например.
    Ответ написан
    Комментировать
  • Как верстать сайт если макет в jpg?

    peterzubkoff
    @peterzubkoff
    Откройте его в фотошопе и нарежьте слайсами — инструмент crop (хоткей «C»).

    habrahabr.ru/post/45948
    Ответ написан
    1 комментарий
  • Как изменить стиль сайдбара в Sublime Text?

    lazalu68
    @lazalu68
    Salmon
    Нажмите на Preferences -> Browse packages, попадете в папку Packages. В ней вам надо зайти в папку Theme - Default и найти файлик Default.sublime-theme. В этом файлике вам нужно править объекты у которых поле class соответствует маске sidebar_*

    Например так:
    ...
    {
        "class": "sidebar_container",
        // $base02:    #073642         
        "layer0.tint": [7,54,66],
        "layer0.opacity": 1.0,
        "layer0.draw_center": false,
        "layer0.inner_margin": [0, 0, 1, 0],
        "content_margin": [0, 0, 1, 0]
    },
    {
        "class": "sidebar_tree",
        "row_padding": [8, 3],
        "indent": 12,
        "indent_offset": 17,
        "indent_top_level": false,
        // $base2:     #eee8d5         
        "layer0.tint": [238,232,213],
        "layer0.opacity": 1.0,
        "dark_content": false
    },
    {
        "class": "sidebar_heading",
        // $base1:     #93a1a1         
        "color": [147,161,161],
        "font.bold": true,
        // $base3:     #fdf6e3         
        "shadow_color": [253,246,227],
        "shadow_offset": [0, 1]
    },
    {
        "class": "sidebar_heading",
        "parents":
        [
            { "class": "tree_row", "attributes": ["selected"] }
        ],
    
        "shadow_color": [160, 174, 192]
    },
    {
        "class": "sidebar_label",
        // $base01:    #586e75         
        "color": [88,110,117],
        "font.bold": false
        // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
    },
    {
        "class": "sidebar_label",
        "parents": [{"class": "tree_row", "attributes": ["selected"]}],
        // $base01:    #586e75         
        "color": [88,110,117]
        // , "shadow_color": [60, 60, 60], "shadow_offset": [0, 1]
    },
    
    {
        "class": "sidebar_label",
        "parents": [{"class": "tree_row", "attributes": ["expandable"]}],
        "settings": ["bold_folder_labels"],
        "font.bold": true
    }
    ...


    Только этот код не добявляйте, это код для светлого сайдбара xD

    Гляньте этот или этот

    Ах да, вы же хотите еще чтоб он вам тип файлика показывал)

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

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

    Вся моя писанина, кажется, не имела смысла - парень ниже дал ссылку на тему, которая по дефолту юзает иконки из вашего скрина)

    Кажется по дефолту только третий саблайм умеет юзать иконки, так что если у вас на втором саблайме их нет, то просто поставьте Sublime Text 3 и накатите на него эту тему . После установки темы может показаться что вам подсунули фальшивку и это гавно (которое вы поставили) следует срочно удалить. Я не знаю, зачем разработчик темы сделал это, но с самого начала она выглядит... немного странно. Инструкция как сделать из этой темы то, что вы видите на скринах, лежит там же, на гите.
    Ответ написан
  • В каком порядке верстаете?

    @chupok
    Посмотрите видео с лекции Владимира Агафонкина на Yet another Conference. Он как раз рассказывает о том, в какой последовательности браться за html, css и js. И при этом не обходит стороной тему кроссбраузерности.
    Ответ написан
    Комментировать
  • Как правильно организовать Git репозиторий?

    Изучите gitflow.
    Скорее всего эта методика будет для вас избыточна, но основные приемы вроде: "отдельная ветка на каждую задачу" или "стабильный мастер + develop для разработки" определенно пойдут на пользу.
    Ответ написан
    2 комментария
  • Что значит "натянуть HTML-шаблон на WordPress"?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Означает ли фраза "натянуть HTML-шаблон на WordPress" что в итоге должен получиться полнофункциональный сайт под управлением WP?

    Да, именно это и означает. Это означает что нужно взять статический html, разбить на php-шаблоны (header.php, footer.php, sidebar.php, index.php, archive.php, single.php, page.php, search.php, 404.php и так далее). В самих шаблонах все динамические данные и все, что "захардкожено" перевести на соответствующие template tags, подключить вывод контента (через WordPress Loop, Widgets и тд). Поставить и настроить нужные плагины или дописать свой кастомный код (в functions.php или в свой собственный плагин(ы)) чтобы функционал был именно такой, как надо по ТЗ. Но эта часть (кастомный функционал) уже начинает выходить за рамки "натянуть шаблон".

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

    И еще вот этот мой ответ почитайте.

    И чуть-чуть под другим углом спрошу: при покупке готовой WordPress темы и ее установки на WP получится ли готовый сайт под управлением WP?


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

    Поэтому, действительно получить хорошую, качественную работу на базе WordPress можно только в одном случае - заказать под конкретно свои задачи у опытных wp-разработчиков. Только помните, разработчики - это php-программисты, которые умеют писать кастомный код под WordPress. Программисты, которые хорошо знают именно внутренности WordPress, и пишут под него, а не свои костыли сверху и сбоку. И не путайте с имплементаторами (не программисты, а "вебмастера", которые умеют найти говноплагин и установить его, максимум - пофиксить стили или копипастой вставить какой-то код, найденный в гугле).

    То есть фактически получается что техзадание заменяется шаблоном (макетом)?


    Нет. Если функционал хоть немного выходит за пределы стандартных (встроенных) фич WP - дальше придется допиливать руками, устанавливать (и часто затачивать) чужие плагины или писать свои. Готовых пллагинов - десятки тысяч, но далеко не все нормально написаны и на 100% подойдут под ваши задачи. В общем, для сайта, чуть сложнее чем блог, будет достаточно много кастомной работы, и для нее необходимо готовить ТЗ. Если кто-то вам говорит, что может за пару часов засетапить любой сайт на WP и сделать что угодно за 500-1000 рэ - вам попался имплементатор, который нихрена не понимает из того что делает, и все, что он выдаст - это очередной говносайт, проблем с которым будет больше, чем пользы.
    Ответ написан
    1 комментарий
  • Как реализовать блок (картинка+описание+анимация)?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Ну примерно так:
    jsfiddle.net/IonDen/gpm51202
    Ответ написан
    Комментировать
  • Как проверить правильность css и scss?

    @flor_master
    Могу верстать, могу не верстать.
    Начни проверку с даты изменения. Если дата SCSS и CSS одинаковы - то это то что тебе нужно.
    Если нет - пробуй скомпилировать SCSS в другой файл, и потом любой утилитой сравнить со старым CSS
    Ответ написан
    1 комментарий
  • Где найти всплывающее снизу модальное окно?

    @Hoffman_ZZZ
    Меняете положение модального окна (скрытого и открытого) с top на bottom
    Ответ написан
    Комментировать
  • Как сделать, чтобы бэкграунд сайта плавно менял цвета?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    Ответ написан
    Комментировать
  • Сколько в среднем стоит верстка landing page?

    agmegadeth
    @agmegadeth
    Веб-разработчик в дизайн студии
    Да, такие лендинги действительно не сложные в плане верстки. Работы часа 4 на верстку. Но надо понимать, что клиент захочет сюда:
    1) метрики, аналитики, цели, конверсии считать, да чтоб по каждой форме отдельно
    2) а потом "еще всплывашечку заказать звонок уж запили мне и да цели по ней тоже отдельно считаться должны, ну и в подвал такую же кнопочку с отдельной целью"
    3) "а как мне текст тут поменять самому? а картинки? ЧТО В КОД ЛЕЗТЬ? ПО ФТП КАРТИНКУ ЗАЛИВАТЬ? админки нет что-ли никакой?"
    4) "У меня тут директ с утм метками - надо чтоб загловки и картинки менялись в зависмсоти от рекламы."

    Так и складывается, что верстка тыщи 3, и остальное еще столько же,а то и больше.
    Ответ написан
    3 комментария
  • Как вырезать полукруг в квадрате?

    @StelSik
    А поверх див с фоном, бордером и бордер-радиусом разве не вариант? Тем более однотонный фон.
    Ответ написан
    5 комментариев
  • Что использовать в качестве админки для лендинга?

    agmegadeth
    @agmegadeth
    Веб-разработчик в дизайн студии
    Для лендосов как раз юзаю GetSimple. Ибо:
    1) без бд - установка, клонирование и бекап делается копипастом файлов.
    2) Довольно удобная система разметки блоков для редактирования юзером (theme components вроде называется). Она позволяет любой участок шаблона вынести в отдельный компонент и назвать его. Так выношу заголовки и тексты в эти компоненты. Неопытным юзерам проще в нужном компоненте поменять текст, чем лезть в полную верстку.
    3) интеграция верстки - 10 минут времени.

    Считаю излишним юзать cms типа wp для лендов.
    Ответ написан
    Комментировать