Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

APEX Developers : Do More With LESS !

927 views

Published on

As an APEX Developer you might have experienced that conventional CSS has its drawbacks. And you might have heard about LESS, SCSS, SASS and other weird acronyms. So what do these acronyms mean to you and why should you care?
In this session you will learn how to bring your CSS skill set to the next level using the opportunities brought to you by these new techniques. Although these skills can be applied to any web project, in this session we will be targeting APEX applications.

Published in: Technology
  • Be the first to comment

APEX Developers : Do More With LESS !

  1. 1. Copyright © 2014 APEX Consulting APEX Developers - Do More With Less !! Roel Hartman
  2. 2. 2
  3. 3. LESS
  4. 4. Leaner CSS
  5. 5. SASS
  6. 6. Syntactically Awesome StyleSheets
  7. 7. SCSS
  8. 8. Sassy CSS
  9. 9. OOCSS
  10. 10. Object Oriented CSS
  11. 11. You need a CSS Expert Issue 1
  12. 12. Your CSS File(s) grows Issue 2
  13. 13. No CSS code re-use Issue 3
  14. 14. CSS is fragile Issue 4
  15. 15. CSS increases 1:1 with HTML Result
  16. 16. 16 Your Solution …
  17. 17. Separating Structure from Skin
  18. 18. #button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box { width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #widget { width: 500px; min-height: 200px; overflow: auto; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } <html> <div id=“box”> <button id=“button” /> </div> <div id=“widget”></div> </html> #button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box { width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #widget { width: 500px; min-height: 200px; overflow: auto; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; }
  19. 19. #button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box { width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #widget { width: 500px; min-height: 200px; overflow: auto; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } .button { width: 200px; height: 50px; } .box { width: 400px; overflow: hidden; } .widget { width: 500px; min-height: 200px; overflow: auto; } .skin { border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; }
  20. 20. .button { width: 200px; height: 50px; } .box { width: 400px; overflow: hidden; } .widget { width: 500px; min-height: 200px; overflow: auto; } .skin { border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } <html> <div class=“box skin”> <button id=“button skin” /> </div> <div id=“widget skin”></div> </html>
  21. 21. Separating Structure from Skin
  22. 22. Separating Container from Content
  23. 23. div{ width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; } div h3{ margin: 0px; overflow: hidden; border: solid 1px #ccc; } div p{ margin: 3px; min-height: 200px; overflow: auto; border: solid 1px #ccc; } <html> <div> <h3>Header</h3> </div> <div> <p>Paragraph</p> </div> </html>
  24. 24. .bordered{ border: solid 1px #ccc; } .container{ width: 200px; height: 50px; padding: 10px; } .region-header{ margin: 0px; overflow: hidden; } .flexbox{ margin: 3px; min-height: 200px; overflow: auto; } <html> <div class=“bordered container”> <h3 class=“bordered region-header”> Header </h3> </div> <div class=“bordered container”> <p class=“bordered flexbox”>Paragraph</p> </div> </html>
  25. 25. Separating Container from Content
  26. 26. LESS does MORE
  27. 27. preprocessor .less file(s) .css file client server
  28. 28. <link rel="stylesheet" type="text/css" href="/css/demo2.css"> <aside class="sidemenu"> <h2 class="menu-header">Side menu</h2> <ul class="menu-list"> <li class=“menu-list-item"> <a class="" href="page1.html">item 1</a> </li> <li class=“menu-list-item"> <a class="" href="page2.html">item 1</a> </li> </ul> </aside> <link rel="stylesheet" type="text/css" href="/css/demo2.css"> <aside id="sidemenu"> <h2>Side menu</h2> <ul> <li> <a href="page1.html">item 1</a> </li> <li> <a href="page2.html">item 1</a> </li> </ul> </aside> #sidemenu h2{ color: black; font-size: 16px; } #sidemenu ul li a{ text-decoration: none; color: green; } .sidemenu .menu-header{ color: black; font-size: 16px; } .sidemenu .menu-link{ text-decoration: none; color: green; }
  29. 29. .sidemenu .menu-header{ color: black; font-size: 16px; } .sidemenu .menu-link{ text-decoration: none; color: green; } .sidemenu{ .menu-header{ color: black; font-size: 16px; } .menu-link{ text-decoration: none; color: green; } } Nesting
  30. 30. .sidemenu{ .menu-header{ color: black; font-size: 16px; } .menu-link{ text-decoration: none; color: green; } } @menu-header-color : black; @menu-link-color : green; @menu-font-size : 16px; .sidemenu{ .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; } } .sidemenu .menu-header { color: #000000; font-size: 16px; } .sidemenu .menu-link { text-decoration: none; color: #008000; } Variables
  31. 31. Calculations @menu-header-color : black; @menu-link-color : green; @menu-font-size : 16px; @delta-font-size : @menu-font-size / 4; .sidemenu{ .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; font-size: @menu-font-size - @delta-font-size; } } @menu-header-color : black; @menu-link-color : green; @menu-font-size : 16px; .sidemenu{ .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; } } @menu-header-color : black; @menu-link-color : green; @menu-font-size : 16px; .sidemenu{ .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; font-size: 12px; } } .sidemenu .menu-header { color: #000000; font-size: 16px; } .sidemenu .menu-link { text-decoration: none; color: #008000; font-size: 12px; }
  32. 32. Built-ins @menu-header-color : black; @menu-link-color : green; @menu-font-size : 16px; @delta-font-size : @menu-font-size / 4; .sidemenu{ .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; font-size: @menu-font-size - @delta-font-size; } } .sidemenu { background-color: #404040; } .sidemenu .menu-header { color: #008000; font-size: 16px; } .sidemenu .menu-link { text-decoration: none; color: #00e600; font-size: 12px; } .sidemenu ul { color: #00e600; } @menu-header-color : green; @menu-link-color : lighten(@menu-header-color, 20%); @menu-font-size : 16px; @delta-font-size : @menu-font-size / 4; .sidemenu{ background-color : greyscale(@menu-header-color,@menu-link-color); .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; font-size: @menu-font-size - @delta-font-size; } ul{ color: @menu-link-color; } }
  33. 33. Mixins .roundedcorners{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .roundedcorners( @rad : 10px ){ -webkit-border-radius: @rad; -moz-border-radius: @rad; border-radius: @rad; }
  34. 34. @menu-header-color : green; @menu-link-color : lighten(@menu-header-color, 20%); @menu-font-size : 16px; @delta-font-size : @menu-font-size / 4; .roundedcorners( @rad : 10px ){ -webkit-border-radius: @rad; -moz-border-radius: @rad; border-radius: @rad; } .sidemenu{ background-color : greyscale(@menu-header-color,@menu-link-color); .roundedcorners( 25px ); .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; font-size: @menu-font-size - @delta-font-size; } ul{ color: @menu-link-color; } } .sidemenu{ background-color : greyscale(@menu-header-color,@menu-link-color); .roundedcorners( 25px ); .menu-header{ color: @menu-header-color; font-size: @menu-font-size; } .menu-link{ text-decoration: none; color: @menu-link-color; font-size: @menu-font-size - @delta-font-size; } ul{ color: @menu-link-color; } } Use Building Blocks
  35. 35. Use Building Blocks Other People’s http://cl.ly/image/2S0k1q3Q2y2L
  36. 36. Copyright © 2014 APEX Consulting Q& Aroel@apexconsulting.nl http://www.apexconsulting.nl 36
  37. 37. roel@apexconsulting.nl http://www.apexconsulting.nl Copyright © 2014 APEX Consulting 37

×