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

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

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

 

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

 

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

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

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

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

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

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

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

[Great Rash]

Скажите для начала под какие браузеры вам нужна работоспособность?

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

Скажите для начала под какие браузеры вам нужна работоспособность?

Под все современные браузеры +IE9 и выше. В IE8 - чтобы просто было все читабельно.

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

[Sergik+]

 

Скажите для начала под какие браузеры вам нужна работоспособность?

Под все современные браузеры +IE9 и выше. В IE8 - чтобы просто было все читабельно.

 

IE10 даже уже почти ушел. А IE9 уже все ушел от нас.

[Great Rash]

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

IE10 даже уже почти ушел. А IE9 уже все ушел от нас.

Заказчику это расскажите. 

[Sergik+]

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

 

 

IE10 даже уже почти ушел. А IE9 уже все ушел от нас.

Заказчику это расскажите. 

Я про современность во фразе, а некоторые заказчики до сих пор про ie8 пишут.

Edited November 13, 2014 by Sergik+

[Great Rash]

Ок, ИЕ 11 - это модно, современно, молодёжно. Дальше-то что?

[Anna Zharova]

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

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

то на мобильные браузеры тоже оглядываться надо.

 

Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть? 

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

[Sergik+]

 

то на мобильные браузеры тоже оглядываться надо.

 

Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть? 

 

С бутстрапом насколько я знаю никаких ньюансов нету. Хороший фреймворк, можно полностью под

себя переделать.

[Great Rash]

А какие ньюансы могут быть?

Я просто хотел порекомендовать вот такую сетку. Но она не будет работать на Opera Mini, и для IE8 потребуется полифилл. Просто я считаю бутстраповскую сетку довольно архаичной, перегруженной и вообще неудобной.

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

 

 

то на мобильные браузеры тоже оглядываться надо.

 

Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть? 

 

С бутстрапом насколько я знаю никаких ньюансов нету. Хороший фреймворк, можно полностью под

себя переделать.

 

Сейчас уже углубляться в Bootstrap нет времени. Я просто хочу использовать его основные  принципы. Сайт довольно простой.

[Sergik+]

 

А какие ньюансы могут быть?

Я просто хотел порекомендовать вот такую сетку. Но она не будет работать на Opera Mini, и для IE8 потребуется полифилл. Просто я считаю бутстраповскую сетку довольно архаичной, перегруженной и вообще неудобной.

 

Полностью с вами согласен насчет бутстраповской сетки, я на susy сейчас пишу проект - красота, чистый html,

но для susy нужен sass и еще желательно compass для вертикального ритма.

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

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

 

 

А на этот вопрос ответьте,пожалуйста.

 

 

А какие ньюансы могут быть?

Я просто хотел порекомендовать вот такую сетку. Но она не будет работать на Opera Mini, и для IE8 потребуется полифилл. Просто я считаю бутстраповскую сетку довольно архаичной, перегруженной и вообще неудобной.

 

Полностью с вами согласен насчет бутстраповской сетки, я на susy сейчас пишу проект - красота, чистый html,

но для susy нужен sass и еще желательно compass для вертикального ритма.

 

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

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

[Sergik+]

 

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

 

 

А на этот вопрос ответьте,пожалуйста.

 

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

добавляют только они видимо знают.

Edited November 13, 2014 by Sergik+

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

Row это обертка простая, считаю совсем не нужная (только именно здесь без нее ни как)

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

[sigma77]

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

1. Прижать блоки к правому и левому краю не нарушив сетки.

2. Очистка потока. 

[Sergik+]

 

Row это обертка простая, считаю совсем не нужная (только именно здесь без нее ни как)

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

 

Вот пример кода сетки где row просто не существует и ничего не распадается:

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

[mrnobody]

http://jsbin.com/gabij/1/edit?html,css,output

[Great Rash]

 

 

Row это обертка простая, считаю совсем не нужная (только именно здесь без нее ни как)

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

 

Вот пример кода сетки где row просто не существует и ничего не распадается:

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

Даю вводную: 1 строка - 3 колонки, вторая строка - 4 колонки, 3 строка - 2 колонки. Как сделать без row?

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

http://jsbin.com/gabij/1/edit?html,css,output

Да-да, я об этом и говорю: хочу это использовать.

Тогда это нужно, чтобы контент не прилипал к краям? 

container{padding: 0 15px;}

 

 

 

Row это обертка простая, считаю совсем не нужная (только именно здесь без нее ни как)

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

 

Вот пример кода сетки где row просто не существует и ничего не распадается:

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

Даю вводную: 1 строка - 3 колонки, вторая строка - 4 колонки, 3 строка - 2 колонки. Как сделать без row?

 

.row - это просто строка, обычный контейнер, так я понимаю? Хотя не обычный, если у нее есть отрицательные margin. Вот это я и хочу понять -когда нужно применять .row, а когда - нет.

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

[Great Rash]

.row нужно применять всегда

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

.row нужно применять всегда

Почему?

А если у общего контейнера не будет padding, - то, что в .row будет шире и вылезет за пределы контейнера.

Я хочу разобраться со всем этим на примере этого сайта:

http://remtsoy.com/tf_templates/traveler/demo_v1_7/index-2.html

 

Здесь есть .container с отступами слева и справа. И есть .row.

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

[Great Rash]

Вот так грид обычно выглядит:

 

<div class="container">  <div class="row">    <div class="col-6">      колонка на 1/2 грида    </div>     <div class="col-6">      колонка на 1/2 грида    </div>  </div>   <div class="row">    <div class="col-4">      колонка на 1/3 грида    </div>     <div class="col-4">      колонка на 1/3 грида    </div>     <div class="col-4">      колонка на 1/3 грида    </div>  </div>   <div class="row">    <div class="col-3">      колонка на 1/4 грида    </div>     <div class="col-3">      колонка на 1/4 грида    </div>     <div class="col-3">      колонка на 1/4 грида    </div>     <div class="col-3">      колонка на 1/4 грида    </div>  </div></div>

Как сделать без .row я слабо представляю.

[Sergik+]

 

.row нужно применять всегда

Почему?

А если у общего контейнера не будет padding, - то, что в .row будет шире и вылезет за пределы контейнера.

Я хочу разобраться со всем этим на примере этого сайта:

http://remtsoy.com/tf_templates/traveler/demo_v1_7/index-2.html

 

Здесь есть .container с отступами слева и справа. И есть .row.

 

row еще и поток очищает, пример сайта не совсем удачный, по тому как реализовано меню

видно что слепили из того что было )

И да правильно выше подмечено у бутстрапа сетка на row и без него просто никак.

Edited November 13, 2014 by Sergik+

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

Спасибо всем! Кое-что уже прояснилось. Продолжаю работу ...

 

Замечательно, что есть такой форум, куда можно обратиться и получить помощь!