Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Upcoming SlideShare
Loading in...5
×
 

Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

on

  • 5,440 views

Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la ...

Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?

Statistics

Views

Total Views
5,440
Views on SlideShare
2,041
Embed Views
3,399

Actions

Likes
3
Downloads
7
Comments
0

21 Embeds 3,399

http://pioupioum.fr 2552
http://www.blendconference.com 373
http://www.leonlacom.com 265
https://twitter.com 94
http://news.humancoders.com 48
http://2013.blendwebmix.com 25
http://cloud.feedly.com 14
http://www.feedspot.com 6
http://mmorio 4
http://reader.aol.com 4
http://www.linkedin.com 2
http://feeds.pioupioum.fr 2
http://plus.url.google.com 2
http://www.domcomp.com&_=1409595572436 HTTP 1
https://reader.aol.com 1
http://prlog.ru 1
https://www.linkedin.com 1
http://eventifier.co 1
http://inoreader.com 1
http://leed.fam-martel.eu 1
http://eventifier.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013 Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013 Presentation Transcript

  • INTÉGRATEUR WEB BLEND WEB MIX http://www.flickr.com/photos/uniquehotelsgroup/5689788783/ (cc) Aime  Sass  pour  ton  bien #sass #BlendWebMix
  • SASS ET COMPASS NE SONT QUE DES OUTILS Rappel http://www.flickr.com/photos/jannem/3312116875/ (cc)
  • IL N’EN RESTERA QU’UN !
  • SYNTAXE CSS ENRICHIE ✓ variables ✓ règles  imbriquées ✓ structures  de   contrôle ✓ automa:sa:on ✓ … http://www.flickr.com/photos/edwarddalmulder/3635432458/ (cc)
  • Rechercher / remplacer, c’est mon dada. – Personne. Jamais.
  • Déclinaison rapide $font-color: #3F3828 !default; $header-color: #4F4736 !default; $important-color: #7B9600 !default; $loud-color: #3F3828 !default; $quiet-color: #666 !default; $ultra-quiet-color: #9E988C !default; $alt-text-color: #4F4736 !default; $highlight-color: #FF7100 !default; $link-color: #7B9600 !default; $footer-color: #4D4535 !default; $footer-title-color: #7B9600 !default; … _theme.scss @import "partials/subtheme"; @import "partials/theme"; styles.scss $subtheme-color: #FF4E00 !default; $subtheme-color-lighter: #FFB011 !default; $link-color: $subtheme-color !default; $highlight-color: $subtheme-color !default; $footer-title-color: $subtheme-color !default; $subtitle-color: $subtheme-color !default; $nav-submenu-link-color: $subtheme-color !default; $webform-green: $subtheme-color !default; $webform-grey: #f2f2f2 !default; $webform-brown: #3a3321 !default; $webform-shadow-color: #888 !default; $webform-action-color: #fff !default; $webform-action-gradient-start: #ff940b !default; $webform-action-gradient-end: #f56000 !default; $webform-action-border-color: darken($webform-action-gradient-end, 5%) !default; _subtheme.scss
  • Écrire 50 fois le même sélecteur CSS, c’est ma passion. – Personne. Jamais.
  • Partenariat #my-biz { @import "partials/general/*"; @import "partials/ui/*"; @import "partials/content-types/*"; } • des partenaires souhaitent afficher un décors de page à leurs couleurs • ils fournissent, voire chargent des CSS avec de belles règles, comme * { line-height:1 } • vous n’avez pas d’autre choix que d’augmenter le poids de tous vos sélecteurs
  • Dis voir, comment je fais pour afficher le logo anglais pour la pologne ? – Un chef de projet. Facile, ajoute pl en dans la variable de configuration dédiée du thème. – Moi.
  • Automatisation $logo-supported_languages: fr, en, es, it, de en, pl en !default; // La page d'accueil doit afficher un logo contextualisé par la langue. .node-type-homepage { @each $logo-supported_language in $logo-supported_languages { $language: $logo-supported_language; $locale: $logo-supported_language; // Cas particulier d'une langue qui doit afficher le logo d'une autre langue. @if type-of($logo-supported_language) == 'list' { // La langue de l'utilisateur. $language: nth($logo-supported_language, 1); // La locale à utiliser pour afficher le logo. $locale: nth($logo-supported_language, 2); } // Chemins localisés du logo. $logo-path: 'locales/#{$locale}/logo'; &.i18n-#{$language} .logo { @include iu-hidpi-replace-text-with-dimensions($logo-path); } } }
  • ÉCONOMISER DES HEURES DE TRAVAIL AVEC COMPASS Un  support  cross-­‐browser  avancé http://www.flickr.com/photos/bermilabs/4078706331/ (cc)
  • Dans la vraie vie • 1 site multi-domaines, 2 langues, 5 thèmes • 398 Ko de CSS au total • dont 10 Ko pour un support IE7+ via des feuilles de styles dédiés
  • Dans la vraie vie, #2 • 1 site multi-lingues, 2 thèmes • 90.3 Ko de CSS au total • dont 2.3 Ko pour un support IE7+ via des feuilles de styles dédiés
  • MERCI COMPASS POUR TES MIXINS ! http://www.flickr.com/photos/meddygarnet/4232411010/ (cc)
  • $experimental-support-for-svg: true; // IE9 .linear-gradient { @include filter-gradient(#a9e4f7, #0fb4e7); // IE6-8 @include background-image(linear-gradient(#a9e4f7, #0fb4e7)); } .linear-gradient { *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFA9E4F7', endColorstr='#FF0FB4E7'); background: url('data:image/svg +xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJod HRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM +PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4 Mj0iNTAlIiB5Mj0iMTAwJSI +PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBm YjRlNyIvPjwvbGluZWFyR3JhZGllbnQ +PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9z dmc+IA=='); background: -webkit-linear-gradient(#a9e4f7, #0fb4e7); background: -moz-linear-gradient(#a9e4f7, #0fb4e7); background: -o-linear-gradient(#a9e4f7, #0fb4e7); background: linear-gradient(#a9e4f7, #0fb4e7); } SCSS CSS
  • // Activer le fallback de la syntaxe de 2009. $flex-legacy-enabled: true; @import "compass/css3/flexbox"; .grid { @include display-flex; @include flex-direction(column-reverse); } .col { background: #ccc; padding: 30px; } .fluid { @include flex(1); } .fixed { background: red; width: 400px; } SCSS Flexbox facile Attention : Ce code requiert Compass 0.13.alpha au minimun.
  • .grid { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col { background: #ccc; padding: 30px; } .fluid { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fixed { background: red; width: 400px; } CSS Flexbox facile
  • .grid { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col { background: #ccc; padding: 30px; } .fluid { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fixed { background: red; width: 400px; } CSS Flexbox, ancienne syntaxe
  • .grid { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col { background: #ccc; padding: 30px; } .fluid { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fixed { background: red; width: 400px; } CSS Flexbox, nouvelle syntaxe
  • ET SI JE VOUS DISAIS QUE JE GÈRE ET CRÉE MES SPRITES CSS EN QUELQUES SECONDES ? http://www.flickr.com/photos/dark_ghetto28/385574568/ (cc)
  • Sprites, strict minimum @import "compass"; // Importation de la sprite map. @import "social/*.png"; // Création de l'image de sprite map et des sprites CSS. @include all-social-sprites; SCSS .social-sprite, .social-googleplus, .social-linkedin, .social-twitter { background-image: url('../img/social-s4363aa6d7e.png'); background-repeat: no-repeat; } .social-googleplus { background-position: 0 0; } .social-linkedin { background-position: 0 -48px; } .social-twitter { background-position: 0 -96px; } CSS
  • Sprites Haute Définition @import "compass"; // Configuration de la sprite map basique. $social-sprite-base-class: '%social_base'; $social-layout: smart; $social-sort-by: name; $social-sprite-dimensions: true; // Importation de la sprite map basique. @import "social/*.png"; // Création de l'image de sprite map et des sprites CSS. @include all-social-sprites; // Déclaration de la version HD en reprennant les mêmes layout et tri // que la sprite map basique $social_hd-sprites: sprite-map("social_x2/*.png", $layout: $social-layout, $sort-by: $social-sort-by); // Une gestion HD en quelques lignes. #{$social-sprite-base-class} { @include hide-text; display: block; @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { background-image: $social_hd-sprites; background-size: sprite-width($social-sprites) auto; } }
  • Sprites Haute Définition Résultat obtenu
  • Sprites HD dans le désordre Avec Compass, il est tout à fait possible de gérer des sprites map qui ne présentent pas le même ordre.
  • Le code pique un peu, mais c’est faisable !
  • MERCI Mehdi  Kabab  de  Clever  Age @piouPiouM  /  @CleverAge BLEND WEB MIX