Your SlideShare is downloading. ×
Using LESS, the CSS Preprocessor: J and Beyond 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using LESS, the CSS Preprocessor: J and Beyond 2013

852
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 …

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
852
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LESS, The CSS PreprocessorAndrea TarrMetaScale / Sears HoldingsJ and Beyond 2013
  • 2. What is LESSUsing LESSLESS in JoomlaJAB 2013: LESS, The CSS Preprocessor 2
  • 3. WHAT IS LESSJAB 2013: LESS, The CSS Preprocessor 3
  • 4. Dynamic CSSEasy CustomizationReusePower of VariablesJAB 2013: LESS, The CSS Preprocessor 4
  • 5. Dynamic CSSSuper set of CSS.LESSJAB 2013: LESS, The CSS Preprocessor 5
  • 6. PreprocessingClient Sidehttp://lesscss.orgJAB 2013: LESS, The CSS Preprocessor 6
  • 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. PreprocessingServer Sidehttp://leafo.net/lessphphttp://nodejs.orgJAB 2013: LESS, The CSS Preprocessor 8
  • 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. Why LESS not SASS?FasterJavaScriptCSS SyntaxJAB 2013: LESS, The CSS Preprocessor 10
  • 11. USING LESSJAB 2013: LESS, The CSS Preprocessor 11
  • 12. VariablesDefine once,use oftenJAB 2013: LESS, The CSS Preprocessor 12@
  • 13. @text-color: #2c2c2c;p {color: @text-color;}JAB 2013: LESS, The CSS Preprocessor 13
  • 14. h2 {color: @text-color;border: 1px solid@text-color;}JAB 2013: LESS, The CSS Preprocessor 14
  • 15. MixinsShorthand classesJAB 2013: LESS, The CSS Preprocessor 15.
  • 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. .sideboxa {.rounded;}.sideboxb {padding: 5px;.rounded;}JAB 2013: LESS, The CSS Preprocessor 17
  • 18. MixinsParametersJAB 2013: LESS, The CSS Preprocessor 18()
  • 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. .sideboxa {.rounded;}.sideboxb {padding: 5px;.rounded(3px);}JAB 2013: LESS, The CSS Preprocessor 20
  • 21. OperationsMath!JAB 2013: LESS, The CSS Preprocessor 21+-*/()
  • 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. @link-color: #3f43ca;a {color: @link-color;}a:hover {color: (@link-color + #222);}JAB 2013: LESS, The CSS Preprocessor 23
  • 24. FunctionsBuilt-inJAB 2013: LESS, The CSS Preprocessor 24()
  • 25. @link-color: #3f43ca;a {color: @link-color;}a:hover {color: lighten(@link-color, 10%);}JAB 2013: LESS, The CSS Preprocessor 25
  • 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. CommentsCSS StyleIncludedJAB 2013: LESS, The CSS Preprocessor 27/**/
  • 28. /* Header stylesfor blog pages */JAB 2013: LESS, The CSS Preprocessor 28
  • 29. CommentsSingle lineNot includedJAB 2013: LESS, The CSS Preprocessor 29//
  • 30. // Override from templateJAB 2013: LESS, The CSS Preprocessor 30
  • 31. @importCSS filesLESS filesJAB 2013: LESS, The CSS Preprocessor 31@
  • 32. @import "variables.less";@import "mixins.less";@import "layout.less";@import "grid.less";Compiles to single fileJAB 2013: LESS, The CSS Preprocessor 32
  • 33. NestingJAB 2013: LESS, The CSS Preprocessor 33{. { }&{ }}
  • 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. #header { color: #2c2c2c;.navigation { font-size: 12px; }.logo { width: 300px;&:hover { text-decoration: underline;}}}JAB 2013: LESS, The CSS Preprocessor 35
  • 36. Debug IssuesFirebug gives CSS line # not LESS #Search LESS files for multipleselectorsDoesnt work when nestedJAB 2013: LESS, The CSS Preprocessor 36
  • 37. LESS IN JOOMLAJAB 2013: LESS, The CSS Preprocessor 37
  • 38. You dont needLESS for JoomlatemplatesJAB 2013: LESS, The CSS Preprocessor 38
  • 39. Joomla Bootstrap filesare already compiled.Some Bootstraptemplate vendors dontdistribute LESS files.JAB 2013: LESS, The CSS Preprocessor 39
  • 40. You dont need LESS in Joomla... but its very helpful!JAB 2013: LESS, The CSS Preprocessor 40
  • 41. Joomla JUI filesmediajuicssfontsimgjslessJAB 2013: LESS, The CSS Preprocessor 41
  • 42. media/jui/lessaccordion.lessalerts.lessbootstrap-extended.lessbootstrap-rtl.lessbootstrap.lessbreadcrumbs.lessbutton-groups.lessbuttons.lessJAB 2013: LESS, The CSS Preprocessor 42
  • 43. carousel.lessclose.lesscode.lesscomponent-animations.lessdropdowns.lessforms.lessgrid.lesshero-unit.lessJAB 2013: LESS, The CSS Preprocessor 43
  • 44. icomoon.lesslabels-badges.lesslayouts.lessmixins.lessmodals.lessnavbar.lessnavs.lesspager.lessJAB 2013: LESS, The CSS Preprocessor 44
  • 45. pagination.lesspopovers.lessprogress-bars.lessreset.lessresponsive-1200px-min.lessresponsive-767px-max.lessJAB 2013: LESS, The CSS Preprocessor 45
  • 46. responsive-768px-979px.lessresponsive-navbar.lessresponsive-utilities.lessresponsive.lessscaffolding.lesssprites.lesstables.lessthumbnails.lessJAB 2013: LESS, The CSS Preprocessor 46
  • 47. tooltip.lesstype.lessutilities.lessvariables.lesswells.lessJAB 2013: LESS, The CSS Preprocessor 47
  • 48. JUI Extensionsbootstrap-extended.lessJAB 2013: LESS, The CSS Preprocessor 48
  • 49. Bootstrap.lessContains @imports of other lessfiles.Replace jui bootstrap.less withtemplate.less in your template.JAB 2013: LESS, The CSS Preprocessor 49
  • 50. mytemplatecsstemplate.csshtmlimageslesstemplate.lessvariables.lessindex.phpJAB 2013: LESS, The CSS Preprocessor 50
  • 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. 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. 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. 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. 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. 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. 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. 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. Questions?JAB 2013: LESS, The CSS Preprocessor 59

×