СергейРусков

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

Ой, чего только нельзя сделать на css, вот пример http://codepen.io/YozhEzhi/pen/fvzlp, я думаю, что глубоко теоретически это возможно, но поддержка браузеров будет плачевна и надо понимать, что это решения из разряда: "Смотрите как я умею", в жизни так не делают.

она самая. А во флексбоксе, как известно, элементы местами переставляются очень легко. Так что вот вам решение на бутстрапе простое и красивое. Вы слишком буквально меня поняли У меня тоже решение на флексбоксе, тут разговор шел, что можно решить все float'aми Но спасибо, это интересно.

А как это поможет с перестановкой блоков местами? Так это же и есть flexbox модель.

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

Ну например блок index-content__27 который на мобильной версии становится после index-content__32 в мобильной версии. Таких примеров вагон, поресайзите и посмотрите если есть желание. В моем понимание хаотично - это беспорядочно, то есть у передвижения блоком нет закономерности (в техническом смысли, продукт менеджеры в этом конечно видят логику). Вы потеряли контекст, я говорил о вашем совете про использование бутстрапа, и спрашивал как конкретно вы видите его реализацию. Я сейчас рискну нести полную чушь, так как давно не имел практики с бутсрапом. Вроде как col-**-offset это тупо margin-left, а col-**-push это смещение влево с помощью position:relative и left, то есть если в случае с margin-left блок еще перескакивать на следующую строку в одном контейнере, то в случае с position: relative и left блок вывалится за пределы контейнера, поэтому изменения возможны только в рамках одной строки. Надеюсь я правильно разобрался.

Эм, нет. Там скорее про разделение css на несколько основных независимых частей, типа Base, Layout, Modules, State, Theme. Интересная штука, на мой взгляд более логичная, нежели БЭМ. Ознакомьтесь, если интересно. Ну, структура накладывает отпечаток на файловую структуру - это, конечно, тоже По поводу этого - да. Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован. Также есть замечательное значение свойства display - inline-block. Мне больше он нравится тем, что элементы не выпадают из потока. Тут, думаю, не стоило мудрить. У вас были проблемы с производительностью разве? Во-первых, если много элементов в слайдере, в таком случае их лучше аяксом подгружать. Насколько помню, овл это позволяет. Во-вторых, овл использует css3 трансформации для манипуляций, что позволяет исплользовать аппаратные ресурсы машины, так что с производительностью должно быть все гуд. В-третьих, вы задаете высоту жестко слайдеру. А если высота картинки изменится? Если контента больше забьется? В общем, задавать высоту в css - это последнее, что стоит делать. Впрочем, как и использовать абсолют. Ну и наконец, если вы заботитесь о производительности на мобильных, то можно хотябы для них написать эти свойства, а не применять и к дестопу их тоже. А я и не говорил, что он влияет на скорость работы Только в том случае, если будет сипользоваться неправильно и повлечет за собой увеличение количества кода - тогда безусловно. Будете грузить лишние байты. Тут вы меня не поняли, наверное. Страница, как ни крути, грузится быстрее не станет https://toster.ru/q/98637. Отрисовываться - да. Но грузится - нет. Все равно вы грузите те же байты текста и ходите запросами на сервер за картинками, когда встречается урл. Не люблю ввязываться в перепалки, но интересно докопаться до истины. По мелочи, коротко: По поводу загрузки, я понял правильно, и попытался показать взгляд на него с другой стороны. Position: absolute - замарачиваться стоит, у меня в хроме на работе тормозит (слабоват компьютер). Все остальные замечания по этому вопросу немного не по теме. И главное: Я неплохо знаю бутстрап, сверстал пару сайтов на нем давным давно. Как именно перебрасывать элементы из одного row в другой (я еще раз повторю перемещения происходят хаотично)? Лично я знаю 1 способ, прячешь элемент в одном row на определенных разрешениях и показываешь их на другом, это не допустимо, даже лень перечислять причины(seo, нагрузка на пользователя и тд). Вероятно я что-то не знаю о бутстрап? Буду благодарен если объясните. Скажу, что этот вопрос у нас в компании достаточен болезнен, большинство проектов пришло к JS, я решил попробовать что-то новое.

Именно верстка конечно, впечатления это к дизайнерам

Спасибо за потраченное время! 1. Продолб, спасибо поправил. 2. Ну на кликабельность намекает пальчик, а остальное еще не уточнил дизайнер, я думаю не надо бежать впереди паровоза. 3. Тут важна конкретика, как именно вы хотите добиться такого же результата? float: right, left? Это невозможно, блоки перемещаются абсолютно хаотично. Position: absolute - дичь. JS - это вариант, но более медленный и труднореализуемый. Может я что-то упускаю? 4. http://ruhighload.com/index.php/2009/12/16/optimizaciya-banernoy-reklamy/, если вкратце блоки с display: none загружаются после тех которые видны, так что в принципе страница начинает грузиться быстрее. 5. На скорость работы кода БЭМ не сказывается, вся фишка БЕМа в его поддержке и реиспользовании кода, это будет большой проект, поэтому смысл есть. 6. О импортах разговор шел в разрезе fonts, тут делать так или иначе большой разницы нет, почему - я написал несколькими сообщениями выше. 7. Не могу найти статью, частично про это говорится тут http://stackoverflow.com/questions/11367709/css3-slider-absolute-positioning-inside-relative-div-for-responsive-slideshow. Если вкратце, то при position: absolute элемент выпадает из общего потока, и браузеру проще (меньше ресурсов потребляется) перемещать слайды, так как они не зависят от других элементов. 3. SMACCS - давным давно пробовал, там вроде про размещение файлов, не? Ошибся при рефакторинге, спасибо.

1) Да, редакция тестирует брендирование, скоро пройдет.2) Поддержка с 11IE, в сафари не работает потому что они поддерживают flexbox с версии 6.1

1000 час. Хотя может и делевле, надо глянуть насколько рутинна или наоборот сложна задача.

Давай-то конкретнее, я хоть и не до конца понял ваш план со строками, но я на 100% уверен, что я данными перекидыванием блоков(из середины в центр и тд), это не возможно сделать универсально, путем задания единообразных классов, готов даже спорить на деньги. По поводу "когда будет тогда и разберемся" имеется ввиду, что я не стал реагировать на утрированный пример, так как я отлично знаю, что так никогда не будет, это раз, два я знаю, что делать когда будет больше блоков(об этом я написал, float, margin и тд). Да откуда их много то, очень много? margin-top? order? Если вам не сложно (я вполне допускаю что сложно и лень) накидайте сетку которая будет перемещать совершенно в непредсказуемые места (можно мой пример с 23 и 28 блоками), а то наверное, я все никак не пойму вашего подхода(чур без каскадности). На счет margin-top, сейчас через запятую (extend) укажу блоки в которых оно повторяется, спасибо abrahadabra за наводку. А я о нем 10 минут назад и не знал, гугл позволяет умничать в вопросах в которых ты и не разбираешься

http://lesscss.org/features/#extend-feature вроде в лесс тоже есть.

Это называется методология, и если написано в правилах фирмы (устав по оформлению кода) это важно. Но даже если забыть про указы выше, это важно для разделения логики, одно стили, другое js, потом будет проще читать, странно что вы никогда об этом не слышали, очень популярная тема. Когда будет тогда и разберемся, скорее всего вы говорите о том, что будет после того как нажать кнопку "показать еще", там будет совсем другая история, там можно сделать один общий класс для всех, написать что-то типо float: left; margin столько то, и забить. Дубликат order? Это где? Если такое есть то укажите, это ошибка, каждый ордер на своем размере уникален, в этом и фишка. Ээ когда? Пока с этим не столкнулся, и не представляю зачем. Потом уже решу в зависимости от задачи. В итоге я так понимаю, что не нравится margin-top который много раз повторяется? Я думал об этом, можно было бы решить проблему задав высоту блоку и дальше через flexbox, но подумал, что получится слишком захардкожено для PHP программиста. А если тупо сделать какой-то отдельный класс для margin-top, то будет тот же повтор, но в html. И опять же если я вас правильно понял, вы предлагаете каскадность, что идет против методологии БЭМ, а если по сути, то потом переверстывать будет сложнее...

id принято использовать для js, во всяком случае у нас в фирме. Ну его позицию... наверное, тут какой-то подвох... Про остальное не понял, но вроде там, что то о том чтобы вкладывать блоки в row(из бутстрапа). Так не получится, потому что многие из блоков переезжают по своему контейнеру куда ни попадя, один из многих примером, index-main__23 стоит по середине в desctop версии, в мобильной он оказывается под блоками index-main__28, index-main__25 ну и тд. Будь все это внутри каких-то строк(а 23 и 28 не запихнуть в 1 строку если учесть, что вроде как вы написали, что строка может быть на 4 элемента), то придется двигать еще и сами строки... сложно это все.

Подключить через link. То, что запрос пойдет на гугловский сервер это не значит ничего. Например, зачем jquery подключать с cdn? Не ради того, что cdn будет работать быстрее чем Ваш сервер, а ради того, что пользователь который зашел на Ваш сайт наверняка уже имеет в кэше этот же jquery и не надо его заново качать. Этот довод я видел часто, и ни разу не видел статистики слова "наверняка", а уже тем более для конкретного ресурса. Но окей, я обсужу это со своими. Спасибо. Кстати, со шрифтами все будет еще грустнее, если jquery используется повсеместно, то данные шрифты, имеющую огромную специфичность (оцените get запрос, family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic ) встретить второй такой же... ну короче сложно будет Единственный довод за, для себя который я нашел, а почему бы и нет ?

1. Да вы правы, но какая альтернатива? Как еще использовать гугл шрифты? Сам гугл предлагает 3 варианта, так как я использую, через link <link href='https://fonts.googleapis.com/css?family=Oswald'rel='stylesheet' type='text/css'> и js. Через font-face? А это законно? Но в целом ничего не изменится, все равно будет запрос на сервер (уже не на гугловский), вроде как бешеной прибавки скорости быть не должно. Или я в чем-то не прав? 2. Вот уж засада пал жертвой emmeta, стыд и позор 3. Вот тут я не вижу других альтернатив, более того я сначала давал осознанные названия, но потом посовещался с PHP программистом, и мы поняли, что данная сетка (а это именно элементы сетки) будут использованы в дальнейшем в любом назначение, не измена останется только их позиция, поэтому и циферки. 4. Ну что тут сказать, исправился

Так там вроде и в 3 boostrap был customizer, или я чего-то не понял? Ну вот только что замерил, с 3g (good 3g в chrome mobile mode) сайт грузится 6 секунд, в более менее вменяемом состоянии он через 3 секунды, я исследования на этот счет ни читал, но я готов ждать 6 секунд с мобилы. Про более тяжелые случаи, 1 палка и тд, это уже дискуссионный вопрос. А по поводу reset, мне просто удобнее без отступов у элементов, это же исключительно технологическая вещь и вкусовщина, ничего страшного в его использовании/не использовании вроде нет.

Спасибо, я очень старался normalize.css и reset.css использованы частично, я забрал из обоих то что мне нужно было, они в целом то про разное, normalize.css приводит очень много фишек к стандарту, а reset только сбрасывает margin, padding у элементов (и что-то там еще по мелочи, но не суть). А по поводу шрифтов, ох вы бы знали какие войны шли у нашего дизайнера с руководством, SEO отделом, PM и тд, я затрудняюсь сказать, что в итоге привело к такому решению, скорее всего это оценка аудитории - в основном это дамы, а дамы хотят, чтобы было максимально красиво, и видимо готовы ждать.

Обойдемся без лирики Покритикуйте или похвалите (а что, приятно) следующую работу http://sergeyruskov.github.io/ Замечания: Необходимая поддержка браузеров: IE 11 (hallelujah!) Меню под бургером еще не нарисована SEO не моя проблема, хотя если что системное заметите, будет интересно. Это не продакшен версия, поэтому ни о каких минификациях речь пока не идет.

Я думаю по этому вопросу и на этом форуме и вообще есть куча инфы Из того, что я прочитал, все делятся на 2 лагеря, первые - поддерживают Вашу позицию, вторые говорят, что им так быстрее, что они привыкли, что отцы уже все продумали, что это унификация и легкость поддержки при передачи проекта в другие руки и тд. Если Вы спрашиваете меня, это строчка в резюме которая must have

Заходите в папку src/sass/bootstrap там открываете _index.scss, отключаете то, что Вам не надо, и удаляете сами файлы из папки. Я уже не помню точно, но кажется я достаточно много от туда поудалял.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее. Еле нашел, так в чем тогда проблема то ? Мне вот интересно. Bootstrap заточен под mobile first, я начал наоборот, а это как кота против шерсти гладить.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее.

Гляньте пжл исходники, я так и сделал. Проблема в другом, не буду говорить в чем, чтобы не заострять внимание, там косяк иного рода. Ну, поехали. Спасибо, все четко и главное "не на отвали", чтож буду учиться, кое с чем не согласен, но сначала со всем подетальней разберусь - отпишусь. Немножно оффтопа, я настроил gulp-webserver, так как Вы меня тут разнесли в пух и прах пока не планировал ничего заливать на GitHub, но если Вам интересно, могу залить, просто, с настроенным сервером.