Créatifs : Boostez votre productivité

CRÉATIFS : BOOSTEZ VOTRE PRODUCTIVITÉ ANTOINE RICHARD JULIEN BODET

TIRER PARTIE DE SON ÉDITEUR UTILISER UN PRÉPROCESSEUR CSS AUTOMATISER
SON WORKFLOW

ÉDITEUR

OMG! http://www.flickr.com/photos/rchua/

BRACKETS

BRACKETS Intégration en flux continu brackets.io

BRACKETS • WYSIWYG • Propriétés CSS • Intégration accélérée •
Plugins contributifs (RWD, PSD, livereload) • Solution « jeune » • Code produit • Edition CSS via le DOM • Plugins dans l’ère du temps ? (AI, Compass)

FINI DE RÊVASSER http://www.flickr.com/photos/skorecky/

SUBLIME TEXT

INSTALLATION • Installer Sublime Text sublimetext.com

AU CLAVIER UNIQUEMENT ! http://www.flickr.com/photos/formerglory/

RACCOURCIS • Ctrl+Shift+P : console • Ctrl+P : goto anything
• Ctrl+D : multi selection • Ctrl+Shift+D : duplication • Ctrl+J : join lines • Ctrl+Shift+Up/Down : move line • Ctrl+/ : comment • Alt+Shift+1 / Alt+Shift+2 : split view • Ctrl+Shift+[1-9] / Ctrl+[1-9] : switch / select view http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_osx.html

SNIPPETS • Automatiser les éléments redondants • Contextualisation en fonction
du langage (HTML, CSS, JS, etc.) • Possibilité de créer des éléments complexes (tabulations, éléments pré-renseignés, etc.)

CREATION D’UN SNIPPET <snippet> <content><![CDATA[ <!doctype html>     <html class="no-js" lang="fr">  <head> <meta charset="UTF-8">  <title>${1}</title> <meta name="viewport" content="initial-scale=1.0">   <link rel="stylesheet" href="${2:styles/}styles.css" media="all"> </head> <body> ${3} </body> </html> ]]></content>  <tabTrigger>doctype</tabTrigger>   </snippet> HTML DOCTYPE

PACKAGE CONTROL • Installer Package Control sublime.wbond.net Installation « Install
package » Désinstallation « Remove package »

CULTIVER SA FAINÉANTISE http://www.flickr.com/photos/micheeky/

2009 : Zen Coding 2012 : Emmet • Installer Emmet
emmet.io • Via Package Control – Ctrl+Shift+P – Install package – Emmet PLUGIN : EMMET

PLUGIN : EMMET ul>li*5>a[href=#]>span{Item $} EMMET <ul> <li><a href="#"><span>Item 1</span></a></li>
<li><a href="#"><span>Item 2</span></a></li> <li><a href="#"><span>Item 3</span></a></li> <li><a href="#"><span>Item 4</span></a></li> <li><a href="#"><span>Item 5</span></a></li> </ul> HTML

PLUGIN : EMMET header>div>a[href=#]>h1.logo>span{Interface name}^^span.separator+a[href=#]>div.user>span.name>span{Jim Jameson}+span{Lorem ipsum dolor es...}^figure.online>img[src=images/me.png] EMMET
<header> <div> <a href="#"> <h1 class="logo"><span>Interface name</span></h1></a> <span class="serparator"></span> <a href="#"> <div class="user"> <span class="name"><span>Jim Jameson</span><span>Lorem ipsum dolor es...</span></span> <figure class="online"><img src="images/me.png" alt=""></figure> </div> </a> </div> </header> HTML

PLUGIN : EMMET header { m0-auto w100%! mw1024 tac }
EMMET header { margin: 0 auto; width: 100% !important; max-width: 1024px; text-align: center; } CSS Une multitude de raccourcis : tdn, vam, dn, db, dib, oh, c, fs, fw, etc.

PREPROCESSEUR CSS

Pourrait-on remplacer le #f60 du background des boutons par un
#9c0 ? Par contre on conserve le #f60 des h2 et des liens, hein ? -- un client

En fait, c’est pas top le #9c0. On peut mettre
un #f30 plutôt ? -- le même client

KEEP CALM! http://www.flickr.com/photos/97038533@N05/

DON’T REPEAT YOURSELF

PRÉPROCESSEUR CSS

PRIX DE LA RÉUTILISABILITÉ, FLEXIBILITÉ, MAINTENABILITÉ, PRODUCTIVITÉ LESS / SASS
CSS COMPILATION

2007 *.less *.sass (syntaxe indentée) 2009 2010 Demande du travail
pour convertir les CSS existants CSS classique = LESS valide *.scss CSS classique = SCSS valide

VARIABLES @primary: #f9c; h1 { color: @primary; } .footer {
background: @primary; } $primary: #f9c; h1 { color: $primary; } .footer { background: $primary; } LESS SCSS h1 { color: #f9c; } .footer { background: #f9c; } CSS

COULEURS $primary: #f9c; $increment: #333; h2 { color: $primary +
$increment; } h3 { color: $primary - $increment; } aside { background: lighten($primary, 25%); } SCSS

IMBRICATION #header { h1 { font-size: 26px; } p {
font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } SCSS

MIXINS @mixin border { border-top: 1px dotted #333; } article.post
{ background: #eee; @include border; } ul.menu { background: #ccc; @include border; } SCSS

MIXINS PARAMÉTRÉS @mixin sexy-border($color, $width: 1px) { border-color: $color; border-width:
$width; } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 3px); } SCSS

HÉRITAGE .message { border: 1px solid #ccc; padding: 10px; }
.success { @extend .message; color: green; } .error { @extend .message; color: red; } SCSS

STRUCTURES DE CONTRÔLE @if lightness($color) > 30% { background-color: #000;
} @else { background-color: #fff; } SCSS http://sass-lang.com/documentation/file.SASS_REFERENCE.html And more...

COMPASS

CSS SASS COMPASS

INSTALLATION DE COMPASS • Installer Ruby • Windows : rubyinstaller.org
• Mac : Vous l’avez déjà  Mettre à jour gem via gem update --system • Installer Compass (et Sass) gem install compass • Installer le plugin via Sublime Text

CONFIGURATION # Chemin de base http_path = “/” # Chemin
vers les fichiers sources sass_dir = “app/scss” # Chemin vers les fichiers générés css_dir = “app/css” # Répertoire des images (image-url, etc.) images_dir = “app/images” # Répertoire pour les sprites http_generated_images_path = “../images” Config.rb

MIXINS CSS3 • Box-shadow • Opacity • Transform • Transition
@include border-radius(5px); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; COMPASS CSS Vendor prefixes (caniuse.com)

EST-IL INDISPENSABLE DE CONNAÎTRE LES DIMENSIONS D’UN ELEMENT ? http://www.flickr.com/photos/tokyo_lama/

GESTION DES IMAGES • Mixins : – image-url : plus
besoin de spécifier le chemin – image-width / image-height SASS COMPASS CSS width: image-width(visual.png); height: image-height(visual.png); width:100px; height:150px; images_dir

LE CASSE-TÊTE DES SPRITES http://www.flickr.com/photos/chiotsrun/

GESTION DES SPRITES • Génération du fichier « sprite »
• Plus besoin de gérer background-position SASS COMPASS CSS + sprite @import "icons/*.png"; .picto_like { @include icons-sprite(like); } images_dir Homogénéité des dimensions

GESTION DES IMAGES Bug ? • Problème d’importation des sprites
lié au générateur compass https://github.com/chriseppstein/compass/commit/58babac sprite_importer.rb

AUTOMATISATION

INSTALLATION DE GRUNT • Installer Node.js nodejs.org • Installer Grunt
npm install –g grunt-cli

BUILD SCSS HTML IMAGES SPRITE HTML CSS

WATCH SCSS CSS EXÉCUTION DE TÂCHES LORS DE MODIFICATION DE
FICHIERS

LIVE RELOAD

LIVE RELOAD HTML, CSS... RAFRAICHISSEMENT AUTOMATIQUE DU NAVIGATEUR

COMMENT TESTEZ-VOUS VOS SITES SUR DE MULTIPLES DEVICES ? Merci
à Luke Wroblewski – lukew.com

http://viljamis.com/blog/2012/remote-preview

RAFRAÎCHIR TOUS SES APPAREILS LORSQU’UN FICHIER EST MODIFIÉ Configurez le
hostname de votre serveur LiveReload sur 0.0.0.0 Voir aussi Adobe Edge Inspect, remote preview...

MERCI DE VOTRE ATTENTION http://www.flickr.com/photos/52544814@N00/ github.com/jbodet/webdesign-productivity-workshop

Créatifs : Boostez votre productivité

Créatifs : Boostez votre productivité

More Decks by Antoine RICHARD

Other Decks in Design

Featured

Transcript