Задать вопрос
Sower

Sower

Лайки

  • Flexbox vs float?

    dom1n1k
    @dom1n1k
    По поводу того, что flex лучше всегда - это конечно чушь. Есть много простых ситуаций, когда он не дает никакого профита, тогда как старый добрый float решает проблему целиком. Флекс, конечно, тоже решит - но с побочными эффектами в виде неполной кроссбраузерности.
    Предложения при этом делать фоллбеки на флоатах умиляют - если всё равно их делать, так не проще ли ими и ограничиться?!

    В итоге, ответ на вопрос очень простой - flex нужно использовать там, где он дает конкретные преимущества. Самое очевидное - нужно автораспределение ширины блоков с подстройкой к ширине контента. Или вам нужно менять порядок блоков (свойство order).
    Если ничего этого не планируется - flex не нужен! Сейчас уже наплодили сеток и "фреймворков", где flex используется фактически для имитации float-ов! Ну типа же стильно, модно, молодежно. Я ж крутой разработчег, не хухры-мухры.

    При верстке каждого блока нужно задавать себе вопрос: "я использую flexbox, чтобы что?" Если на вопрос есть четкий ответ - да, нужно использовать. Если только бла-бла типа "ну это современно, прогрессивно и пр" - использовать старые железобетонные приёмы.
    Ответ написан
    7 комментариев
    7 комментариев

  • Как использовать emmet+бэм?

    kudesa
    @kudesa
    Проектирую и верстаю адаптивные сайты
    Непонятно, какой редактор использует ТС, но в саблайме это настраивается в preference → package settings → emmet → settings-user 
    "preferences": {
        "bem.elementSeparator": "__",
        "bem.modifierSeparator": "_",
        "bem.shortElementPrefix": "-",
},

    И еще в snippets должен быть указан bem в filters, вот так 
    "snippets": {
        "html" : {
            "filters" : "html, bem",
}
}

    и правильно писать нужно так
    .page-header>.__top-menu
    Ответ написан
    3 комментария
    3 комментария

  • Как правильно верстать фоновые изображения?

    @holymotion
    background-size:cover;
    Ответ написан
    2 комментария
    2 комментария

  • Сколько времени должна занимать верстка этой страницы у опытного верстальщика?

    vizual
    @vizual
    Около 2-3 рабочих дней
    Ответ написан
    2 комментария
    2 комментария

  • Что интересного есть в вашем стандартном шаблоне?

    @bogomazov_vadim
    Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
    Заменяем длинный текст placeholder многоточием:
    input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}

    Скрываем placeholder при фокусе:
    :focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

    Курсор для label + отмена раздражающего выделения при клике:
    label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    Только вертикальный ресайз для textarea (horizontal часто ломает диз):
    textarea {
	resize: vertical;
}

    Убираем дефолтный курсив у address:
    address {
	font-style: normal;
}

    Убираем подсветку полей:
    input:focus,
textarea:focus {
		outline: none;
}

    Адаптивные img:
    img {
	height: auto;
	max-width: 100%;
	width: auto\9;
}

    Адаптивные видео:
    .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    Перенос слов:
    .break-word {
        word-wrap: break-word;
}

    Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.
    ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

    Нумерованный список с подпунктами:
    ol {
	counter-reset: list1;

	li:before {
		counter-increment: list1;
		content: counter(list1) '. ';
	}

	ol {
		counter-reset: list2;

		li:before {
			counter-increment: list2;
			content: counter(list1) '.' counter(list2) '. ';
		}

		ol {
			counter-reset: list3;

			li:before {
				counter-increment: list3;
				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
			}
		}
	}
}


    update дополнительно стили для печати

    P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
    Ответ написан
    5 комментариев
    5 комментариев