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
А какие классы и наборы свойств лежат в вашем стандартном шаблоне?
  • Вопрос задан
  • 18065 просмотров
Пригласить эксперта
Ответы на вопрос 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. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
    Ответ написан
  • @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;
    }
    Ответ написан
  • 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
Похожие вопросы