Category Archives: HTML and CSS

Задание ширины квадратных элементов без указания ширины и высоты («плиточка»)

Без указания высоты, ширины, но и без дергания после загрузки картинок и контента. И без таблиц. Эдакая «плиточка» элементов разных ширин и высот.

<style>
.main {
width: 500px;
}

.structure {
width: 25%;
float: left;
}

.wrapper {
position: relative;
padding: 100% 0 0;
}

.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border: 1px solid #000;
}
</style>
<div class="main">
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
</div>

<style>

.main {

width: 500px;

}

.structure {

width: 25%;

float: left;

}

.wrapper {

position: relative;

padding: 100% 0 0;

}

.img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #ccc;

border: 1px solid #000;

}

</style>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

.structure отвечают за взаимное расположение элементов на странице, а во вложенных элементах скрыта магия (всё дело в волшебной теме с тем, что паддинг считается от ширины родительского элемента). JS Bin В …

Отладка мобильных сайтов через Google Chrome

Отличное видео от Paul Irish. Рассказывает, как отлаживать сайты на мобильных устройствах без плагинов. Как поменялась эмуляция. Ну и немного про workspaces (теперь поддерживается и less) http://youtu.be/gZH1d2Co1X0

Ускорение скролла страниц

http://habrahabr.ru/post/204238/ Предлагают сделать

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

.disable-hover,

.disable-hover * {

pointer-events: none !important;

}

и вешать класс при старте скролла.

Подборка полезностей про favicon

https://github.com/audreyr/favicon-cheat-sheet

Инструмент для генерации шаблонов с flexbox

http://the-echoplex.net/flexyboxes/

CSS-фреймворк

http://topcoat.io/topcoat/topcoat-mobile-dark.html — аналог twitter bootstrap, но вроде заточенный на скорость и под мобилы.

Grunt-таск для избавления от лишних стилей в css

https://github.com/addyosmani/grunt-uncss Конфиг примерно такой:

uncss: {
  dist: {
    files: {
      'dist/css/tidy.css': ['app/index.html','app/about.html']
      }
    },
    options: {
      compress:true
    }
}
processhtml: {
  dist: {
    files: {
      'dist/index.html': ['app/index.html'],
      'dist/about.html': ['app/about.html']
    }
  }
}

uncss: {

dist: {

files: {

'dist/css/tidy.css': ['app/index.html','app/about.html']

}

options: {

compress:true

}

processhtml: {

dist: {

files: {

'dist/index.html': ['app/index.html'],

'dist/about.html': ['app/about.html']

}

CSS: обрезание текста с многоточием

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;              /* "overflow" value must be different from "visible" */ 

  text-overflow:    ellipsis;
}

p {

white-space: nowrap;

width: 100%;

overflow: hidden; /* "overflow" value must be different from "visible" */

text-overflow: ellipsis;

}

Не знал, позор https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Огромное количество полезных ссылок для фронт-енд разработчика

https://github.com/dypsilon/frontend-dev-bookmarks

Motio — библиотека для анимации фонового изображения

http://darsa.in/motio/