Présentation des outils : SASS Compass Blueprint

1. SASS, COMPASS & Blueprint
Ou les css à la cool !
1mercredi 19 juin 13

2. Mathias
Standaert
40ème saison.
Développeur chez
Organic Web depuis
2007
2mercredi 19 juin 13

3. Mon écosystème :
3mercredi 19 juin 13

4. Mon écosystème :
HTML / CSS
4mercredi 19 juin 13

5. Mon écosystème :
HTML / CSS
SASS, COMPASS & BLUEPRINT
5mercredi 19 juin 13

6. Mon écosystème :
HTML / CSS
SASS, COMPASS & BLUEPRINT
MODERNIZR, jQuery
6mercredi 19 juin 13

7. Mon écosystème :
HTML / CSS
SASS, COMPASS & BLUEPRINT
MODERNIZR, jQuery
Cake PHP, Ruby On Rails
7mercredi 19 juin 13

8. Mes outils
8mercredi 19 juin 13

9. Mes outils
Textmate
9mercredi 19 juin 13

10. Mes outils
Textmate
Terminal
10mercredi 19 juin 13

11. Pré-requis
Ruby installé
11mercredi 19 juin 13

12. CSS 3
Coins arrondis
12mercredi 19 juin 13

13. CSS 3
Coins arrondis
Dégradés de couleurs
13mercredi 19 juin 13

14. CSS 3
Coins arrondis
Dégradés de couleurs
Ombres (texte et boites)
14mercredi 19 juin 13

15. CSS 3
Coins arrondis
Dégradés de couleurs
Ombres (texte et boites)
Polices de caractères exotiques
15mercredi 19 juin 13

16. CSS 3
Coins arrondis
Dégradés de couleurs
Ombres (texte et boites)
Polices de caractères exotiques
Sélecteurs (pseudo-elements & pseudo-classes)
16mercredi 19 juin 13

17. SASS
{ Style with attitude }
17mercredi 19 juin 13

18. SASS
gem install sass
18mercredi 19 juin 13

19. SASS
gem install sass
Fourni une syntaxe simple et plus élégante
19mercredi 19 juin 13

20. SASS
gem install sass
Fourni une syntaxe simple et plus élégante
Fourni également des fonctions afin de maintenir notre
code
20mercredi 19 juin 13

21. SASS : Comment ?
21mercredi 19 juin 13

22. SASS : Comment ?
22mercredi 19 juin 13

23. SASS : en plus
Variables
23mercredi 19 juin 13

24. SASS : en plus
Variables
Sélecteurs imbriqués
24mercredi 19 juin 13

25. SASS : en plus
Variables
Sélecteurs imbriqués
Fonctions
25mercredi 19 juin 13

26. SASS : en plus
Variables
Sélecteurs imbriqués
Fonctions
Étendre un objet
26mercredi 19 juin 13

27. Variables
SASS
27mercredi 19 juin 13

28. SASS : Variables ?
28mercredi 19 juin 13

29. Sélecteurs imbriqués
SASS
29mercredi 19 juin 13

30. Sélecteurs imbriqués
30mercredi 19 juin 13

31. Fonctions
SASS
31mercredi 19 juin 13

32. Fonctions
32mercredi 19 juin 13

33. Étendre un objet
SASS
33mercredi 19 juin 13

34. Étendre un objet
34mercredi 19 juin 13

35. COMPASS
Open source CSS Authoring Framework
35mercredi 19 juin 13

36. Compass
gem install compass
36mercredi 19 juin 13

37. Compass
gem install compass
Utiliser les propriétés CSS3 facilement
37mercredi 19 juin 13

38. Compass
gem install compass
Utiliser les propriétés CSS3 facilement
Générer des sprites sans efforts
38mercredi 19 juin 13

39. Compass
gem install compass
Utiliser les propriétés CSS3 facilement
Générer des sprites sans efforts
Utilise la syntaxe de SASS (.scss ou .sass)
39mercredi 19 juin 13

40. CSS3
Cross-browser évidemment (presque)
40mercredi 19 juin 13

41. border-radius
41mercredi 19 juin 13

42. gradient
42mercredi 19 juin 13

43. MAGIC SPRITE
43mercredi 19 juin 13

44. MAGIC SPRITE
4 fichiers dans un dossier «mes-icons»
(new.png, edit.png, delete.png, save.png)
44mercredi 19 juin 13

45. MAGIC SPRITE
4 fichiers dans un dossier «mes-icons»
(new.png, edit.png, delete.png, save.png)
@import mes-icons/*.png
45mercredi 19 juin 13

46. MAGIC SPRITE
4 fichiers dans un dossier «mes-icons»
(new.png, edit.png, delete.png, save.png)
@import mes-icons/*.png
@include all-mes-icons-sprites
46mercredi 19 juin 13

47. MAGIC SPRITE
Génère le code css ci-dessus !
Il suffit ensuite d’appliquer les class au HTML
47mercredi 19 juin 13

48. ET AUSSI !!
text-shadow & box-shadow
48mercredi 19 juin 13

49. ET AUSSI !!
text-shadow & box-shadow
Les transitions, les transformations
49mercredi 19 juin 13

50. ET AUSSI !!
text-shadow & box-shadow
Les transitions, les transformations
Plein de helpers et de mixins pour se faciliter le code
50mercredi 19 juin 13

51. BLUEPRINT
Spend your time innovating, not replicating
51mercredi 19 juin 13

52. BLUEPRINT
Intégré à COMPASS par défaut (pour le moment)
52mercredi 19 juin 13

53. BLUEPRINT
Intégré à COMPASS par défaut (pour le moment)
Une grille facile à utiliser
53mercredi 19 juin 13

54. BLUEPRINT
Intégré à COMPASS par défaut (pour le moment)
Une grille facile à utiliser
Un reset CSS cross-browser
54mercredi 19 juin 13

55. BLUEPRINT
Intégré à COMPASS par défaut (pour le moment)
Une grille facile à utiliser
Un reset CSS cross-browser
Feuille de style d’impression
55mercredi 19 juin 13

56. C’est parti !
compass create test --using blueprint --syntax sass
56mercredi 19 juin 13