Introductie werken met CSS Preprocessors

Presentatie op het TYPO3 Congres Nederland 2012

Transcript

1. Introductie werken met CSS Preprocessors henjo hoeksma Tuesday, November 6, 12
2. CSS Pre.. wat? Tuesday, November 6, 12
3. CSS Pre.. wat? • Pre - processing: het zit voor CSS Tuesday, November 6, 12
4. CSS Pre.. wat? • Pre - processing: het zit voor CSS • CSS on steroids... Tuesday, November 6, 12
5. CSS Pre.. wat? • Pre - processing: het zit voor CSS • CSS on steroids... Tuesday, November 6, 12
6. Waarom werken met CSS Preprocessors Tuesday, November 6, 12
7. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden Tuesday, November 6, 12
8. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS Tuesday, November 6, 12
9. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven Tuesday, November 6, 12
10. Waarom werken met CSS Preprocessors • Omdat het voor je output zit, heb je meer mogelijkheden • Nested CSS • Jouw manier van schrijven • Leesbaarheid Tuesday, November 6, 12
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 Tuesday, November 6, 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 Tuesday, November 6, 12
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 Tuesday, November 6, 12
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 Tuesday, November 6, 12
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 Tuesday, November 6, 12
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 Tuesday, November 6, 12
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 Tuesday, November 6, 12
18. Welke preprocessors zijn er? (1/2) Tuesday, November 6, 12
19. Welke preprocessors zijn er? (1/2) Tuesday, November 6, 12
20. Welke preprocessors zijn er? (1/2) • SASS Tuesday, November 6, 12
21. Welke preprocessors zijn er? (1/2) • SASS • Syntactically Awesome Style Sheets Tuesday, November 6, 12
22. Welke preprocessors zijn er? (1/2) • SASS • Syntactically Awesome Style Sheets • Een uitbreiding op CSS3 Tuesday, November 6, 12
23. Welke preprocessors zijn er? (1/2) • SASS • Syntactically Awesome Style Sheets • Een uitbreiding op CSS3 • SASS draait op Rails Tuesday, November 6, 12
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 Tuesday, November 6, 12
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 Tuesday, November 6, 12
26. Welke preprocessors zijn er? (2/2) Tuesday, November 6, 12
27. Welke preprocessors zijn er? (2/2) Tuesday, November 6, 12
28. Welke preprocessors zijn er? (2/2) • Less Tuesday, November 6, 12
29. Welke preprocessors zijn er? (2/2) • Less • The dynamic stylesheet language. Tuesday, November 6, 12
30. Welke preprocessors zijn er? (2/2) • Less • The dynamic stylesheet language. • Kan zowel client-side als server-side ingezet worden Tuesday, November 6, 12
31. Welke preprocessors zijn er? (2/2) • Less • The dynamic stylesheet language. • Kan zowel client-side als server-side ingezet worden • Compilen niet nodig Tuesday, November 6, 12
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 Tuesday, November 6, 12
33. Werken met CSS Preprocessors Tuesday, November 6, 12
34. Werken met CSS Preprocessors • Frameworks & Presets Tuesday, November 6, 12
35. Werken met CSS Preprocessors • Frameworks & Presets Tuesday, November 6, 12
36. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) Tuesday, November 6, 12
37. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) Tuesday, November 6, 12
38. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: Tuesday, November 6, 12
39. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) Tuesday, November 6, 12
40. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app Tuesday, November 6, 12
41. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app Tuesday, November 6, 12
42. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) Tuesday, November 6, 12
43. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS Tuesday, November 6, 12
44. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS • Scout App Tuesday, November 6, 12
45. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS • Scout App • ... Tuesday, November 6, 12
46. Werken met CSS Preprocessors • Frameworks & Presets • Compass (Sass) • Lesselements (Less) • Tools: • Commandline (Compass native) • Compass / Fire app • CodeKit (Compass / Less) • simpLESS • Scout App • ... Tuesday, November 6, 12
47. Demo time! Tuesday, November 6, 12
48. Demo time! • Laten we aan de hand van Twitter Bootstrap zowel eens kijken naar SASS en Less! Tuesday, November 6, 12
49. Demo time! • Laten we aan de hand van Twitter Bootstrap zowel eens kijken naar SASS en Less! Tuesday, November 6, 12
50. Resources Tuesday, November 6, 12
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/ Tuesday, November 6, 12
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/ Tuesday, November 6, 12
53. Henjo Hoeksma Tuesday, November 6, 12
54. Henjo Hoeksma Photo by: Ben van ‘t Ende hphoeksma@stylence.nl callto://henjohoeksma http://twitter.com/henjohoeksma http://nl.linkedin.com/in/henjohoeksma http://henjohoeksma.nl | http://www.stylence.nl https://github.com/hphoeksma/introductie-werken- met-css-preprocessors Tuesday, November 6, 12