Using LESS, the CSS Preprocessor: J and Beyond 2013

1,582 views

Published on

With the introduction of Bootstrap to Joomla 3.x, LESS has been introduced to the Joomla world. LESS presents the opportunity to make writing CSS, especially the new CSS3, easier. This session how LESS works, what you need to use it, how to write it, and how to incorporate it into your workflow.LESS

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,582
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Using LESS, the CSS Preprocessor: J and Beyond 2013

  1. 1. LESS, The CSS PreprocessorAndrea TarrMetaScale / Sears HoldingsJ and Beyond 2013
  2. 2. What is LESSUsing LESSLESS in JoomlaJAB 2013: LESS, The CSS Preprocessor 2
  3. 3. WHAT IS LESSJAB 2013: LESS, The CSS Preprocessor 3
  4. 4. Dynamic CSSEasy CustomizationReusePower of VariablesJAB 2013: LESS, The CSS Preprocessor 4
  5. 5. Dynamic CSSSuper set of CSS.LESSJAB 2013: LESS, The CSS Preprocessor 5
  6. 6. PreprocessingClient Sidehttp://lesscss.orgJAB 2013: LESS, The CSS Preprocessor 6
  7. 7. <link rel="stylesheet/less" type="text/css"href="styles.less" /><script src="less.js"type="text/javascript"></script>JAB 2013: LESS, The CSS Preprocessor 7
  8. 8. PreprocessingServer Sidehttp://leafo.net/lessphphttp://nodejs.orgJAB 2013: LESS, The CSS Preprocessor 8
  9. 9. 1.  Install node.jshttp://nodejs.org2. Install LESSsudo npm install -g less3. Process CSS fileslessc ../less/template.less> template.cssJAB 2013: LESS, The CSS Preprocessor 9
  10. 10. Why LESS not SASS?FasterJavaScriptCSS SyntaxJAB 2013: LESS, The CSS Preprocessor 10
  11. 11. USING LESSJAB 2013: LESS, The CSS Preprocessor 11
  12. 12. VariablesDefine once,use oftenJAB 2013: LESS, The CSS Preprocessor 12@
  13. 13. @text-color: #2c2c2c;p {color: @text-color;}JAB 2013: LESS, The CSS Preprocessor 13
  14. 14. h2 {color: @text-color;border: 1px solid@text-color;}JAB 2013: LESS, The CSS Preprocessor 14
  15. 15. MixinsShorthand classesJAB 2013: LESS, The CSS Preprocessor 15.
  16. 16. .rounded {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}JAB 2013: LESS, The CSS Preprocessor 16
  17. 17. .sideboxa {.rounded;}.sideboxb {padding: 5px;.rounded;}JAB 2013: LESS, The CSS Preprocessor 17
  18. 18. MixinsParametersJAB 2013: LESS, The CSS Preprocessor 18()
  19. 19. .rounded (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;border-radius: @radius;}JAB 2013: LESS, The CSS Preprocessor 19
  20. 20. .sideboxa {.rounded;}.sideboxb {padding: 5px;.rounded(3px);}JAB 2013: LESS, The CSS Preprocessor 20
  21. 21. OperationsMath!JAB 2013: LESS, The CSS Preprocessor 21+-*/()
  22. 22. @base-margin: 15px;@base: 5%;@filler: (@base * 2);.box1 {margin-bottom: (@base-margin +20px);height: (@filler + 100% / 2);}JAB 2013: LESS, The CSS Preprocessor 22
  23. 23. @link-color: #3f43ca;a {color: @link-color;}a:hover {color: (@link-color + #222);}JAB 2013: LESS, The CSS Preprocessor 23
  24. 24. FunctionsBuilt-inJAB 2013: LESS, The CSS Preprocessor 24()
  25. 25. @link-color: #3f43ca;a {color: @link-color;}a:hover {color: lighten(@link-color, 10%);}JAB 2013: LESS, The CSS Preprocessor 25
  26. 26. lighten(@color, 10%);darken(@color, 10%);saturate(@color, 10%);desaturate(@color, 10%);fadein(@color, 10%);spin(@color, 10);JAB 2013: LESS, The CSS Preprocessor 26
  27. 27. CommentsCSS StyleIncludedJAB 2013: LESS, The CSS Preprocessor 27/**/
  28. 28. /* Header stylesfor blog pages */JAB 2013: LESS, The CSS Preprocessor 28
  29. 29. CommentsSingle lineNot includedJAB 2013: LESS, The CSS Preprocessor 29//
  30. 30. // Override from templateJAB 2013: LESS, The CSS Preprocessor 30
  31. 31. @importCSS filesLESS filesJAB 2013: LESS, The CSS Preprocessor 31@
  32. 32. @import "variables.less";@import "mixins.less";@import "layout.less";@import "grid.less";Compiles to single fileJAB 2013: LESS, The CSS Preprocessor 32
  33. 33. NestingJAB 2013: LESS, The CSS Preprocessor 33{. { }&{ }}
  34. 34. #header { color: #2c2c2c; }#header .navigation {font-size: 12px; }#header .logo {width: 300px; }#header .logo:hover {text-decoration: underline; }JAB 2013: LESS, The CSS Preprocessor 34
  35. 35. #header { color: #2c2c2c;.navigation { font-size: 12px; }.logo { width: 300px;&:hover { text-decoration: underline;}}}JAB 2013: LESS, The CSS Preprocessor 35
  36. 36. Debug IssuesFirebug gives CSS line # not LESS #Search LESS files for multipleselectorsDoesnt work when nestedJAB 2013: LESS, The CSS Preprocessor 36
  37. 37. LESS IN JOOMLAJAB 2013: LESS, The CSS Preprocessor 37
  38. 38. You dont needLESS for JoomlatemplatesJAB 2013: LESS, The CSS Preprocessor 38
  39. 39. Joomla Bootstrap filesare already compiled.Some Bootstraptemplate vendors dontdistribute LESS files.JAB 2013: LESS, The CSS Preprocessor 39
  40. 40. You dont need LESS in Joomla... but its very helpful!JAB 2013: LESS, The CSS Preprocessor 40
  41. 41. Joomla JUI filesmediajuicssfontsimgjslessJAB 2013: LESS, The CSS Preprocessor 41
  42. 42. media/jui/lessaccordion.lessalerts.lessbootstrap-extended.lessbootstrap-rtl.lessbootstrap.lessbreadcrumbs.lessbutton-groups.lessbuttons.lessJAB 2013: LESS, The CSS Preprocessor 42
  43. 43. carousel.lessclose.lesscode.lesscomponent-animations.lessdropdowns.lessforms.lessgrid.lesshero-unit.lessJAB 2013: LESS, The CSS Preprocessor 43
  44. 44. icomoon.lesslabels-badges.lesslayouts.lessmixins.lessmodals.lessnavbar.lessnavs.lesspager.lessJAB 2013: LESS, The CSS Preprocessor 44
  45. 45. pagination.lesspopovers.lessprogress-bars.lessreset.lessresponsive-1200px-min.lessresponsive-767px-max.lessJAB 2013: LESS, The CSS Preprocessor 45
  46. 46. responsive-768px-979px.lessresponsive-navbar.lessresponsive-utilities.lessresponsive.lessscaffolding.lesssprites.lesstables.lessthumbnails.lessJAB 2013: LESS, The CSS Preprocessor 46
  47. 47. tooltip.lesstype.lessutilities.lessvariables.lesswells.lessJAB 2013: LESS, The CSS Preprocessor 47
  48. 48. JUI Extensionsbootstrap-extended.lessJAB 2013: LESS, The CSS Preprocessor 48
  49. 49. Bootstrap.lessContains @imports of other lessfiles.Replace jui bootstrap.less withtemplate.less in your template.JAB 2013: LESS, The CSS Preprocessor 49
  50. 50. mytemplatecsstemplate.csshtmlimageslesstemplate.lessvariables.lessindex.phpJAB 2013: LESS, The CSS Preprocessor 50
  51. 51. variables.lessSets up variables for your templateCopy file from media/jui/less andchange it in your templateJAB 2013: LESS, The CSS Preprocessor 51
  52. 52. variables.less@bodyBackground: #ffffff;@textColor: #2c2c2c;@linkColor: #08c08d;@linkColorHover: darken(@linkColor, 15%);@sansFontFamily: "Helvetica Neue",Helvetica, Arial, sans-serif;JAB 2013: LESS, The CSS Preprocessor 52
  53. 53. template.less@import less files from media/jui/less@import any less files in yourtemplateAdd styles for your templateusing lessJAB 2013: LESS, The CSS Preprocessor 53
  54. 54. Remember,straight CSS is validLESS.Add in LESS where it is helpful.Ignore it where it would beconfusing.JAB 2013: LESS, The CSS Preprocessor 54
  55. 55. template.less@import "../../../media/jui/less/reset.less";@import "variables.less";@import "../../../media/jui/less/mixins.less";@import "../../../media/jui/less/scaffolding.less";etc...JAB 2013: LESS, The CSS Preprocessor 55
  56. 56. template.less (cont)After the main Bootstrap imports,import the Joomla specific less fileto override as necessary.@import "../../../media/jui/less/bootstrap-extended.less";JAB 2013: LESS, The CSS Preprocessor 56
  57. 57. template.less (cont)After the imports, add your styles.img_caption .right {float: right;margin-left: 1em;}JAB 2013: LESS, The CSS Preprocessor 57
  58. 58. Compile the template.less filelessc ../less/template.less >template.cssCall the template.css file in yourindex.php file as usual.JAB 2013: LESS, The CSS Preprocessor 58
  59. 59. Questions?JAB 2013: LESS, The CSS Preprocessor 59

×