Задать вопрос
IgorBod

Igor Bodyagin

Front-end Developer (Beginner)
Лайки

  • Как лучше всего подключать svg иконки на сайт для последующего использования через use?

    @AlBandito
    Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет.
    На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались.
    Сейчас опишу, как я делаю.
    1) Создаем JS файл с inline SVG. К примеру, такой
    // Тут хранятся иконки в SVG
var icon = '
<svg style="display:none;">\
  <defs>\
    <symbol id="header-phone" viewBox="0 0 850.394 850.394">...</symbol>\
  </defs>\
</svg>';    
// Вставляем иконки в HTML        
document.getElementById('svg-icon-placeholder').innerHTML = icon;

    2) Создаем в HTML пустой div с id svg-icon-placeholder. В него мы и будем вставлять SVG
    3) Юзаем через use :)
    Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)
    Ответ написан
    6 комментариев
    6 комментариев

  • Правильно ли я верстаю, используя методологию БЭМ?

    movasyl
    @movasyl
    semper tiro
    Все так делают после прочтения официальной документации))
    Но все на много проще. Представь себе что у тебя в макете есть кнопки перехода на другие страницы.
    Значит нужно что-то вроде <a href='#'>Кнопка</a>, но оно не очень похоже на кнопку, поэтому:
    1. на первом уровне тебе нужно найти все общее между всеми кнопками в макете и создать элементарную bem сущность button.
      <a class='button' href='#'>Кнопка</a>
      // COMMON
.button{
  display: inline-block;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
}



    2. дальше, к примеру видим, что в макете есть кнопки двух размеров - большие и маленькие, соответственно:
      // SIZE
<a class='button button_size_m' href='#'>Кнопка</a>
<a class='button button_size_l' href='#'>Кнопка</a>

// COLOR
<a class='button button_primary' href='#'>Кнопка</a>
<a class='button button_secondary' href='#'>Кнопка</a>

      /*        _MODS_       */
// SIZE
.button{
   &_size_s{
     font-size: 1rem;
     }
   &_size_l{
     font-size: 2rem;
     }
}

// COLOR
.button{
  &_primary{
    background: #607D8B;
    color: #ffffff;
    }
  &_secondary{
    background: #8BC34A;
    color: #ffffff;
    }
}



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

      <a class='button button_primary button_size_l header__button' href='#'>Кнопка</a>

      // PARENT__BLOCK
.header{
    &__button{
      display: block;
      width: 200px;
      margin: 0 auto;
     }
}



    Далее примерно такой же подход ко всем остальным блокам.
    определил общее > доопределил/переопределил варианты > при необходимости родителем расставил по местам и косишь как будто ты не верстальщик, а rонструкторо-собиральщик :)
    codepen.io/kovbassa/pen/ObrqZv
    Ответ написан
    Комментировать
    Комментировать

  • Как вы начинаете вёрстку сайта?

    SanDiesel
    @SanDiesel
    HTML CSS JS
    Обычно все начинается с критики в адрес дизайнера...это единственное отличие моей методики от вышеуказанных способов)
    Ответ написан
    Комментировать
    Комментировать

  • Как прижать блок к правому краю?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Включи логику.
    Ты задал абсолютное позиционирование, вырвав тем самым элемент из потока.
    И пытаешься задать ему обтекание.
    Внимание вопрос: какие элементы его будут обтекать, если сам элемент вырван из потока?

    Вывод: float для твоей задачи не подходит.

    Думай дальше. Ты задал позиционирование элементу. Какие свойства задают позицию блоков?
    Догадался уже, наверное - top, left, right, bottom.

    PS. Не стесняйтесь включать мозги =) Помогает в решении проблем.
    Ответ написан
    5 комментариев
    5 комментариев