TYPO3 Congres 2012 - Introductie werken met CSS preprocessors

551 views

Published on

CSS preprocessors zijn inmiddels al een aantal jaar aanwezig en zullen ook voorlopig niet verdwijnen. In deze sessie aandacht voor de voordelen van het werken met en een overzicht van de belangrijkste CSS preprocessors.

CSS schrijven en beheren kan met gebruik van preprocessors enorm worden verbeterd: een must voor iedere frontender en ontwikkelaar en makkelijk om op te pakken.

Henjo Hoeksma
Na enkele jaren als hobby met TYPO3 gewerkt te hebben, heeft Henjo zijn beroep gemaakt van het ontwikkelen van websites en webapplicaties op basis van het TYPO3 framework. Na een korte periode gewerkt te hebben als ontwikkelaar bij alterNET en een internationaal bedrijf in LED verlichting is hij als freelancer aan de slag gegaan.

Met een passie voor nieuwe technieken, kwalitatieve oplossingen & code en de TYPO3 producten & community ondersteunt hij vanuit zijn bedrijf Stylence zowel grote als minder grote organisaties in de ontwikkeling van websites en maatwerk oplossingen.

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

  • Be the first to like this

No Downloads
Views
Total views
551
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TYPO3 Congres 2012 - Introductie werken met CSS preprocessors

  1. 1. Introductie werken met CSS Preprocessors henjo hoeksma
  2. 2. CSS Pre.. wat?
  3. 3. CSS Pre.. wat?• Pre - processing: het zit voor CSS
  4. 4. CSS Pre.. wat?• Pre - processing: het zit voor CSS• CSS on steroids...
  5. 5. CSS Pre.. wat?• Pre - processing: het zit voor CSS• CSS on steroids...
  6. 6. Waarom werken met CSS Preprocessors
  7. 7. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden
  8. 8. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS
  9. 9. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven
  10. 10. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid
  11. 11. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading
  12. 12. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading • Variabelen
  13. 13. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading • Variabelen • Functies / Mixins
  14. 14. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading • Variabelen • Functies / Mixins • Hergebruik
  15. 15. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading • Variabelen • Functies / Mixins • Hergebruik • Output controle
  16. 16. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading • Variabelen • Functies / Mixins • Hergebruik • Output controle • Wel of geen comments
  17. 17. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid • Goede cascading • Variabelen • Functies / Mixins • Hergebruik • Output controle • Wel of geen comments • Wel of niet compressed
  18. 18. Welke preprocessors zijn er? (1/2)
  19. 19. Welke preprocessors zijn er? (1/2)
  20. 20. Welke preprocessors zijn er? (1/2)• SASS
  21. 21. Welke preprocessors zijn er? (1/2)• SASS • Syntactically Awesome Style Sheets
  22. 22. Welke preprocessors zijn er? (1/2)• SASS • Syntactically Awesome Style Sheets • Een uitbreiding op CSS3
  23. 23. Welke preprocessors zijn er? (1/2)• SASS • Syntactically Awesome Style Sheets • Een uitbreiding op CSS3 • SASS draait op Rails
  24. 24. Welke preprocessors zijn er? (1/2)• SASS • Syntactically Awesome Style Sheets • Een uitbreiding op CSS3 • SASS draait op Rails • SASS files moeten gecompiled worden voor ze als CSS gebruikt kunnen worden
  25. 25. Welke preprocessors zijn er? (1/2)• SASS • Syntactically Awesome Style Sheets • Een uitbreiding op CSS3 • SASS draait op Rails • SASS files moeten gecompiled worden voor ze als CSS gebruikt kunnen worden • http://sass-lang.com
  26. 26. Welke preprocessors zijn er? (2/2)
  27. 27. Welke preprocessors zijn er? (2/2)
  28. 28. Welke preprocessors zijn er? (2/2)• Less
  29. 29. Welke preprocessors zijn er? (2/2)• Less • The dynamic stylesheet language.
  30. 30. Welke preprocessors zijn er? (2/2)• Less • The dynamic stylesheet language. • Kan zowel client- side als server-side ingezet worden
  31. 31. Welke preprocessors zijn er? (2/2)• Less • The dynamic stylesheet language. • Kan zowel client- side als server-side ingezet worden • Compilen niet nodig
  32. 32. Welke preprocessors zijn er? (2/2)• Less • The dynamic stylesheet language. • Kan zowel client- side als server-side ingezet worden • Compilen niet nodig • http://lesscss.org
  33. 33. Werken met CSS Preprocessors
  34. 34. Werken met CSS Preprocessors• Frameworks & Presets
  35. 35. Werken met CSS Preprocessors• Frameworks & Presets
  36. 36. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass)
  37. 37. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)
  38. 38. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools:
  39. 39. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native)
  40. 40. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app
  41. 41. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app
  42. 42. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less)
  43. 43. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS
  44. 44. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS • Scout App
  45. 45. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS • Scout App • ...
  46. 46. Werken met CSS Preprocessors• Frameworks & Presets • Compass (Sass) • Lesselements (Less)• Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS • Scout App • ...
  47. 47. Demo time!
  48. 48. Demo time!• Laten we aan de hand van Twitter Bootstrap zowel eens kijken naar SASS en Less!
  49. 49. Demo time!• Laten we aan de hand van Twitter Bootstrap zowel eens kijken naar SASS en Less!
  50. 50. Resources
  51. 51. Resources• http://sass-lang.com• http://lesscss.org• http://compass-style.org• http://net.tutsplus.com/ tutorials/html-css-techniques/ sass-vs-less-vs-stylus-a- preprocessor-shootout/• http://css-tricks.com/sass-vs- less/• http://incident57.com/codekit/• http://mhs.github.com/scout- app/
  52. 52. Resources• http://sass-lang.com• http://lesscss.org• http://compass-style.org• http://net.tutsplus.com/ tutorials/html-css-techniques/ sass-vs-less-vs-stylus-a- preprocessor-shootout/• http://css-tricks.com/sass-vs- less/• http://incident57.com/codekit/• http://mhs.github.com/scout- app/
  53. 53. HenjoHoeksma
  54. 54. Henjo Hoeksmahphoeksma@stylence.nlcallto://henjohoeksmahttp://twitter.com/henjohoeksmahttp://nl.linkedin.com/in/henjohoeksmahttp://henjohoeksma.nl | http://www.stylence.nl Photo by: Ben van ‘t Endehttps://github.com/hphoeksma/introductie-werken-met-css-preprocessors

×