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
А какие классы и наборы свойств лежат в вашем стандартном шаблоне?
  • Вопрос задан
  • 18269 просмотров
Пригласить эксперта
Ответы на вопрос 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
Похожие вопросы
КАУС Москва
от 120 000 до 180 000 руб.
Smart Group Москва
от 100 000 руб.
SaveTime Москва
от 140 000 до 200 000 руб.
24 окт. 2018, в 01:07
35000 руб./в месяц
24 окт. 2018, в 00:19
3000 руб./за проект