More of less (take 2)

2,080 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,080
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

More of less (take 2)

  1. 1. More of {less} Guilherme Zühlke O’Connor
  2. 2. The Author Head of front end development at Snupps
  3. 3. Snupps We are a B2C, cross platform app on the web and mobile that helps you organise your stuff. We are an early stage startup. We are getting ready to launch.
  4. 4. The problem When you get to a certain point in life, you 1. 2. 3. 4. Have too much stuff Don’t know what you have Don’t know where it is Don’t have quick access to the details
  5. 5. The solution Snupps is the one place for you to store and keep track of your stuff and have it at your fingertips at all times.
  6. 6. So, stuff, huh? Lots of it... Scattered around... Difficult to find…
  7. 7. So, stuff, huh? Lots of it... Scattered around... Difficult to find… Surely I’m not the only one who sees a resemblance with CSS!
  8. 8. Which begs the question...
  9. 9. Which begs the question... How on Earth do we organise CSS?
  10. 10. The problem Easy syntax Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” ttp://www.w3.org/Style/CSS/Overview.en.html Gentle learning curve Conceptually minimalistic
  11. 11. The problem Easy syntax C”Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” http://www.w3.org/Style/CSS/Overview.en.html Gentle learning curve Conceptually minimalistic Also minimal support for software engineering
  12. 12. Simple enough
  13. 13. CSS is simple enough for a simple document, but today’s average page on a web app is an amalgamation of several heavily complex design elements.
  14. 14. Every element may itself depend on an amalgamation of different techniques, glued together for the overall effect.
  15. 15. Each element on the page may be used more than once. Maybe on different pages. Maybe variations of its basic form.
  16. 16. Oh, did I just say Web App instead of Web document?
  17. 17. Oh, did I just say Web App instead of Web document? Oops...
  18. 18. Compromises Invariably, writing enough CSS for a website will require that at least one of the following is compromised DRY (Don’t Repeat Yourself) CSS Modularization Separation of Concerns (classitis)
  19. 19. Repetition button.addComment { button.search { color: #ccc; background: #333; background: #333; padding: 10px; } color: #ccc; padding: 10px; }
  20. 20. Don’t Repeat Yourself Every piece of knowledge must have a single, unambiguous, authoritative representation within a system
  21. 21. Poor Grouping button.addComment, button.search, button.login { color: #ccc; background: #333; padding: 10px; } .comment .timestamp, .notification .timestamp, .creation .timestamp { color: #ccc; background: #333; padding: 10px; }
  22. 22. DOM pollution and classitis .button-1 { color: #ccc; background: #333; padding: 10px; <button class=”addComment button-1”> } <button class=”search button-1”> <button class=”login button-1”>
  23. 23. Enter CSS preprocessing
  24. 24. A CSS preprocessor is an augmentation of the CSS language that can be run through a script to generate native CSS a browser can understand.
  25. 25. Why CSS preprocesing? CSS preprocessing gives the developer tools to organize their code and create reusable components. It allows for the code to be grouped in semantic, logical components that can be defined elsewhere than where they are being used.
  26. 26. Variables @btnColor: #ea5430 button { background-color: #ea5430; button { } background-color: @btnColor; } label { label { background-color: @btnColor; } background-color: #ea5430; }
  27. 27. Mixins - browser prefixes .border-radius(@n: 3px) { -webkit-border-radius: @n; -moz-border-radius: @n; border-radius: @n; } button { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } button { .border-radius(); } label { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } label { .border-radius(5px); }
  28. 28. Mixins - combined rules .hide-offscreen() { position: absolute; left: -999em; } button { position: absolute; left: -999em; } button { .hide-offscreen(); } a.skipToContent { position: absolute; left: -999em; } a.skipToContent { .hide-offscreen(); }
  29. 29. Nested Rules p{ p{ text-indent: 1em; em { text-indent: 1em; } color: #ea5430; p em { } } color: #ea5430; }
  30. 30. The ”&” Combinator The ”this” of CSS
  31. 31. The “&” Combinator a{ a{ color: #ea5430; color: #ea5430; text-decoration: none; text-decoration: none; &:hover { } text-decoration: underline; } a:hover { &.someClass { background-color: #ccc; text-decoration: underline; } } } a:someClass { background-color: #ccc; }
  32. 32. Going wild... input[type=checkbox] { input[type=checkbox] { .hide-offscreen(); position: absolute; & + label { left: -999em; background-color: #ea5430; } &:before { input[type=checkbox] + label { content: ””; .icon(); background-color: #ea5430; } } input[type=checkbox] + label:before { … } &:hover { input[type=checkbox] + label:hover { … } background-color: #cc4b29; } &:active { background-color: #cc4b29; } } } input[type=checkbox] + label:active { … }
  33. 33. Really wild... input[type=checkbox] { input[type=checkbox] { .hide-offscreen(); position: absolute; & + label { left: -999em; background-color: #ea5430; } &:before {…} input[type=checkbox] + label { &:hover {…} &:active {…} background-color: #ea5430; } } input[type=checkbox] + label:before { … } &:checked + label { input[type=checkbox] + label:hover { … } &:before {…} &:hover {…} } input[type=checkbox]:checked + label:before { … } &:active {…} } input[type=checkbox] + label:active { … } input[type=checkbox]:checked + label:hover { … } input[type=checkbox]:checked + label:active { … }
  34. 34. Even backwards... input[type=checkbox] { input[type=checkbox] { … } .style-1(); .someParent & { .style-2(); } } .someParent input[type=checkbox] { … }
  35. 35. Operations @colorRegular: #ea5430; @colorRegular: #ea5430; @colorHover: @colorRegular - #111; @colorActive: @colorRegular - #222; @colorHover: #d9431f; p {color: @colorRegular} p {color: @colorHover} p {color: @colorActive} @colorActive: #c8320e;
  36. 36. All together now!
  37. 37. There’s much more... Guarded mixins, client side usage, watch mode, javascript functions, reading parameters from other properties, debuggable in Web Inspector… The list goes on.
  38. 38. What about SASS? Less is not the only CSS preprocessor. There are different flavours of preprocessors with pros and cons. What we covered here, can be used on SASS as well, though the syntax may differ.
  39. 39. Architecture This presentation is not meant to be an exhaustive overview of less syntax but a display of how it can be used to build a powerful CSS architecture for modern day, complex web apps. Less is almost as easy to learn as CSS. Go nuts!
  40. 40. Questions?
  41. 41. Guilherme Zühlke O’Connor, London, Nov/2013

×