Илья Андриенко: Вёрстка в проекте глазами ...

Click here to load reader

  • date post

    16-Jun-2015
  • Category

    Technology

  • view

    224
  • download

    2

Embed Size (px)

description

В первой части своей презентации я рассказал о CSS-препроцессорах, и, на примере препроцессора LESS, о четёрёх основных их возможностях, которые могут заинтересовать и backend-разработчика. Вторая часть была посвящена разбору проблемной ситуации, когда в условиях нехватки времени у backend-разработчика возникает необходимость вносить мелкие правки в вёрстку, а разработчик не готов пользоваться и настраивать препроцессор, в следствие чего драгоценное время тратится на организационные вопросы. Рассмотрены основные причины этой неготовности и простые средства их решения. PHP User Group Ukraine в социальных сетях: https://www.facebook.com/pug.ukraine https://vk.com/pug.ukraine https://www.linkedin.com/groups/PHP-User-Group-Ukraine-6703717

Transcript of Илья Андриенко: Вёрстка в проекте глазами ...

  • 1. , DataArt

2. I am wondering, why are you here? Hmm? 3. : 4. CSS- 5. .. 6. 2009 . CSS => LESS => CSS JavaScript (NodeJS) 7. @background_color: #ffffff; @foreground_color: #000000; .content{ background: @background_color; color: @foreground_color; } .footer{ background: @foreground_color; color: @background_color; } .content { background: #ffffff; color: #000000; } .footer { background: #000000; color: #ffffff; } 8. .get_rid_of_text(){ text-indent: -9999px; white-space: nowrap; overflow: hidden; } .logo_header{ width: 200px; height: 50px; background: url("logo.png") no-repeat; .get_rid_of_text(); } .logo_footer{ width: 75px; height: 50px; background: url("logo-foot.png") no-repeat; .get_rid_of_text(); } .logo_header { width: 200px; height: 50px; background: url("logo.png") no-repeat; text-indent: -9999px; white-space: nowrap; overflow: hidden; } .logo_footer { width: 75px; height: 50px; background: url("logo-foot.png") no-repeat; text-indent: -9999px; white-space: nowrap; overflow: hidden; } 9. .parent{ background:#ff0; .child{ background: #0f0; } } .parent{ background: #ff0; } .parent .child { background: #0f0; } 10. @import "style"; @import "layout"; /* Layout */ .content{ width: 80%; margin: auto; } .footer{ height: 200px; } /* Styles */ .content{ color:#ff0; background: #000; } .footer{ background: #000; color:#f00; } /* Styles */ .content{ color: #ff0; background: #000; } .footer{ background: #000; color: #f00; } /* Layout */ .content{ width: 80%; margin: auto; } .footer{ height: 200px; } 11. : , ( ) 12. ( ) CSS- 13. CSS- 14. CSS- CSS- ( ) 15. ( ) CSS- CSS- ( ) 16. . 17. 18. Windows. Node Ruby ( ) , http://tinyurl.com/tools-css 19. : , . 20. ..: source maps 21. IDE. ( ) 22. : , ! :P (http://tinyurl.com/tools-css) 23. ! http://tinyurl.com/pugdnepr ilia.andrienko ilya.andriyenko@dataart.com :