• Save
Css.more.or.less
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Css.more.or.less

on

  • 449 views

Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des ...

Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.

Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.

Statistics

Views

Total Views
449
Views on SlideShare
377
Embed Views
72

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 72

http://humantalks.com 71
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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

Css.more.or.less Presentation Transcript

  • 1. Css: more or Less ?Julien RocheHuman Talks Grenoble – 12/03/2013
  • 2. Speaker  Julien Roche @rochejul  Ingénieur d’étude et formateur sur Java, Web et Web Mobile pour Objet Direct  Ancien commiter du projet OpenSource “wiQuery”  Expérience Web Mobile depuis 2 ans  Auteur de formations sur HTML5 et le Web Mobile  Référent HTML5 et Web Mobile2
  • 3. Et pour faire la présentation … … racontons une jolie histoire 33
  • 4. Il était une fois … un site Web 44
  • 5. Sur ce site Web … j’ai rencontré du CSS (… entre autre …) 55
  • 6. Je suis content car … ■ Le CSS permet de définir des styles au DOM ■ Le CSS permet de définir des styles selon le média ■ Le CSS permet de l’héritage des styles ■ Le CSS possède un moteur de sélecteur CSS puissant ■ Et Le CSS a connu enormément d’amélioration depuis CSS3 66
  • 7. Mais soudain … … le drame 77
  • 8. On doit faire face à … … une structuration complexe … du code difficile à maintenir… du code en quantité … un manque d’outils … l’absence de méthodes utilitaires … l’absence de variables, de fonctions 88
  • 9. Mais une lueur d’espoir … http://lesscss.org/ https://github.com/cloudhead/less.js 99
  • 10. J’ai enfin un outil ! (1) ■ Vous devez créer des fichiers avec l’extension “.less” ■ Ensuite, Less nous offre la possiblité de l’utilisé de deux façons différentes 1010
  • 11. J’ai enfin un outil ! (2)  Importer le fichier JavaScript “less.js” dans votre page, qui va compiler à la volée vos fichiers Less <!DOCTYPE HTML> <html lang="fr"> <head> <!-- Metas basic --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="fr"> <!-- StyleSheets --> <link rel="stylesheet/less" type="text/css" href="styles.less" /> <!-- JavaScripts --> <script src="less.js" type="text/javascript"></script> <!-- Title & others --> <title>Exemple très simple</title> </head> <body> <!-- ... --> </body> </html>11
  • 12. J’ai enfin un outil ! (3) ■ utiliser RhinoJS / NodeJs pour compiler les fichiers Less en CSS directement !!12
  • 13. J’ai enfin des variables ! @black: #000; @gray: rgba(85, 85, 85); @white: rgb(0, 0, 0); Less nous offre la possibilité d’utiliser des variables !! body { background-color: @gray; } Cela est d’autant plus utile pour les sites à marque blanche (et de pouvoir ainsi changer facilement et img { rapidement les couleurs, la taille des éléments …) border: 2px dotted @black; } 1313
  • 14. J’ai enfin des méthodes !.text-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; Less permet de génèrer des portions de -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; code en fonction de paramètres (en leur plaçant des valeurs par défaut) filter: progid:DXImageTransform.Microsoft.Shadow(Strength=@blur, Direction=90, Color= @color)} Cela permet de faire du refactoring dep.shadow { code et d’avoir une maintenance accrue de .text-shadow(); nos styles}.mixin (@a) when (lightness(@a) >= 50%) { background-color: @Black;}.mixin (@a) when (lightness(@a) < 50%) { background-color: @White; Less offre également la possibilité de} mettre des conditions sur les méthodes (afin de savoir si elle s’applique ou non).mixin (@a) { color: @a;} 1414
  • 15. Je peux facilement séparer mes fichiers ! /* Fichier a.less */ @a: red; @b: blue; @c: green; @import de CSS3 pas encore bien supporté. Du coup, avec Less, nous pouvons l’utiliser sans problèmes /* Fichier b.less */ @import-once "a.less"; table { background-color: @a; border: 1px solid @b; color: @c; } 1515
  • 16. J’ai un code structurant ! /* CSS */ // Less table { table { border: 1px solid black; border: 1px solid @borderColor; } &.dotted { table.dotted { border-style: dotted; border-style: dotted; } } td { table td { background-color: @tdColor; background-color: #ffbbcc; &:hover{ } background-color: @tdHoverColor; table td:hover { } background-color: #ccbbff; } } } Code plus claire et structuré 1616
  • 17. J’ai des méthodes supplémentaires ! // Commenter avec “//” !! // Variabiliser les sélecteurs @prefix: a-prefix; .@{prefix}-style { // va devenir .a-prefix-style } Et tout un tas de fonctions pratiques que je vous invite à voir directement sur le // Injection dans du texte site @baseUrl: "http://somewhere.com"; background-image: url("@{baseUrl}/a.png"); // Opérations !! @base: 5%; @filler: (@base * 2); @other: (@base + @filler); @base-color: (#888 / 4); background-color: (@base-color + #111); 1717
  • 18. Et plein d’autres choses encore ! Documentation (officielle ou non) Outils http://lesscss.org/#docs http://css2less.cc/ http://lesscss.org/#reference http://crunchapp.net/ http://coding.smashingmagazine.com/2011/ http://winless.org/ 09/09/an-introduction-to-less-and- comparison-to-sass/ http://wearekiss.com/simpless18