Сергей ZSA

1. Измерить блок-родитель
2. Установить ограничение в точке, где будет останавливаться передвигающийся (ширина родитея наверно отнять сколько-то px так как у вас рамка там ну и точка остановки может должна быть ещё левее чем рамка начинается, вычислить это так)
3. При движении вычислять каждый раз координаты правой грани передвигающегося блока и если координаты правой грани равны или больше чем ограничение - то приравнивать позицию left как координату ограничения минус ширина передвигающегося блока.

Это решит выпадания из родителя слева и справа.

Нужно чтоб не выпадал из потока (грубо говоря вниз не уезжал) - задайте элементу position: relative; или используйте margin-left/translateX для передвижения

В целом тут js-а не много. Писать готовое решение не хочу вам, чтоб подумали и погуглили самостоятельно, как это можно сделать всё))

CSS тут не поможет, position тут не причем, двигать можно хоть меняя margin-left, хоть translateX(), хоть будет передвигаемый с absolute (тогда блок родитель схлопнется, имейте ввиду, абсолютное позиционирование выводит блок из потока), хоть с relative, как угодно.

Я считаю что нужно полное разделение (собственно, чем и является компонентный подход). Без глобальных стилей жить вряд ли будет удобно. К примеру от normalize я не могу ну вот никак отказаться. Обертки (некоторые) в любом случае будут лишние у вас и будут загромождать код, к сожалению пока мы живем с флексами и флоатами не имея гридов - придется с этим мириться.

Многие вовсе отказываются от БЭМ когда используют компонентный подход и обзывают элементы абракадаброй. Я лично от него не могу отказаться. Да, smart-grid, возможно, стоит попробовать, но опять же это не универсальное решение, как и бутстрап (ну вы меня понимаете), потому что замечательные дизайнеры и заказчики хотят от нас добиться феерических вещей, которые будут кружить голову каждого посетителя, который заходит на наш сайт.

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

Вспомните (если конечно застали) верстку таблицами. Та еще жуть была, но ничего, работали как-то. Мое личное мнение - работать как работаем, просто не отставать от быстро идущего паровоза под названием Front-end. Идти к идеалу и добиваться универсальности мы будем еще долго, если вообще придем когда-нибудь с нашими все теми же дизайнерами и заказчиками.

htmlacademy перешли уже полностью на flexbox даже на своем базовом интенсиве html и css. Год назад еще учили float и inline-block. Вопрос не в том, надо переходить или нет. Надо использовать нужные техники в нужных местах. Я около 2х лет использую flex во всех своих работах (и в фриланс и на постоянке). Да, проблемы есть и они очень и очень забавны местами и решение этих проблем тоже имеется. К примеру есть проблема следующая - на iOS 11 в сафари сайт смотрится отлично, на iOS 10 нет. И думай в чем дело. Но опять же подобные проблемы выявляются только тестами и решаются без особого труда. IE 10-11 и Edge - тоже самое, только тесты и исправлять все что там не так. Опять же вряд ли вам нужно делать pixel perfect проекты для этих браузеров и поэтому проблемы использования flex я не вижу.

Использовать flex. Конечно же, на мобильном разрешении у вас будет перенос всего этого и блоки будут друг под другом

Пред P.S. Для начала я очень надеюсь что вы используете normalize в своих проектах

1. Вы можете использовать чистый css в less файлах, но я сомневаюсь, что вам будет не интересно работать с вложенностью, которую позволяет сделать less.
Этот less

.footer {
    color: #fff;
    a {
        font-size: 24px;
    }
}

развернется в .footer {color: #fff;} .footer a {font-size:24px} это просто пример, я думаю вы понимаете в чем плюс такого подхода, а если еще работать с & то вообще все хорошо и удобно как по мне. Также использование переменных и миксинов тоже очень и очень порой помогает.
Итог - никто вас не наругает за то, что у вас чистый css в less файлах, но стремитесь less узнавать и упрощать свой код, как раз используя возможности less (надеемся что многое скоро будет в чистом CSS, но до этого надо дожить)

2. Каждая страница уникальна - да, на каждой странице есть свои компоненты, этим страницы и уникальны. Из компонентов страница и строится. Нет компонентов - нет страницы. Если у вас один проект с множеством страниц - у вас в любом случае будет одинаковый (ну или примерно одинаковый) подвал, также, возможно, меню, шапка и тп. Все зависит от проекта и части каждой страницы будут формироваться из одних и тех же блоков, за стилизацию которых будут отвечать файлы .less те самые (ну конечно потом все собирается в один css и как бы он за все отвечает, но вы поняли меня, надеюсь). И из-за этого как раз я ваш вопрос не понял. На любой странице проекта будет компонент, который вы уже верстали и вы просто используете его снова, просто скопировать-вставить, а не верстаете снова с 0.

Или вы пытаетесь сделать какой-то костяк общих компонентов, при этом постоянно работаете с лендингами абсолютно разного дизайна? Тогда ваш вопрос понятен и вам не стоит пытаться тягать в абсолютно разные проекты одни и те же файлы. Запаритесь так переписывать каждый раз все стили. Для каждого проекта свой костяк файлов, которые для него нужны. Конечно, какой-то один, может два, а может 3 файла у вас будут одинаковыми на всех проектах, где у вас общие стили, которые вы используете всегда (у меня к примеру миксины, кнопки ну и конечно тот же normalise)

3. А вы пробовали адаптивить страницы вообще без бутстрапа, а просто руками? Попробуйте, тогда ваш вопрос решится сам собой, иначе вы пытаетесь подгрузить бутстрап, использовать при этом его не будете, зато загрузите свой .css файл итоговый абсолютно не нужным кодом, который только место будет занимать.

Также почитайте, что такое миксины. Если вы просто будете писать @media (max-width: 767px) это не миксин, а просто медиа-выражение. Миксины - совсем другая вещь.

Советую глянуть хоть и старую, но хорошую статью по шрифтам от google https://habrahabr.ru/post/159907/

По поводу SEO что-то я ничего не слышал за такое)) Оно никак не связано с google fonts. На счет минусов - в google есть достаточное количество косячных шрифтов, поэтому надо смотреть каждый раз, не с косяком ли у вас шрифт (сравнить с макетом от дизайнера и с тем что у вас в верстке получается, если с косяком - подключать руками с сервера).

Уже достаточно советов было. Еще один - записывать в базу того кто сделал заявку и больше не принимать от него же заявок просто на уровне php ограничив, сверяясь с базой.

https://jsfiddle.net/ks74ddfj/

задумка думаю ясна. У span (можно и не span а любой тег, просто он должен быть inline-block) ставим фон и обязательно ему z-index и для after z-index.

Либо второй вариант - обе полоски через псевдоэлементы но это не универсальный пример получится (не выйдет воткнуть любой текст, в пример на который скинул ссылку можно воткнуть любой длины текст и все будет хорошо отображаться)

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

Лучше сделать кастомный select и с ним возиться, чем со стандартным select. Это не сложно. Вот тут посмотри zsa-studio.ru/project и разметку и jQuery в файле main.js

clip-path, svg, canvas

Нужны расширения шрифта woff и woff2 Посмотрите пример подключения любого google fonts шрифта и все будет понятно сразу.

div внутри которого div внутри которого картинка. У каждого из div есть свои before и after расположенные в нужных местах (естественно через position: absolute ). Это самое простое наверно что можно сделать. Можно также отрисовать эти линии путем svg если хочется повозиться. Думаю, есть 3 вариант, но точно сейчас его вам не вспомню))

Логин и пароль. Если надо - двухтактовая по телефону. Если прямо вообще очень надо - тогда еще и по совместимости ip+браузер+операционка. Если уж ну прям вообще заморочиться - добавить геопозицию, но это для совсем тяжелых случаев.

P.S. Я так понял вопрос про вход в админку.

Почему бы не border-bottom просто?