Hasiev

Цикл статей от Влада Мержевича: https://webref.ru/layout/bootstrap

Могу посоветовать Chrome DevTools, сам пользуюсь, очень хороший инструмент!

@Igor Schnaider, Спасибо!

Как это сделать? 

В лесс можно поставить тильду и кавычки .. 

А тут как быть?

Вот так, в sass-е не работает ..

Без скобок тоже не будет работать, т.к там есть двоеточие.

$tablet-width: (min-width: 750px);

.main-header {
  width: 100px;
  height: 100px;

  @media $tablet-width {
    
  }
}

.blc0::after {
	content: '';
	display: table;
	clear: both;
}

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

Все подгрузи, скрой, а потом через js отображай по событию - клик.

Или подгружай выборочно, с помощью AJAX.

Сам придумывал вид под разные разрешения, или в макете отрисованны?

4 часа назад, Switch74 сказал:

C размерами думаю подшаманите
https://jsfiddle.net/51m40yt5/

Спасибо, взял на заметку ) Мне до такого еще расти, и расти )

@DivMan Хотелось бы на оба варианта посмотреть .. То есть и адаптив, и фикс ..

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

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

Спасибо!

ИЗОБРАЖЕНИЕ

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

В 31.07.2017 в 05:56, Igor Schnaider сказал:

Ну так делайте через установку высоты, а не полей.

А как их рядом расположить? Сделать обертку для этих двух элементов?

Я бы вообще за такой макет не брался, приведем весь веб к минимализму!

Можно в песочнице код посмотреть?

Селектор ~ (тильда) 

2 минуты назад, Igor Schnaider сказал:

У вас тут расхождение:

.container {
	min-width: 1000px;
	padding: 0 10px;	/* ☜ */
	margin: 0 auto;
}

.row {
	display: flex;
	margin: 0 -15px;	/* ☜ */
}

Либо 10px, либо 15px.

Да, действительно, спасибо. Скажите, а где можно посмотреть как делают модульные сетки на флекс (не bootstrap 4)? Ничего толкового не нашел в гугле .. И как лучше задавать ширину колонкам, width, или flex-basis?

При построении сетки на flex-box, появляется горизонтальный скролл, как решить эту проблему?

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

Без nth-child не обойтись?

Спасибо!

https://jsfiddle.net/qLz87c4r/

https://codepen.io/anon/pen/JydmbY

@Svetlana_P, О, да, спасибо! То что надо.

Здравствуйте, в макетах часто попадаются трансформированные секции (наклонные, в виде параллелограмма, или с углом внизу .. Скажите, как их делают? Подразумеваю что на css трансформациях .. Но тогда вся секция вместе с контентом поварачивается .. Или делают через псевдоэлементы? Если есть статья, или видео-урок, буду признателен ..

10 минут назад, andrey7287 сказал:

2 колонки

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

100 / 12 = 1 колонка

100 / 12 + 100 / 12 = 2 колонке 

Так понятнее ?

Не до конца, но все работает, спасибо! ))

6 минут назад, andrey7287 сказал:

Откуда вы взяли 11 если колонок 12 ? ( 100 / 12 * 2  = 16.6666 )

 

А откуда вы взяли *2? По вашей формуле действительно все считается верно .. Но можете подробней её объяснить? ))

То есть мы разделили 100% на кол-во колонок .. А откуда еще умножение появилось?

@AlexZaw То есть, - 100% / 11 = 9.09 - 30px(margin-left, margin-right). А как из процентов вычесть px? 1px это сколько %?

В css сетках есть такое понятие как колонки, во фреймворке бутстрап их кол-во равно 12, в стилях им прописывают следующие ширины: 

.col-12 {
    width: 100%;
  }
  .col-11 {
    width: 91.66666667%;
  }
  .col-10 {
    width: 83.33333333%;
  }
  .col-9 {
    width: 75%;
  }
  .col-8 {
    width: 66.66666667%;
  }
  .col-7 {
    width: 58.33333333%;
  }
  .col-6 {
    width: 50%;
  }
  .col-5 {
    width: 41.66666667%;
  }
  .col-4 {
    width: 33.33333333%;
  }
  .col-3 {
    width: 25%;
  }
  .col-2 {
    width: 16.66666667%;
  }
  .col-1 {
    width: 8.33333333%;
  }

Так вот, откуда берутся эти ширины? Если я разделю 100% на 12 колонок, у меня действительно получится 8.33%. Но, при делении 100% на 11 колонок, у нас уже получается 9.09, а в том же бутстрапе в стилях указано: width: 16.66666667%; Так как в действительности нужно делить колонки? Мб, есть какая-то специальная формула? Спасибо!

2 часа назад, klierik сказал:

 

Если очень жирный макет то ничто не спасет. Как правило в таких случаях кропается на блоки.

В остальном терпимо, винт, правда, маловат. имхо. Но с другой стороны — какие варианты?

Да за накопитель я не волнуюсь, если что буду использовать облако .. Есть еще такие варианты .. HP 250 G5 (W4N06EA) , Dell Inspiron 3567 (I35H345DIL-6BK), Lenovo IdeaPad 310-15IAP (80TT0053RA), Lenovo IdeaPad 310-15IAP (80TT004XRA), Asus VivoBook X540LA (X540LA-XX360D)

3 минуты назад, klierik сказал:

в притык

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