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%; …
Отладка мобильных сайтов через Google Chrome
Отличное видео от Paul Irish. Рассказывает, как отлаживать сайты на мобильных устройствах без плагинов. Как поменялась эмуляция. Ну и немного про workspaces (теперь поддерживается и less) http://youtu.be/gZH1d2Co1X0
Ускорение скролла страниц
http://habrahabr.ru/post/204238/ Предлагают сделать .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’] } } }
CSS: обрезание текста с многоточием
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/