SASS, COMPASS & BlueprintOu les css à la cool !1mercredi 19 juin 13
MathiasStandaert40ème saison.Développeur chezOrganic Web depuis20072mercredi 19 juin 13
Mon écosystème :3mercredi 19 juin 13
Mon écosystème :HTML / CSS4mercredi 19 juin 13
Mon écosystème :HTML / CSSSASS, COMPASS & BLUEPRINT5mercredi 19 juin 13
Mon écosystème :HTML / CSSSASS, COMPASS & BLUEPRINTMODERNIZR, jQuery6mercredi 19 juin 13
Mon écosystème :HTML / CSSSASS, COMPASS & BLUEPRINTMODERNIZR, jQueryCake PHP, Ruby On Rails7mercredi 19 juin 13
Mes outils8mercredi 19 juin 13
Mes outilsTextmate9mercredi 19 juin 13
Mes outilsTextmateTerminal10mercredi 19 juin 13
Pré-requisRuby installé11mercredi 19 juin 13
CSS 3Coins arrondis12mercredi 19 juin 13
CSS 3Coins arrondisDégradés de couleurs13mercredi 19 juin 13
CSS 3Coins arrondisDégradés de couleursOmbres (texte et boites)14mercredi 19 juin 13
CSS 3Coins arrondisDégradés de couleursOmbres (texte et boites)Polices de caractères exotiques15mercredi 19 juin 13
CSS 3Coins arrondisDégradés de couleursOmbres (texte et boites)Polices de caractères exotiquesSélecteurs (pseudo-elements ...
SASS{ Style with attitude }17mercredi 19 juin 13
SASSgem install sass18mercredi 19 juin 13
SASSgem install sassFourni une syntaxe simple et plus élégante19mercredi 19 juin 13
SASSgem install sassFourni une syntaxe simple et plus éléganteFourni également des fonctions afin de maintenir notrecode20m...
SASS : Comment ?21mercredi 19 juin 13
SASS : Comment ?22mercredi 19 juin 13
SASS : en plusVariables23mercredi 19 juin 13
SASS : en plusVariablesSélecteurs imbriqués24mercredi 19 juin 13
SASS : en plusVariablesSélecteurs imbriquésFonctions25mercredi 19 juin 13
SASS : en plusVariablesSélecteurs imbriquésFonctionsÉtendre un objet26mercredi 19 juin 13
VariablesSASS27mercredi 19 juin 13
SASS : Variables ?28mercredi 19 juin 13
Sélecteurs imbriquésSASS29mercredi 19 juin 13
Sélecteurs imbriqués30mercredi 19 juin 13
FonctionsSASS31mercredi 19 juin 13
Fonctions32mercredi 19 juin 13
Étendre un objetSASS33mercredi 19 juin 13
Étendre un objet34mercredi 19 juin 13
COMPASSOpen source CSS Authoring Framework35mercredi 19 juin 13
Compassgem install compass36mercredi 19 juin 13
Compassgem install compassUtiliser les propriétés CSS3 facilement37mercredi 19 juin 13
Compassgem install compassUtiliser les propriétés CSS3 facilementGénérer des sprites sans efforts38mercredi 19 juin 13
Compassgem install compassUtiliser les propriétés CSS3 facilementGénérer des sprites sans effortsUtilise la syntaxe de SAS...
CSS3	Cross-browser évidemment (presque)40mercredi 19 juin 13
border-radius41mercredi 19 juin 13
gradient42mercredi 19 juin 13
MAGIC SPRITE43mercredi 19 juin 13
MAGIC SPRITE4 fichiers dans un dossier «mes-icons»(new.png, edit.png, delete.png, save.png)44mercredi 19 juin 13
MAGIC SPRITE4 fichiers dans un dossier «mes-icons»(new.png, edit.png, delete.png, save.png)@import mes-icons/*.png45mercred...
MAGIC SPRITE4 fichiers dans un dossier «mes-icons»(new.png, edit.png, delete.png, save.png)@import mes-icons/*.png@include ...
MAGIC SPRITEGénère le code css ci-dessus !Il suffit ensuite d’appliquer les class au HTML47mercredi 19 juin 13
ET AUSSI !!text-shadow & box-shadow48mercredi 19 juin 13
ET AUSSI !!text-shadow & box-shadowLes transitions, les transformations49mercredi 19 juin 13
ET AUSSI !!text-shadow & box-shadowLes transitions, les transformationsPlein de helpers et de mixins pour se faciliter le ...
BLUEPRINTSpend your time innovating, not replicating51mercredi 19 juin 13
BLUEPRINTIntégré à COMPASS par défaut (pour le moment)52mercredi 19 juin 13
BLUEPRINTIntégré à COMPASS par défaut (pour le moment)Une grille facile à utiliser53mercredi 19 juin 13
BLUEPRINTIntégré à COMPASS par défaut (pour le moment)Une grille facile à utiliserUn reset CSS cross-browser54mercredi 19 ...
BLUEPRINTIntégré à COMPASS par défaut (pour le moment)Une grille facile à utiliserUn reset CSS cross-browserFeuille de sty...
C’est parti !compass create test --using blueprint --syntax sass56mercredi 19 juin 13
Prochain SlideShare
Chargement dans…5
×

Sass, Compass & Blueprint, ou les CSS à la cool

937 vues

Publié le

Présentation des outils :
SASS
Compass
Blueprint

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
937
Sur SlideShare
0
Issues des intégrations
0
Intégrations
154
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Sass, Compass & Blueprint, ou les CSS à la cool

  1. 1. SASS, COMPASS & BlueprintOu les css à la cool !1mercredi 19 juin 13
  2. 2. MathiasStandaert40ème saison.Développeur chezOrganic Web depuis20072mercredi 19 juin 13
  3. 3. Mon écosystème :3mercredi 19 juin 13
  4. 4. Mon écosystème :HTML / CSS4mercredi 19 juin 13
  5. 5. Mon écosystème :HTML / CSSSASS, COMPASS & BLUEPRINT5mercredi 19 juin 13
  6. 6. Mon écosystème :HTML / CSSSASS, COMPASS & BLUEPRINTMODERNIZR, jQuery6mercredi 19 juin 13
  7. 7. Mon écosystème :HTML / CSSSASS, COMPASS & BLUEPRINTMODERNIZR, jQueryCake PHP, Ruby On Rails7mercredi 19 juin 13
  8. 8. Mes outils8mercredi 19 juin 13
  9. 9. Mes outilsTextmate9mercredi 19 juin 13
  10. 10. Mes outilsTextmateTerminal10mercredi 19 juin 13
  11. 11. Pré-requisRuby installé11mercredi 19 juin 13
  12. 12. CSS 3Coins arrondis12mercredi 19 juin 13
  13. 13. CSS 3Coins arrondisDégradés de couleurs13mercredi 19 juin 13
  14. 14. CSS 3Coins arrondisDégradés de couleursOmbres (texte et boites)14mercredi 19 juin 13
  15. 15. CSS 3Coins arrondisDégradés de couleursOmbres (texte et boites)Polices de caractères exotiques15mercredi 19 juin 13
  16. 16. CSS 3Coins arrondisDégradés de couleursOmbres (texte et boites)Polices de caractères exotiquesSélecteurs (pseudo-elements & pseudo-classes)16mercredi 19 juin 13
  17. 17. SASS{ Style with attitude }17mercredi 19 juin 13
  18. 18. SASSgem install sass18mercredi 19 juin 13
  19. 19. SASSgem install sassFourni une syntaxe simple et plus élégante19mercredi 19 juin 13
  20. 20. SASSgem install sassFourni une syntaxe simple et plus éléganteFourni également des fonctions afin de maintenir notrecode20mercredi 19 juin 13
  21. 21. SASS : Comment ?21mercredi 19 juin 13
  22. 22. SASS : Comment ?22mercredi 19 juin 13
  23. 23. SASS : en plusVariables23mercredi 19 juin 13
  24. 24. SASS : en plusVariablesSélecteurs imbriqués24mercredi 19 juin 13
  25. 25. SASS : en plusVariablesSélecteurs imbriquésFonctions25mercredi 19 juin 13
  26. 26. SASS : en plusVariablesSélecteurs imbriquésFonctionsÉtendre un objet26mercredi 19 juin 13
  27. 27. VariablesSASS27mercredi 19 juin 13
  28. 28. SASS : Variables ?28mercredi 19 juin 13
  29. 29. Sélecteurs imbriquésSASS29mercredi 19 juin 13
  30. 30. Sélecteurs imbriqués30mercredi 19 juin 13
  31. 31. FonctionsSASS31mercredi 19 juin 13
  32. 32. Fonctions32mercredi 19 juin 13
  33. 33. Étendre un objetSASS33mercredi 19 juin 13
  34. 34. Étendre un objet34mercredi 19 juin 13
  35. 35. COMPASSOpen source CSS Authoring Framework35mercredi 19 juin 13
  36. 36. Compassgem install compass36mercredi 19 juin 13
  37. 37. Compassgem install compassUtiliser les propriétés CSS3 facilement37mercredi 19 juin 13
  38. 38. Compassgem install compassUtiliser les propriétés CSS3 facilementGénérer des sprites sans efforts38mercredi 19 juin 13
  39. 39. Compassgem install compassUtiliser les propriétés CSS3 facilementGénérer des sprites sans effortsUtilise la syntaxe de SASS (.scss ou .sass)39mercredi 19 juin 13
  40. 40. CSS3 Cross-browser évidemment (presque)40mercredi 19 juin 13
  41. 41. border-radius41mercredi 19 juin 13
  42. 42. gradient42mercredi 19 juin 13
  43. 43. MAGIC SPRITE43mercredi 19 juin 13
  44. 44. MAGIC SPRITE4 fichiers dans un dossier «mes-icons»(new.png, edit.png, delete.png, save.png)44mercredi 19 juin 13
  45. 45. MAGIC SPRITE4 fichiers dans un dossier «mes-icons»(new.png, edit.png, delete.png, save.png)@import mes-icons/*.png45mercredi 19 juin 13
  46. 46. MAGIC SPRITE4 fichiers dans un dossier «mes-icons»(new.png, edit.png, delete.png, save.png)@import mes-icons/*.png@include all-mes-icons-sprites46mercredi 19 juin 13
  47. 47. MAGIC SPRITEGénère le code css ci-dessus !Il suffit ensuite d’appliquer les class au HTML47mercredi 19 juin 13
  48. 48. ET AUSSI !!text-shadow & box-shadow48mercredi 19 juin 13
  49. 49. ET AUSSI !!text-shadow & box-shadowLes transitions, les transformations49mercredi 19 juin 13
  50. 50. ET AUSSI !!text-shadow & box-shadowLes transitions, les transformationsPlein de helpers et de mixins pour se faciliter le code50mercredi 19 juin 13
  51. 51. BLUEPRINTSpend your time innovating, not replicating51mercredi 19 juin 13
  52. 52. BLUEPRINTIntégré à COMPASS par défaut (pour le moment)52mercredi 19 juin 13
  53. 53. BLUEPRINTIntégré à COMPASS par défaut (pour le moment)Une grille facile à utiliser53mercredi 19 juin 13
  54. 54. BLUEPRINTIntégré à COMPASS par défaut (pour le moment)Une grille facile à utiliserUn reset CSS cross-browser54mercredi 19 juin 13
  55. 55. BLUEPRINTIntégré à COMPASS par défaut (pour le moment)Une grille facile à utiliserUn reset CSS cross-browserFeuille de style d’impression55mercredi 19 juin 13
  56. 56. C’est parti !compass create test --using blueprint --syntax sass56mercredi 19 juin 13

×