Адаптивная верстка: использование принципов Bootstrap, но без него

[Светлана Г.]

Задача сверстать адаптивный сайт.

 

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

 

Решила использовать принципы Bootstrap.

Возникли принципиальные вопросы.

.row {margin: 0 -15px;;} 

.container {padding: 0 15px;margin: 0 auto;}

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

Каково назначение .row вообще?

Edited November 13, 2014 by Светлана Г.

[Светлана Г.]

Теперь возник еще один "подводный камень" в данном вопросе - какую верстку использовать в качестве базовой: для мобильных версий или для desktop?

Bootstrap в качестве базовых стилей используется для маленьких разрешений.

 

У меня есть 2 макета - на 960px и на мониторы более 1680px.- макет на 1340px.

 

Привычнее для меня сначала верстать для desktop, тем более к мобильным версиям не такие жесткие требования у заказчика.

А если еще и под IE8 - то ему надо отдельную таблицу стилей загружать.

[mrnobody]

Вот так можно:

@media screen and (min-width: 1680px) {  .container {    width: 1340px;  }}

 Но нужно видеть макеты, в бутстрапе есть классы для колонок под разные разрешения экрана - http://getbootstrap.com/css/#grid-options

Edited November 14, 2014 by mrnobody

[Sensei]

Я бы наоборот сделал

.container {    max-width: 1340px;}@media screen and (max-width: 1680px) {      .container {        max-width: 960px;    }    }

Мне удобнее верстать от большего к меньшему.

А проектировать сайт да, лучше с самого маленького экрана.

[Great Rash]

Есть такой принцип "mobile first": он не лишен смысла, т.к. растянуть всегда легче, чем сузить. Понятно, что вам привычней, но что-то новое надо уже начинать пробовать. Хотите вы этого или нет,но доля мобильного веба в ближайшие годы будет только расти, соответсвенно заказы для него - тоже.

[Switch74]

А мне тоже удобнее от большого писать:

1. Пишу я сайт на компе, а не на телефоне и естесно тест в первую очередь проводится на большом экране.

2. Дизайны рисуют в первую очередь для десктопа (если это конечно не ориентированный на мобильного пользователя сайт), а чаще всего только под десктоп.

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

[Sergik+]

Мне тоже кажется нелогичным правило mobile-first, хотя вроде никто и не обязывает.

[Switch74]

mobile-first логично так же как от простого к сложному, сначала сделать основу - минимум так сказать, а потом расширять до десктопа.

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

 

хотя наверно я попутал процесс создания с порядком написания стилей.

 

Стили у меня пишутся от маленького разрешения к большому

[Sensei]

Есть такой принцип "mobile first": он не лишен смысла, т.к. растянуть всегда легче, чем сузить. Понятно, что вам привычней, но что-то новое надо уже начинать пробовать. Хотите вы этого или нет,но доля мобильного веба в ближайшие годы будет только расти, соответсвенно заказы для него - тоже.

 

Разве то, что я пишу стили от десктопа к мобильным подразумевает отказ от адаптивности и не учитывание растущей доли мобильного веба?

«mobile first» хорош на стадии дизайна. Подход к проектированию, а не к верстке, т.е. приступая к разработке, дизайнер отталкивается от экранов мобильных устройств.

[Great Rash]

Разве то, что я пишу стили от десктопа к мобильным подразумевает отказ от адаптивности и не учитывание растущей доли мобильного веба?

Где я такое написал?

 

 

 

«mobile first» хорош на стадии дизайна. Подход к проектированию, а не к верстке, т.е. приступая к разработке, дизайнер отталкивается от экранов мобильных устройств.

Вполне возможно.

 

UPD: Но если нет разных вариантов макета (т.е. макет изначально под десктоп сделан), то мне кажется логичным верстать сперва мобильную версию. Чтобы сразу определиться какие элементы прятать и на каких разрешениях. Ещё раз повторю, что мне кажется, что увеличить, растянуть проще чем уменьшить, сузить.

[Switch74]

 

Есть такой принцип "mobile first": он не лишен смысла, т.к. растянуть всегда легче, чем сузить. Понятно, что вам привычней, но что-то новое надо уже начинать пробовать. Хотите вы этого или нет,но доля мобильного веба в ближайшие годы будет только расти, соответсвенно заказы для него - тоже.

 

Разве то, что я пишу стили от десктопа к мобильным подразумевает отказ от адаптивности и не учитывание растущей доли мобильного веба?

«mobile first» хорош на стадии дизайна. Подход к проектированию, а не к верстке, т.е. приступая к разработке, дизайнер отталкивается от экранов мобильных устройств.

 

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

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

После применятся свойства для max-width:1680px и они изменят ширину страницы на другую, а так же могут стилизовать кучу других элементов на странице. Это может повторяться N раз.

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

 

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

[Светлана Г.]

Вот так можно:

@media screen and (min-width: 1680px) {  .container {    width: 1340px;  }}

 Но нужно видеть макеты, в бутстрапе есть классы для колонок под разные разрешения экрана - http://getbootstrap.com/css/#grid-options

Я не закачиваю Bootstrap, я лишь хочу использовать его принципы.

 

Интересная дискуссия развернулась!

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

Edited November 14, 2014 by Светлана Г.

[Sensei]

В теории должна быть экономия в размере файла и времени обработки

 

Экономия будет недостаточна велика, чтобы только из-за нее сменить подход к архитектуре CSS.

Это вопрос не производительности, а скорее расширяемости кода.

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

Но пока у меня с этим проблем не возникало.

[Светлана Г.]

А если у меня макет на 960px, шапка, да и все содержимое прижато к краям, т.е. нет отступов, то вот такая структура Bootstrap мне не подходит, потому что содержимое имеет ширину 930px и отступы по 15px с каждой стороны:

<div class="container clearfix">   <div class="row">      <div class="col-md-6">...      </div><!--/.col-md-6-->      <div class="col-md-6">...                        </div><!--/.col-md-6-->                    </div></div>

.container {width: 960px;margin: auto;padding: 0 15px;max-width: 1340px;}.row {  ;  margin-right: -15px;}.col-md-6 {  width: 50%;  float:left;  padding: 0 15px;}

Запуталась я совсем .

[Sergik+]

Самое интересное в бутстрапе это переписать их стили, хотя там еще больше вопросов появится )

[Светлана Г.]

Самое интересное в бутстрапе это переписать их стили, хотя там еще больше вопросов появится )

Как же быть? Вообще не использовать Bootstrap?

[Sergik+]

 

Самое интересное в бутстрапе это переписать их стили, хотя там еще больше вопросов появится )

Как же быть? Вообще не использовать Bootstrap?

 

Не не не я этого не говорил Научитесь со временем использовать, хороший инструмент если его правильно готовить.

Советую вам скачать исходники и посмотреть как он внутри устроен, кое что прояснится сразу.

[Anna Zharova]

Жутко неудобно, но можете вот эту запись объяснить

main { float: left; width: span(4); margin-left: span(2) + gutter(); margin-right: gutter(); }

[Sergik+]

 

Жутко неудобно, но можете вот эту запись объяснить

 

 

main { float: left; width: span(4); margin-left: span(2) + gutter(); margin-right: gutter(); }

 

Что неудобно ? Примерно переводится так, ширина ячейки 4 с отступом слева 2 ячейки+небольшой отступ и еще небольшой отступ справа.

У этой сетки вначале задается ширина контейнера (любая), и количество ячеек (любое количество, где еще есть такая возможность?),

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

не одной другой сетки с такими возможностями, а самое главное что мне нравится это отсутствие сетки в html.

[Anna Zharova]

 

 

Жутко неудобно, но можете вот эту запись объяснить

 

 

main { float: left; width: span(4); margin-left: span(2) + gutter(); margin-right: gutter(); }

 

Что неудобно ? Примерно переводится так, ширина ячейки 4 с отступом слева 2 ячейки+небольшой отступ и еще небольшой отступ справа.

У этой сетки вначале задается ширина контейнера (любая), и количество ячеек (любое количество, где еще есть такая возможность?),

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

не одной другой сетки с такими возможностями, а самое главное что мне нравится это отсутствие сетки в html.

 

А это у нас тоже Bootstrap или что-то другое? Css или sass, less. И где можно почитать об этой сетке

[Sergik+]

 

 

 

Жутко неудобно, но можете вот эту запись объяснить

 

 

main { float: left; width: span(4); margin-left: span(2) + gutter(); margin-right: gutter(); }

 

Что неудобно ? Примерно переводится так, ширина ячейки 4 с отступом слева 2 ячейки+небольшой отступ и еще небольшой отступ справа.

У этой сетки вначале задается ширина контейнера (любая), и количество ячеек (любое количество, где еще есть такая возможность?),

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

не одной другой сетки с такими возможностями, а самое главное что мне нравится это отсутствие сетки в html.

 

А это у нас тоже Bootstrap или что-то другое? Css или sass, less. И где можно почитать об этой сетке

 

Это сетка на основе sass, http://susy.oddbird.net/

[Светлана Г.]

Разобралась с Bootstrap,  все оказалось совсем несложно. Теперь немного запуталась с медиа-запросами.

 

Сверстала одну страницу на 1340px. Хотя понимаю, что основным CSS должен быть, все же под 960px, наверное ). 

 

У меня есть макеты на 1340px (для разрешений больше 1680px) и 960px. Bootstrap использует такие:

@media (min-width: 1200px)

.container {

1. width: 1170px;

}

 

 

@media (min-width: 992px)

.container {

1. width: 970px;

}

 

 

@media (min-width: 768px)

.container {

1. width: 750px;

}

 

Как мне грамотно прописать медиа-запросы под свои размеры? Размер .container должен быть на 30px больше, чем в макете, т.к. он указан с учетом свойства box-sizing:border-box.