Serj-One
@Serj-One
i'm sexy and i know it

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

Доброго времени суток, коллеги фронтендеры.
У каждого из нас есть свой базовый шаблон, включающий некоторые классы и набры свойств, используемые в каждом проекте.
Привожу пару своих (очевидных и избитых) для примера:

Делаем, чтоб размеры включали в себя значения padding и border:
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


clearfix:
.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}


Прижимаем footer:
UPD для подписавшихся.
Метод Райана Фэйта уступил место более удобному Bootstrap sticky footer.

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}


И т.д. Весь файл не привожу, чтоб не делать из вопроса простыню.
Естественно, + normalize.css
А какие классы и наборы свойств лежат в вашем стандартном шаблоне?
  • Вопрос задан
  • 18321 просмотр
Пригласить эксперта
Ответы на вопрос 10
bogomazov_vadim
@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. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
Ответ написан
nazarpc
@nazarpc
Open Source enthusiast
Clearfix не использую ибо flexbox и все дела
Ответ написан
@JeyFisher
При использовании такого css для адаптивных изображений:

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


Всегда добавляю fix для google map (кнопки навигации):

#map img {
    max-width: none;
}
Ответ написан
@Boshnik
normalize.css
+
/* Mobile Screen Resizing */
@-webkit-viewport {
  width: device-width;
  zoom: 1.0;
}
@-moz-viewport {
  width: device-width;
  zoom: 1.0;
}
@-ms-viewport {
  width: device-width;
  zoom: 1.0;
}
@-o-viewport {
  width: device-width;
  zoom: 1.0;
}
@viewport {
  width: device-width;
  zoom: 1.0;
}


/* Выравнивание по центру */
.absolute.center,
.fixed.center {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.center, .right.left{ 
  margin:auto 
}
.top    { top:0  }
.right  { right: 0 }
.bottom { bottom: 0 }
.left   { left: 0 }


/* btn disabled */
.btn-disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  background: #ccc !important;
}
.btn-disabled:hover {
  -webkit-box-shadow:none !important;
          box-shadow:none !important;
  background: #ccc !important;
}


/* img gray*/
.img-gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.img-color:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  filter: none; /* IE 6-9 */
}


/* background */
.parallax {
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
}
.bg-cover {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


P.S. background-image задаю в инлайн стилях, удобно при работе с CMS MODX
Ответ написан
@lnked
Практически все то же что и у вас (только футер прижимаю немного по другому) +
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

button {
	cursor: pointer;
}

input, textarea, button {
	outline: none;
}
input, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.inner {
	width: 100%;
	display: table;
}
.inner:after {
	width: 100%;
	clear: both;
	display: block;
	content: ' ';
}
* html .inner {
	margin-left: -3px;
}

::-webkit-input-placeholder { color: #000000; opacity: .45; }
:-moz-placeholder { color: #000000; opacity: .45; }
::-moz-placeholder { color: #000000; opacity: .45; }
:-ms-input-placeholder { color: #000000; opacity: .45; }

.disable-hover {
	pointer-events: none;
}
Ответ написан
bukinion
@bukinion
web-developer ну и временами BA, UX, UI
Начал бы с того, что подобные сниппеты идеально хранить, шарить и даже командно работать в Gist (от GitHub), у Gist, кстати есть приложение на Хром (работает и оффлайново, что плюс), он легко встраивается в Sublime, и даже есть в Web Storm. Воркфло изрядно ускоряется с этим.

подсветка полей... в приведенных примерах для полноты не хватает select, кто-то забывает button)) Главное, что бы при переписывании нативного outline для :focus, для него находилась замена. Прежде всего потому что будет страдать accessibility.

более полный перенос слов:
@mixin word-wrap() {
      -ms-word-break: break-all;
      word-break: break-all;
      word-break:     break-word;
      -webkit-hyphens: auto;
      -moz-hyphens:    auto;
      hyphens:         auto;
}


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

<html lang="ru"></html>

Добавить язык.

Или наоборот в случае когда на необходима только одна строчка текста:

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


Вообще типографику люблю, поэтому есть и такое еще:

.like-inline:after {
	content: '\A';
	white-space: pre;
}


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

dl
     dt Артикул
     dd 1729110 
     dt Рост
     dd 164


Или нужно ряд ссылок оформить как список.

Класс для инлайн-блоков (что-то их недоиспользуют, а они намного круче float):

.ib {
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline;
}
Ответ написан
thecoder
@thecoder
Разработчик веб-приложений и сервисов.
Дополню маленькой хитростью как убрать мелькание при тапе на iOS, когда событие ловится с помощью delegate.
*{
    -webkit-tap-highlight-color:transparent;
}
Ответ написан
nurise
@nurise
Front-end, WordPress, Design
+ normalize.css
body { cursor: default; }
* { outline: 0; }
* { transform: translate3d(0, 0, 0); }
html { font-size: 62.5%; }
Ответ написан
Duckoff
@Duckoff
Арт-директор студии Axaple
Для инлайновых ссылок в меню, новостных или ссылочных блоках, которые бывают больше одной строки, использую padding-top: .3em; — избавляет от мелькания курсора мыши между строк.
Ответ написан
Judixel
@Judixel
Front-end Engineer
Вертикальное выравнивание по середине для inline-block
.vertical-middle {
    white-space: nowrap;
    > *{
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
    &:after{
        content: '';
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
}

Расположение блоков по всей ширине родителя, тоже для inline-block
.justi {
    text-align: justify;
    display: block;
    &:after {
        content:'';
        display: inline-block;
        width: 100%;
        height: 0;
        visibility: hidden;
    }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы