фигура - это пнг. фотка это просто фотка с z-index.
вообще хотелка довольно непростая. Единственно чем могу помочь это в список запросов добавить canvaas
маску можно делать очень по разному вплоть до элемента перекрывающего часть картинки. альфа-канал - это скорее фоторедакторы.
тебе нужно примерно это https://css-tricks.com/clipping-masking-css/
Любой препроцессор умеет использовать переменные. хрень какая-то написана
а вот задача шаблонизатора подставить переменные. case там может не быть в принципе.
каким боком flex-box заменяет бутстрап? Изучите grid и забудь про страшный flex с его костылями.
Наверное float вообще использовать запрещено? удалить его из css нафиг :)
Изучите FLEX. Это как таблетка от головной боли)
Как решить проблему flexbox в safari ??
У Вас нормально ведут себя FLexBox в IE10-11, EDGE-14-15?
Когда напишешь что-то вреде бутстрапа сможешь писать bootsTRAP., а пока не надо...