TYPO3 Congres 2012 - Introductie werken met CSS preprocessors
of 54
date post
21-May-2015Category
Technology
view
419download
7
Embed Size (px)
description
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.
Transcript of TYPO3 Congres 2012 - Introductie werken met CSS preprocessors
- 1. Introductie werken metCSS Preprocessorshenjo hoeksma
2. CSS Pre.. wat? 3. CSS Pre.. wat? Pre - processing:het zit voor CSS 4. CSS Pre.. wat? Pre - processing:het zit voor CSS CSS on steroids... 5. CSS Pre.. wat? Pre - processing:het zit voor CSS CSS on steroids... 6. Waarom werken met CSS Preprocessors 7. Waarom werken met CSS Preprocessors Omdat het voor je output zit, heb je meer mogelijkheden 8. Waarom werken met CSS Preprocessors Omdat het voor je output zit, heb je meer mogelijkheden Nested CSS 9. Waarom werken met CSS Preprocessors Omdat het voor je output zit, heb je meer mogelijkheden Nested CSS Jouw manier van schrijven 10. Waarom werken met CSS Preprocessors Omdat het voor je output zit, heb je meer mogelijkheden Nested CSS Jouw manier van schrijven Leesbaarheid 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. 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. 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. 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. 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. 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. 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. Welke preprocessors zijn er? (1/2) 19. Welke preprocessors zijn er? (1/2) 20. Welke preprocessors zijn er? (1/2) SASS 21. Welke preprocessors zijn er? (1/2) SASS Syntactically AwesomeStyle Sheets 22. Welke preprocessors zijn er? (1/2) SASS Syntactically AwesomeStyle Sheets Een uitbreiding op CSS3 23. Welke preprocessors zijn er? (1/2) SASS Syntactically AwesomeStyle Sheets Een uitbreiding op CSS3 SASS draait op Rails 24. Welke preprocessors zijn er? (1/2) SASS Syntactically AwesomeStyle Sheets Een uitbreiding op CSS3 SASS draait op Rails SASS les moetengecompiled wordenvoor ze als CSS gebruiktkunnen worden 25. Welke preprocessors zijn er? (1/2) SASS Syntactically AwesomeStyle Sheets Een uitbreiding op CSS3 SASS draait op Rails SASS les moetengecompiled wordenvoor ze als CSS gebruiktkunnen worden http://sass-lang.com 26. Welke preprocessors zijn er? (2/2) 27. Welke preprocessors zijn er? (2/2) 28. Welke preprocessors zijner? (2/2) Less 29. Welke preprocessors zijner? (2/2) Less The dynamicstylesheet language. 30. Welke preprocessors zijner? (2/2) Less The dynamicstylesheet language. Kan zowel client-side als server-sideingezet worden 31. Welke preprocessors zijner? (2/2) Less The dynamicstylesheet language. Kan zowel client-side als server-sideingezet worden Compilen niet nodig 32. Welke preprocessors zijner? (2/2) Less The dynamicstylesheet language. Kan zowel client-side als server-sideingezet worden Compilen niet nodig http://lesscss.org 33. Werken met CSS Preprocessors 34. Werken met CSSPreprocessors Frameworks & Presets 35. Werken met CSSPreprocessors Frameworks & Presets 36. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) 37. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) 38. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: 39. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: Commandline (Compass native) 40. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: Commandline (Compass native) Compass / Fire app 41. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: Commandline (Compass native) Compass / Fire app 42. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: Commandline (Compass native) Compass / Fire app CodeKit (Compass / Less) 43. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: Commandline (Compass native) Compass / Fire app CodeKit (Compass / Less) simpLESS 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. Werken met CSS Preprocessors Frameworks & Presets Compass (Sass) Lesselements (Less) Tools: Commandline (Compass native) Compass / Fire app CodeKit (Compass / Less) simpLESS Scout App ... 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. Demo time! 48. Demo time! Laten we aan dehand van TwitterBootstrap zoweleens kijken naarSASS en Less! 49. Demo time! Laten we aan dehand van TwitterBootstrap zoweleens kijken naarSASS en Less! 50. Resources 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. 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. HenjoHoeksma 54. HenjoHoeksmahphoeksma@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
