Как реализованные такие переходы?

Скрипт прикольный, да, даже захотел его в одном маленьком проекте использовать.
JS правда в ie 11 не работает, вроде переписал код в es5, но все равно не хочет ((

Почему элемент span не отображается в ie11?

Алексей,
да, похоже, спасибо...

Почему chrome так криво отображает эти svg - паттерны?

Атрибут никак не повлиял, а вот с дробными - в первом приближении, да, достаточно убрать дробные у вьюпорта и высоты-ширины.
В первом - синем - там вообще проблем нет, там еще и все координаты изменил на 13 и 1, и все идеально.
Во втором - сложнее, изменил пока только вьюпорт и ширину высоту. При очень детальном рассмотрении есть места, где можно заметить артефакты, их немного, но есть.
Проблема в том, что собственно, svg код я не писал, паттерны сделал в иллюстраторе - изначально это были векторы цельные, примерно 10см х 10см милиметровки, но для фона взять паттерн всегда лучше.
Но главное, смысл понятен, будет время, оптимизирую и второй паттерн до оптимального.

Iconmoon "Strokes get ignored when generating fonts"?

я в иллюстраторе работаю - выделяете нужный вам контур, меню object-expand...
и ок, преобразуете вашу обводку в путь с заливкой.
Сорри, не знаю как сейчас это точно в русском иллюстраторе, судя по вот этому источнику должно было бы быть как "объект-разобрать..." но может устарело

Как сделать анимацию заголовка и текста под ним в слайдере?

Но YakovSpb вроде бы спрашивает только про заголовок и текст, а там что сложного то? Opacity для заголовка и текста, плюс для заголовка смещение, разве нет?


Для бэкграунда да, там хоть и можно но сложно вручную.

Как достать код из svg?

Как её векторизировать?

Ну лучше и как правило проще всего отрисовать в векторном редакторе вручную. Есть инструменты типа vector magic, но им хорошо что то сложное векторизовать, и чаще всего все равно после него вручную править приходится.
Если опыта работы с вектором нет, наверное просить того у кого есть.
Если можете картинку, легче сказать будет, что и как.

Почему Magento2 Blank Theme так деплоит этот код, и как можно заставить выдавать на выходе правильный css?

Да, спасибо - как раз сейчас на stack overflow нашел это решение - именно то что надо.
Смутило то, что когда компилирую эту конструкцию из того же Less под gulp, то на выходе получаю нормальный код, а вот в magento - такой вот.
Но теперь буду знать.

Как насторить browsersynch для работы с фронтом под Magento2?

В общем sass - тему настроил для работы с browsersync- там моя ошибка была.
По поводу less - решения от rocketweb видел: почему то начинает исходные less искать в целевой статик- папке - хотя в конфиге написано где source, а где dest - отложил пока.

Как насторить browsersynch для работы с фронтом под Magento2?

1-я проблема в том, что не работает обновление браузера после успешного выполнения тасков - подозреваю все таки ошибки своего конфига.
В доках для browsersync.json написан пример для конфига -

{
  "proxy": "m2test.dev",
  "rewriteRules": [
    {
      "match": ".m2test.dev",
      "replace": ""
    }
  ]
}

У меня удаленный сервер (показать не могу, доступ открыт только для определенных ip) - test3.mysite.com.
При этом если в качестве прокси указать test3.mysite.com -

{
  "proxy": "test3.mysite.com"
}

все мертво, но это вроде как и понятно.

На сервере все окружение настроено, любое простое приложение, запущенное в нод-окружении, становится доступным, если сервер выставить не удаленный адрес и не локалхост, а 0.0.0.0
Так вот, если я указываю 0.0.0.0 как прокси -

{
  "proxy": "0.0.0.0"
}

то - о чудо! - мой сайт становится доступным для редактирования по test3.mysite.com: 3000, но так или иначе, обновление браузера посредством browsersync не происходит.

2-я проблема в том, что если я добавляю вторую тему, например, стандартную blank на less -

{
    "sass-blank": {
      "src": "vendor/snowdog/theme-blank-sass",
      "dest": "pub/static/frontend/Snowdog/blank",
      "locale": ["en_US"],
      "lang": "scss",
      "postcss": ["plugins.autoprefixer()"],
      "ignore": [".test"]
    }

"blank": {
      "src": "vendor/magento/theme-frontend-blank",
      "dest": "pub/static/frontend/Magento/blank",
      "locale": ["en_US"],
      "lang": "less",
      "postcss": ["plugins.autoprefixer()"],
      "ignore": [".test"]
    }
}

то даже ошибок никаких нет, просто игнорируется, как будто темы этой в конфиге нет. Хотя первая, которая на sass, в том же конфиге, и обрабатывается нормально, и на любую ошибку ругается моментально.

Как быстро автоматизировать вёрстку сайта с помощью html шаблонизатора/препроцессора? Есть какой-то стартеркит?

Тоже сейчас уже какое то время в поиске чего то подобного, и при этом подходящего для своих нужд - понял, что все равно нужно будет конкретно под себя собирать самому. Скорее всего готового - взял и в бой - найти не получится, максимум, это выбрать какое то решение и допиливать уже оптимально для себя.
Например, беру известный стартовый шаблон OptimizedHTML 4 - для одних целей выпиливаю bootstrap, sass заменяю на less, ну еще например добавляю pug.
Для других целей уже какая то другая сборка.

Как нарисовать букву F?

Станислав,
если вы увеличите свой svg - тот что вы нарисовали - ну хотя бы до 200-300%, вы увидите тогда, что получилось.
Буква F отрисовывается, если я не разучился считать, 10 точками, у вас их видно что только 6.

Можно меньшим числом точек, ео контурами

Как разрешить загрузку svg в админке Magento 2.2.X?

например, content-design-configuration- ... header-logo

Как грамотнее всего подготовить верстку под Magento2?

Требования вполне себе корректные. Почему бы не писать сразу Less код? (Или вообще CSS), там же нет особой разницы в синтаксисе.

Вчера пообщались с коллегами, с кем будем вести этот проект - по видимому таки придется писать в less. Главный аргумент тут то что тема blank использует less. Есть неофициальная версия этой темы с sass (кстати, эти же разработчики предлагают и свое решение для фронтенда в М2) - но коллеги не доверяют, переживают, что возможны проблемы с совместимостью, не хотят в общем. Обновляется она реже чем официальная, ну да, теоретически проблемы возможны.
Для меня писать в less не критично, но неудобно. Привык к синтаксису sass, да и по любому sass гибче гораздо.
Кроме того, верстать такой большой проект без фреймворков все таки гораздо затратнее по времени. Разбирая дизайн под верстку, вижу что рисовали его под сетку бс 1280px. А как известно, бс 4 поддерживает только sass...
Врочем, и для него есть неофициальная версия с less, возможно, это как раз то что подойдет.

Можете попробовать освить сборщики, gulp вам хватит, что бы склеить стили в один файл, минифицировать и т.п.

С gulp-ом я работаю, с бэм знаком, а вот шаблонизаторы - вот тут пробел у меня. Посоветуйте что на ваш взгляд наиболее перспективно, дружелюбно, и где есть хорошая база для изучения.

Как создать картинки/изображения?

Вверху - т.н. isometric art, научиться рисовать несложные фигуры достаточно просто, и туториалов в гугле полно - вот сразу же cколько выдает он на запрос how to create isometric illustrations
Внизу - flat, или плоский дизайн. Самое сложное здесь - научиться рисовать людей, впрочем, не только... если есть способности рисовать вообще, то научиться рисовать в аля иллюстратор дело времени и навыка.

HTML Page Builder генерирует невыносимую боль. Неужели это не влияет на SEO?

Vitaliy Orlov, плюсанул, но все же дополню.
У нас фирма не новая, ей 15 лет и веб-шоп - читай сайт + домен тоже с конца 2003 года.

Но, для бизнеса, лучше сделать 10-ок лендингов быстро, запустить на них целевой траф и получать бабосики. Чем тратить время на оптимизацию, которая в итоге ни на что не повлияет. Если бы у тебя была цель оптимизировать существующие страницы, то да, там надо делать именно все то, о чем ты пишешь - оптимизация кода, текстов, внедрение всяких фишек, типа amp-а, но сейчас у вас цель сделать побольше посадочных страниц, и генераторы тут самое оно - тк раз-два и в продакшн...

Цель другая. Трафик и конверт с рекламы не просто большой, а большой очень. В настоящее время месячный бюджет только по Adwords превышает 100 к. Если бы это было не рентабельно, никто бы не вливал такие деньги. А так - на фирме рост последние годы колоссальный, годовой оборот - десятки лямов.
Но проблема наших сеошников именно в том, что они никак не могут вогнать в топ по важнейшим ВЧ и СЧ в органике. По НЧ без проблем, но не более того.
И вот цель то как раз органика, потому как по рекламе все нормально. И это агенство наняли как раз для этого, для органики, не для рекламы. По моим данным, с этим агенством контракт на 300 к. А они за 3 недели разродились на этот лендинг. Типа сейчас мы вам поставим, польем на него траф, а после того этого научим вас, как этот лендинг поднять до небес в органике.
И вот в это я не верю. Т.е. они соберут свои бабки, уедут, а с чего эта кака появится в органике? То что траф на нее пойдет с адвордса - так это тупо перераспределится то что идет сейчас с других лендингов - а лендингов у нас уже понаделано до хрена и больше, на любой чих, и траф с них идет, как я уже сказал, нешуточный....

HTML Page Builder генерирует невыносимую боль. Неужели это не влияет на SEO?

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

Заявлено, что на данную страницу будет передаваться трафик с adwords по вхождению
"etiketten". Действительно, в рекламной выдаче по этому запросы сайт присутствует.
В дальнейшем продвигается мысль - цель - появление в топе органической выдачи. Если сейчас посмотреть на результаты выдачи, то 1-е и 2-е место у конкурента. Тут же вопрос - каким образом? Там видно, что это те же лендинги, код хотя и не тоже не блещет, по любому почище. Хотя ошибок и хватает, но хоть альты к картинкам прописаны, имена файлов вменяемые. Заголовок h1 один на страницу а не 7 штук. Тем не менее, везде на всех углах кричат о важности оригинального контента, и только контента, и безусловном вреде поискового спама, а что на деле? В коде слово "etiketten" встречается чаще всего слов в видимой части текста. Это что такое, спам или нормальня ситуация для сегодняшнего дня? Ссылочная масса рулит?
Ну у конкурентов ссылок хватает, конечно. Но вопрос остается - каким образом они в абсолютном топе, по реально важному ВЧ запросу "etiketten" - при том что ниша весьма конкурентная в немецкоязычных странах.

3) А если у тебя геозависимый, непопулярный товар/услуги, то вообще можно собрать семантическое ядро и девочек заменить доргеном :) С эстетической стороны, конечно хуже, но зато на 8 марта экономия.

Так что, забей, лендинги клепаются, трафик идет, баблишко капает, все ок :)

Сайт не мой, я тут работаю немного. Товар популярный, фирма крупная, страна Германия, дорген - посмеялся. (8 марта вообще не праздник ни разу).

Как сделать такую SVG анимацию?

упрощенно, например, так

Почему css гриды не работают на ie11, хотя префиксы выставлены?

Так это ие11 - по другому нельзя, если не так, то по другому все равно надо уникализировать каждую ячейку, по колонкам и строкам.
Приходит в голову только, тем 3 классам, что уже есть - number, property, edit - прописать их явные позиции в колонках, по строкам же уникализировать например как nth-child от родительского дива.
Т.е. для 4, 5 и 6 элемента - строка будет 2, для 7 8 9 - соотв-но 3 и так далее.
Тогда в коде никаких классов добавлять не придется, но стили для них все равно нужны.
Как их добавлять - возможны варианты (например, с js считать строки или еще как )
целесообразно ли это - решать вам.

Не могу изменить пару вещей в лейаутах. Что не так, почему не получается?

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

Можно ли такой SVG превратить в сплошной path?

crdrads,
Судя по вопросу - вы новичок в svg.
Судя по вопросу - "Для анимации требуется"
К одному контуру невозможно применить 4 разные заливки, а вот сделать анимацию 4 контуров как одного - возможно.
Но раз вам помощь не нужна, не настаиваю.