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 OUTILSRappel

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 COMPASSUn  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,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBmYjRlNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+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; }}

SpritesHaute Définition

Résultat obtenu

Sprites HDdans 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 !

MERCIMehdi  Kabab  de  Clever  Age@piouPiouM  /  @CleverAge

BLEND WEB MIX