Using LESS, the CSS Preprocessor: J and Beyond 2013
4 likes2,118 views
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
Ad
More Related Content
What's hot (20)
Viewers also liked (8)
Ad
Similar to Using LESS, the CSS Preprocessor: J and Beyond 2013 (20)
Ad
More from Andrea Tarr (7)
Recently uploaded (20)
Using LESS, the CSS Preprocessor: J and Beyond 2013
- 1. LESS, The CSS Preprocessor Andrea Tarr MetaScale / Sears Holdings J and Beyond 2013
- 2. What is LESS Using LESS LESS in Joomla JAB 2013: LESS, The CSS Preprocessor 2
- 3. WHAT IS LESS JAB 2013: LESS, The CSS Preprocessor 3
- 4. Dynamic CSS Easy Customization Reuse Power of Variables JAB 2013: LESS, The CSS Preprocessor 4
- 5. Dynamic CSS Super set of CSS .LESSJAB 2013: LESS, The CSS Preprocessor 5
- 6. Preprocessing Client Side http://lesscss.org JAB 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. Preprocessing Server Side http://leafo.net/lessphp http://nodejs.org JAB 2013: LESS, The CSS Preprocessor 8
- 9. 1. Install node.js http://nodejs.org 2. Install LESS sudo npm install -g less 3. Process CSS files lessc ../less/template.less > template.css JAB 2013: LESS, The CSS Preprocessor 9
- 10. Why LESS not SASS? Faster JavaScript CSS Syntax JAB 2013: LESS, The CSS Preprocessor 10
- 11. USING LESS JAB 2013: LESS, The CSS Preprocessor 11
- 12. Variables Define once, use often JAB 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. Mixins Shorthand classes JAB 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. Mixins Parameters JAB 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. Operations Math! 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. Functions Built-in JAB 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. Comments CSS Style Included JAB 2013: LESS, The CSS Preprocessor 27 /* */
- 28. /* Header styles for blog pages */ JAB 2013: LESS, The CSS Preprocessor 28
- 29. Comments Single line Not included JAB 2013: LESS, The CSS Preprocessor 29 //
- 30. // Override from template JAB 2013: LESS, The CSS Preprocessor 30
- 31. @import CSS files LESS files JAB 2013: LESS, The CSS Preprocessor 31 @
- 32. @import "variables.less"; @import "mixins.less"; @import "layout.less"; @import "grid.less"; Compiles to single file JAB 2013: LESS, The CSS Preprocessor 32
- 33. Nesting JAB 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 Issues Firebug gives CSS line # not LESS # Search LESS files for multiple selectors Doesn't work when nested JAB 2013: LESS, The CSS Preprocessor 36
- 37. LESS IN JOOMLA JAB 2013: LESS, The CSS Preprocessor 37
- 38. You don't need LESS for Joomla templates JAB 2013: LESS, The CSS Preprocessor 38
- 39. Joomla Bootstrap files are already compiled. Some Bootstrap template vendors don't distribute LESS files. JAB 2013: LESS, The CSS Preprocessor 39
- 40. You don't need LESS in Joomla ... but it's very helpful! JAB 2013: LESS, The CSS Preprocessor 40
- 41. Joomla JUI files media jui css fonts img js less JAB 2013: LESS, The CSS Preprocessor 41
- 42. media/jui/less accordion.less alerts.less bootstrap-extended.less bootstrap-rtl.less bootstrap.less breadcrumbs.less button-groups.less buttons.less JAB 2013: LESS, The CSS Preprocessor 42
- 43. carousel.less close.less code.less component-animations.less dropdowns.less forms.less grid.less hero-unit.less JAB 2013: LESS, The CSS Preprocessor 43
- 44. icomoon.less labels-badges.less layouts.less mixins.less modals.less navbar.less navs.less pager.less JAB 2013: LESS, The CSS Preprocessor 44
- 45. pagination.less popovers.less progress-bars.less reset.less responsive-1200px-min.less responsive-767px-max.less JAB 2013: LESS, The CSS Preprocessor 45
- 46. responsive-768px-979px.less responsive-navbar.less responsive-utilities.less responsive.less scaffolding.less sprites.less tables.less thumbnails.less JAB 2013: LESS, The CSS Preprocessor 46
- 47. tooltip.less type.less utilities.less variables.less wells.less JAB 2013: LESS, The CSS Preprocessor 47
- 48. JUI Extensions bootstrap-extended.less JAB 2013: LESS, The CSS Preprocessor 48
- 49. Bootstrap.less Contains @imports of other less files. Replace jui bootstrap.less with template.less in your template. JAB 2013: LESS, The CSS Preprocessor 49
- 50. mytemplate css template.css html images less template.less variables.less index.php JAB 2013: LESS, The CSS Preprocessor 50
- 51. variables.less Sets up variables for your template Copy file from media/jui/less and change it in your template JAB 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 your template Add styles for your template using less JAB 2013: LESS, The CSS Preprocessor 53
- 54. Remember, straight CSS is valid LESS. Add in LESS where it is helpful. Ignore it where it would be confusing. 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 (con't) After the main Bootstrap imports, import the Joomla specific less file to override as necessary. @import "../../../media/jui/less/ bootstrap-extended.less"; JAB 2013: LESS, The CSS Preprocessor 56
- 57. template.less (con't) 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 file lessc ../less/template.less > template.css Call the template.css file in your index.php file as usual. JAB 2013: LESS, The CSS Preprocessor 58
- 59. Questions? JAB 2013: LESS, The CSS Preprocessor 59