Pre-processingINCEPTION ALL OVER AGAIN!
RIPARJAN EISING  He’s not really dead :)
Hi, I’m Kristof@houbenkristof — kristof@treeshadow.be
Front-end/designat Mobile Vikings
I’m always up for aChallenge
Run a small firm  CALLED TREESHADOW MEDIA
Creative BrewskiTOGETHER WITH @TOMCLAUS & @DENNISJANSSEN
LEt’s TALKCSS
"You don’t need a new stylesheetsyntax, CSS is simple and you’re   a moron if you can’t do it."
C’est très simple
Not that easy to    maintain
Stylesheets evolve
Simplicity creates   complexity
Keep things DRY   DON’T REPEAT YOURSELF
we shouldReference to  existinginformation
"CSS is the weakest link in the web developerstoolbox. The problem goes deeper than CSS’s   lack of variables. Unlike the ...
It’s all aboutAbstractions
CSS PRIMITIVES HAVE    NO MEANING
That’s our job!
Abstractions ARE GROUPS OF PRIMITIVES
Abstractions arenot abstract to us
We give BUILDING  BLOCKs meaningSO IT MAKES IT EASIER FOR US TO UNDERSTAND
OurDESIGNSCHANGE
A kitten dies everytime that happens
Find & replaceOH PLEASE, DON’T GET ME STARTED!
Client: “We want #000 to be #333 but not    the user information underneath my  #bada55 body text, oh while youre at itcou...
You’re screwed
What do weNEED?
The interior decorator!
Decorates with    parts
He does not make   those parts   LAMPS, TABLES, CHAIRS…
PArts for  PArts
Oh my godYOU REUSED A BUTTON!
When elements are commonREUSE tHEM!
Focus!ON WHAT IS IMPORTANT,YOU MUST!
Hard to upgrade Customized thirdparty stylesheets
Clearly we are in   need of some Pre-processing
"In computer science, a preprocessor is aprogram that processes its input data to           produce output that  is used a...
SyntacticCUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD              IMPROVEMENTS
ex. SASS & LESS
Keeping things maintainable
SASSBY HAMPTON CATLIN & NATHAN WEIZENBAUM
Written in Ruby
Don’t worry, there  are also GUI’s
Watches folders &compiles on save
2007ORIGINAL SASS SYNTAX
Hard to convertexisting CSS TO SASS
2010SASS 3 INTRODUCES SCSS
Regular CSS      = VALID SCSS
BUT WAIT there’s also COMPASS
It’s chock full of   the web’s bestreusable patterns.
Also contains other   cool features   IMAGE SPRITING, COLOR FUNCTIONS
LESSYou say
It’s all javascriptORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER
Regular CSS      = VALID LESS
LESS INSPIRED SCSS
LESS   VS   SASSThanks to Chris Eppstein - https://gist.github.com/674726
Learning curveYOU HAVE TO KNOW JACK SH*T ABOUT THE CLI
CODEKIT IS HOT!
CSS3 HelpersSASS HAS COMPASS, LESS DOES NOT
Variables
Mixins
Extending
Custom units in      SASSMAKING THE LANGUAGE MORE FUTUREPROOF
Looping
DEMO
Thank you!
Resources:http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/http://sonspring.co...
Questions?
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Upcoming SlideShare
Loading in …5
×

Pre-processing for Fronteers by Viking Kristof Houben

5,067 views
5,032 views

Published on

On 22/6/2012 Viking Kristof Houben gave a presentation at 'Fronteers' about 'Pre-processing'.

The organization 'Fronteers' wants to professionalize the job of front-end web development. It strives for the recognition and support of Dutch speaking front-end web developers.

'Fronteers' unites about 450 front-end web developers in Belgium and The Netherlands.

Enjoy!

22/6/2012 Fronteers by Kristof Houben

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

No Downloads
Views
Total views
5,067
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Pre-processing for Fronteers by Viking Kristof Houben

  1. 1. Pre-processingINCEPTION ALL OVER AGAIN!
  2. 2. RIPARJAN EISING He’s not really dead :)
  3. 3. Hi, I’m Kristof@houbenkristof — kristof@treeshadow.be
  4. 4. Front-end/designat Mobile Vikings
  5. 5. I’m always up for aChallenge
  6. 6. Run a small firm CALLED TREESHADOW MEDIA
  7. 7. Creative BrewskiTOGETHER WITH @TOMCLAUS & @DENNISJANSSEN
  8. 8. LEt’s TALKCSS
  9. 9. "You don’t need a new stylesheetsyntax, CSS is simple and you’re a moron if you can’t do it."
  10. 10. C’est très simple
  11. 11. Not that easy to maintain
  12. 12. Stylesheets evolve
  13. 13. Simplicity creates complexity
  14. 14. Keep things DRY DON’T REPEAT YOURSELF
  15. 15. we shouldReference to existinginformation
  16. 16. "CSS is the weakest link in the web developerstoolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block."
  17. 17. It’s all aboutAbstractions
  18. 18. CSS PRIMITIVES HAVE NO MEANING
  19. 19. That’s our job!
  20. 20. Abstractions ARE GROUPS OF PRIMITIVES
  21. 21. Abstractions arenot abstract to us
  22. 22. We give BUILDING BLOCKs meaningSO IT MAKES IT EASIER FOR US TO UNDERSTAND
  23. 23. OurDESIGNSCHANGE
  24. 24. A kitten dies everytime that happens
  25. 25. Find & replaceOH PLEASE, DON’T GET ME STARTED!
  26. 26. Client: “We want #000 to be #333 but not the user information underneath my #bada55 body text, oh while youre at itcould you position absolute that element and rotate it a gazillion degrees, … oh, #333 doesnt look that great after all… Change it back!”
  27. 27. You’re screwed
  28. 28. What do weNEED?
  29. 29. The interior decorator!
  30. 30. Decorates with parts
  31. 31. He does not make those parts LAMPS, TABLES, CHAIRS…
  32. 32. PArts for PArts
  33. 33. Oh my godYOU REUSED A BUTTON!
  34. 34. When elements are commonREUSE tHEM!
  35. 35. Focus!ON WHAT IS IMPORTANT,YOU MUST!
  36. 36. Hard to upgrade Customized thirdparty stylesheets
  37. 37. Clearly we are in need of some Pre-processing
  38. 38. "In computer science, a preprocessor is aprogram that processes its input data to produce output that is used as input to another program.” — Wikipedia
  39. 39. SyntacticCUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD IMPROVEMENTS
  40. 40. ex. SASS & LESS
  41. 41. Keeping things maintainable
  42. 42. SASSBY HAMPTON CATLIN & NATHAN WEIZENBAUM
  43. 43. Written in Ruby
  44. 44. Don’t worry, there are also GUI’s
  45. 45. Watches folders &compiles on save
  46. 46. 2007ORIGINAL SASS SYNTAX
  47. 47. Hard to convertexisting CSS TO SASS
  48. 48. 2010SASS 3 INTRODUCES SCSS
  49. 49. Regular CSS = VALID SCSS
  50. 50. BUT WAIT there’s also COMPASS
  51. 51. It’s chock full of the web’s bestreusable patterns.
  52. 52. Also contains other cool features IMAGE SPRITING, COLOR FUNCTIONS
  53. 53. LESSYou say
  54. 54. It’s all javascriptORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER
  55. 55. Regular CSS = VALID LESS
  56. 56. LESS INSPIRED SCSS
  57. 57. LESS VS SASSThanks to Chris Eppstein - https://gist.github.com/674726
  58. 58. Learning curveYOU HAVE TO KNOW JACK SH*T ABOUT THE CLI
  59. 59. CODEKIT IS HOT!
  60. 60. CSS3 HelpersSASS HAS COMPASS, LESS DOES NOT
  61. 61. Variables
  62. 62. Mixins
  63. 63. Extending
  64. 64. Custom units in SASSMAKING THE LANGUAGE MORE FUTUREPROOF
  65. 65. Looping
  66. 66. DEMO
  67. 67. Thank you!
  68. 68. Resources:http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/http://sonspring.com/journal/sass-for-designershttp://css-tricks.com/sass-vs-less/http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
  69. 69. Questions?

×