Jump to content

Оцените вёрстку (bootstrap)


Recommended Posts

Всем привет!

 

Верстаю по заданию klierik'a http://htmlforum.ru/index.php?showtopic=47141

Если коротко, то: адаптивно, IE8+, graceful degradation.

 

Сейчас готова главная страница. И чем дальше делаю, тем меньше нравиться то что получается.

Буду благодарен за любою критику.

 

Посмотреть можно здесь: http://dmitryl-demo.bl.ee/

GitHub: https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid

 

Заранее спасибо!

 

Link to comment
Share on other sites

 

И чем дальше делаю, тем меньше нравиться то что получается.

а что не нравится в целом?

 

 

Боюсь в некоторых местах перемудрил.

Например вложенность стилей: .content-subscribe .subscribe-banner .btn , насколько это оправданное решение?

 

В целом, уверен, можно было сделать лучше. Очень интересует Ваше мнение.

Link to comment
Share on other sites

В данном случае глубина == 3, что в целом впоне нормально. Вот когда иерархия уходит глубже, то желательно оптимизировать.

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks.less

Я бы назвал избыточным такой подход. Иконки отдельно, кнопки отдельно.

Солянку которая находится тут:

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks/content.less

я бы так же разбил: отдельный файл для каждой сущности, так как её разобрать через 2-3 месяца разработки уже будет тяжело.

Правильно сделано с Footer, Header, Layout

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks/header.less

Тут хорошо бы упростить списки с меню, с точки зрения описания стилей. Хорошо подойдут модификаторы. Вместо того что бы вешать на все классы одни и теже стили, можно использовать основной + одполнительные (модификаторы).

Я бы рекомендовал избегать записей типа:

	p {		margin-bottom: 0;		text-transform: uppercase;	}
Дело в том что браузер выбере _все_ <p> на странице, а потом опросит каждый в поисках совпадений с правилами в css, и только потом применит изменения.

Те более что запись:

p welcome           span yourname
Нельзя назвать Абзацем.
Link to comment
Share on other sites

Минус поставить- для школы святое!  ^_^

 

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


+ к этому цена на работу верстальщика падает вот из-за таких вот гавнокодов

Link to comment
Share on other sites

Минус поставить- для школы святое!  ^_^

 

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

+ к этому цена на работу верстальщика падает вот из-за таких вот гавнокодов

 

Я могу предположить, что много профессионалов с тобой не согласятся. Проекты бывают разные, и у каждого разные требования. Если в требованиях bootstrap, то несмотря на чьи-либо стереотипы, проект нужно делать с применением bootstrap.

 

Давай покончим с аналитикой. Тема открыта для обсуждения результата, а не способов его достижения. По "гавнокоду" есть мнение?

В данном случае глубина == 3, что в целом впоне нормально. Вот когда иерархия уходит глубже, то желательно оптимизировать.

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks.less

Я бы назвал избыточным такой подход. Иконки отдельно, кнопки отдельно.

Солянку которая находится тут:

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks/content.less

я бы так же разбил: отдельный файл для каждой сущности, так как её разобрать через 2-3 месяца разработки уже будет тяжело.

Правильно сделано с Footer, Header, Layout

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks/header.less

Тут хорошо бы упростить списки с меню, с точки зрения описания стилей. Хорошо подойдут модификаторы. Вместо того что бы вешать на все классы одни и теже стили, можно использовать основной + одполнительные (модификаторы).

Я бы рекомендовал избегать записей типа:

	p {		margin-bottom: 0;		text-transform: uppercase;	}
Дело в том что браузер выбере _все_ <p> на странице, а потом опросит каждый в поисках совпадений с правилами в css, и только потом применит изменения.

Те более что запись:

p welcome           span yourname
Нельзя назвать Абзацем.

 

 

Спасибо, поправлю. 

Link to comment
Share on other sites

 

 

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

это плохая вёрстка? сделана на бутсрапе, насколько я понимаю

Edited by cyklop77
Link to comment
Share on other sites

 

 

 

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

это плохая вёрстка? сделана на бутсрапе, насколько я понимаю

 

Что в этом может быть хорошего ?

Такую сетку с классами можно создать за 30 минут своими руками и под особенности проекта.

Теперь каждый шклотник может прийти и смело заявить, что он верстальщик и веб разработчик  :rofl:  Не зная ни си сс ни штмл, но зато умеет подписывать классы к блокам, вот такой вот он мастер  :ph34r:

Вы что реально не понимаете к чему это гавно-унификация видёт ?А я скажу..тут анализа то глубокого не нужно..

На рынке упадёт цена за услуги  верстальщика.Каждый вот такой с бутстрапом будет приходить и говорить что он мастер :huh:

Вы тут все хотите всё изучать и стать мастерами во всём, но используете одни фреймворки..

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

 

Я сам не профессионал, но люди работающие серьёзно в этой сфере с этим говном дела иметь не будут, почему?

Выше всё описано..

А для шклотников,самое то  ;)

Edited by Mugen1
Link to comment
Share on other sites

На рынке упадёт цена за услуги  верстальщика.Каждый вот такой с бутстрапом будет приходить и говорить что он мастер

Аналогичные высказывание я слышал тут же на форуме наврено лет 4-5 назад. Но время показывает что все совершенно наоборот.

@Mugen1, данная ветка не обсуждает плюсы и минусы того или иного решения. Все твои посты будут расцениваться как флуд с соответствующим наказанием, согалсно правил форума.

На данном форуме, будь любезен, высказыватся по теме.

  • Like 1
Link to comment
Share on other sites

 

На рынке упадёт цена за услуги  верстальщика.Каждый вот такой с бутстрапом будет приходить и говорить что он мастер

Аналогичные высказывание я слышал тут же на форуме наврено лет 4-5 назад. Но время показывает что все совершенно наоборот.

@Mugen1, данная ветка не обсуждает плюсы и минусы того или иного решения. Все твои посты будут расцениваться как флуд с соответствующим наказанием, согалсно правил форума.

На данном форуме, будь любезен, высказыватся по теме.

 

И что же наоборот ? горе бутстраперы бегут верстать за 300р страницу, а заказчики уже и не считают вёрстку работой.

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

Link to comment
Share on other sites

cms тоже категорически нельзя использовать, надо самому написать движок. Зачем использовать чужой говнокод если можно сидеть и написать свой собственный движок! Ведь большинство cms славятся своими глюками!

Mugen1 так интересно, раз бутстрап для школьников криворучек (значит до безобразия прост), сможешь ли ты сверстать качественный сайт на том же бутстрапе и показать тут всем криворуким?

Edited by CroaToa
  • Like 1
Link to comment
Share on other sites

cms тоже категорически нельзя использовать, надо самому написать движок. Зачем использовать чужой говнокод если можно сидеть и написать свой собственный движок! Ведь большинство cms славятся своими глюками!

Mugen1 так интересно, раз бутстрап для школьников криворучек (значит до безобразия прост), сможешь ли ты сверстать качественный сайт на том же бутстрапе и показать тут всем криворуким?

Причём здесь цмс, зачем ты мешаешь совершенно 2 разных плоскости ? Зачем ты лезешь в дисскас заведомо не имея ни одного аргумента?

ахаха то есть, ты сейчас делаешь из людей, которые пишут руками код дураков ?Только такой вот о ком я и говорил может сравнить чистый код,  с фреймворком.

Зачем мне подписывать классики к блокам, когда я сам могу это сделать, зачем мне пользоваться заготовками и унифицировать стиль когда на это рессетов хватает, всё для вас любителей быстро где то пёрнуть и выдать это за шедевер. Шёл бы ты свой бутстрап изучать  :rofl:

 

Больше ни слова, мне всё стало ясно.

Edited by Mugen1
Link to comment
Share on other sites

Мне кажется что есть люди которые в общем то, и не хотят, и не планируют изучать "весь html и css на свете", и для них проще всего воспользоваться наборов готовых решений, который кто то написал за них, тот кто разбирается в вопросе. Лично я пока что особо не изучал css фреймворки, но в дальнейшем я собираюсь непременно уделить им внимание, помимо множества готовых решений которые как я уже говорил написаны талантливыми веб разработчиками, это как мне кажется еще и неплохая "платформа для самообучения", так как там можно "подсмотреть много хорошего кода". И если не нравятся классы в html то для этого есть препроцессоры, которые в совокупности с фреймворком дают отличный результат и в разы ускоряют работу.

 

upd: А "говнокод" всегда был и будет, и причина тут вовсе не в фреймворках.

Edited by xzarxzes
  • Like 1
Link to comment
Share on other sites

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

 

если например в студию поступило 10 заказов на сайты-визитки для детских садов, то неразумно и невыгодно по деньгам будет изобретать велосипед. или если например сбербанк заказал сделать сайт с интеграцией платёжных систем и какими-нибудь хитрыми картотеками, то не подойдёт никакая  цмс

Edited by cyklop77
  • Like 1
Link to comment
Share on other sites

https://github.com/cyborgandroid/htmlforum-fabrique-cyborgandroid/blob/master/src/less/blocks/header.less

Тут хорошо бы упростить списки с меню, с точки зрения описания стилей. Хорошо подойдут модификаторы. Вместо того что бы вешать на все классы одни и теже стили, можно использовать основной + одполнительные (модификаторы).

 

 

Я правильно понял?

.menu-list {    padding-left: 0;    list-style: none;    line-height: 1;    li {        display: inline-block;        padding-right: 8px;    }        li+li {        border-left: 1px solid @brand-primary;        padding-right: 5px;        padding-left: 8px;    }    .active {        font-weight: bold;        color: @brand-secondary;    }}.menu-list-simple {    li+li {        border: none;        padding: 0;        }    }

И jade:

.header-menu  ul.menu-list    li      a(href='#') Log In    li      a(href='#') Register    ....header-currency  ul.menu-list.menu-list-simple     li Currency:    li.active      a.active(href='#') £    li      a(href='#') $    ...
Link to comment
Share on other sites

 

 

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

 

кстати что неожиданно, даже пайпал на бутстрап перешёл. вот уж не думал, что такое возможно О_0

Edited by cyklop77
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By Spllit
      Подскажите как настроить настроить плагин в VS Code "Easy Less" таким образом, чтобы этот плагин компилировал css файл в другую папку (не в ту где лежить .less)
      Я пробовал в настройки Package.json записывать компанду, которая указана в докумментации на гите 
      { "less.compile": { "main": ["${workspaceRoot}\\css\\main.less"] } } но эта команда просто добавляет дополнительные папки в корень той, где лежит .less. 
      Добавил скрин с тем куда нужно положить скомилированный файл. Если кому не трудно напишите команду, чтобы плагин сразу туда отправлял скомипилированный файл.

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Tascan
      Всем привет.
      В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
      Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
      А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy