Download - «Корисна верстка» - Юрій Артюх
Transcript
![Page 1: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/1.jpg)
Полезная верстка 5 маленьких лайфхаков
Юрий Артюх, 2014
![Page 2: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/2.jpg)
![Page 3: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/3.jpg)
О чем я знаю
• Как верстать 10 лет подряд
• Как делать это очень быстро
• Как получать удовольствие от процесса
• Куча странных хаков для верстки
![Page 4: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/4.jpg)
1. Пропорции блоков
![Page 5: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/5.jpg)
![Page 6: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/6.jpg)
![Page 7: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/7.jpg)
2. Sass
![Page 8: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/8.jpg)
Классы для HTML
![Page 9: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/9.jpg)
Получим
![Page 10: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/10.jpg)
Адаптивность
![Page 11: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/11.jpg)
![Page 12: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/12.jpg)
Расчеты
![Page 13: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/13.jpg)
http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
![Page 14: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/14.jpg)
Цвета
![Page 15: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/15.jpg)
![Page 16: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/16.jpg)
![Page 17: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/17.jpg)
Все вместе:
![Page 18: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/18.jpg)
![Page 19: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/19.jpg)
19
![Page 20: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/20.jpg)
![Page 21: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/21.jpg)
![Page 22: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/22.jpg)
3. Анимировать SVG
![Page 24: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/24.jpg)
4. Avocode
![Page 25: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/25.jpg)
![Page 26: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/26.jpg)
![Page 27: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/27.jpg)
5.
![Page 28: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/28.jpg)
5.
![Page 29: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/29.jpg)
5.
![Page 30: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/30.jpg)
Автоматизируйте, берегите себя
• Gulp
• Alfred
• Avocode
• Breaktime
![Page 31: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/31.jpg)
Берегите глаза, отвлекайтесь
![Page 32: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/32.jpg)
Спасибо! Надеюсь пригодится :)
CSSing.org.ua
twitter.com/akella
facebook.com/akella
![Page 33: «Корисна верстка» - Юрій Артюх](https://reader033.vdocuments.pub/reader033/viewer/2022052508/55a0a5351a28ab50778b46b4/html5/thumbnails/33.jpg)