Сергей delphinpro

Нет, так не выйдет. Причину вы сами озвучили.
Я иногда использую такой трюк: Адаптация до какого-то не самого маленького размера, а дальше скейлинг через вьюпорт.
Допустим делаем максимум планшетную версию до 600 пикс, а в телефонах показываем ее уменьшенную (масштабированную) версию
Для это просто вставляем в head простой код:

<script>
    (function() {
      var minWidth    = 600;
      var width       = screen.width;
      var oldViewport = document.querySelector('meta[name="viewport"]');
      var viewport    = document.createElement('meta');
      viewport.setAttribute('name', 'viewport');
      viewport.setAttribute('content', 'width='+(width<=minWidth?minWidth:'device-width')+'');
      document.head.replaceChild(viewport, oldViewport);
    })();
</script>

$("form").submit(function(event) {
  event.preventDefault();
  ...
});

Это очень сложно

почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит.

А куда же им деться?
Причина очевидна — блок растягивает страницу настолько, чтобы вместиться в неё. И неважно, абсолютный он, или нет.

Ведь они же не в потоке?

Ну и что? Ну вынули элемент из потока, со страницы-то он никуда не делся.

---
Простое решение:
дать выпадашкам position:fixed а при ховере - absolute
Побочный эффект — скролл страницы будет проявляться только при открытом меню, если оно не вместится.
Еще простое решение (частный случай):
Для последнего уровня задать максимальную высоту и oveflow:auto
Минусы — годится только для последнего уровня, потому что его границы уже ничего не вылезет из-за overflow

Все остальные решения требуют вмешательства javascript или серьёзной переработки принципа показа подменюшек.

Спецификацию почитайте!
У инпутов нет псевдо элементов.
То, что они есть в некоторых браузерах — недокументированная возможность, не стоит использовать.

По теме: обычно таким образом стилизуется label/span или его псевдоэлемент.

<input>
<span></span>

input:checked + span {}
или (по ситуации)
input:checked ~ span {}

Ну а стандартный просто скрывается (display:none;)

В чем отличия Object.prototype.method и Object.method?

Object.method — это методы конструктора Object. Ну вроде как статические методы в php, если провести аналогию.
Object.prototype.method — это методы экземпляров Object и его потомков.

И не могу понять: зачем нам prototype? Ведь по сути нам просто нужно получить функцию и задать контекст, почему же тогда работает только с prototype?

Потому что данная функция определена именно в прототипе.

Тут всё довольно просто, без заморочек.

Правильно ли будет, если в методе addNewElement() я буду использовать стандартные методы работы с DOM-деревом?

Конечно нет.

Почему бы вам не хранить данные компонентов в data? И соответственно выводить их циклом. Добавление компонента будет сводится к добавлению элемента в список.

Ну по крайней мере на первый взгляд это кажется правильным. Не зная точной задачи.

Читаем документацию, видим, что nextArrow может принимать string (html | jQuery selector) | object (DOM node | jQuery object)
Чуть-чуть думаем, и понимаем, что мы можем передать сюда любой jquery-объект со страницы. Осталось только выбрать нужный.
Кнопочки обычно недалеко от слайдера, значит их легко найти через общего родителя.
Ну и всё. Осталось только наговнокодить.
Примерно так:

$('[data-carousel]').each((index, el) => {
  const $carousel = $(el);
  let what        = $carousel.data('carousel');

  if (!carouselConfig.hasOwnProperty(what)) return;

  let $arrows = $carousel.parents('.carousel-wrapper').find('.arrows').children();

  $carousel.slick({
    arrows   : true,
    infinite : true,
    prevArrow: $arrows.filter('.arrows__prev'),
    nextArrow: $arrows.filter('.arrows__next'),
    ...carouselConfig[what],
  });
});

align-items — это свойство flex-контейнера, а не потомка.

.widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

У потомков — align-self.
Названия свойств как бы намекают на своё предназначение.

https://github.com/delphinpro/bs-grid-system
https://github.com/delphinpro/vrhythm

https://gist.github.com/delphinpro/6e048196bbdfdfe...
https://gist.github.com/delphinpro/68327cc21558216...
https://gist.github.com/delphinpro/1791877429a5e79...
https://gist.github.com/delphinpro/3b0bd7ca0549e64...
https://gist.github.com/delphinpro/266c7a76e614e1c...

Примесь:

export default Vue.extend({
  methods: {
    hello: function () {
      console.log('test')
    }
  }
})

Еще у вас экспортируется переменная login, а импортируете вы Login.
Проблема скорее всего здесь. Отсюда и undefined.

Всё правильно. Тоже так пишу. Но...
Я всё же стараюсь группировать медиазапросы в пределах блока по их, как бы это сказать, функциональному назначению. Например, если есть взаимосвязь между двумя элементами, и при изменении свойств одного из них необходимо изменить свойства второго, то я пишу один медиазапрос внутри блока с правилами для этих двух элементов. Если тесной связанности нет, например, нужно просто скрыть один из элементов, то медиазапрос пишется прямо в этом элементе.