Download as PDF, PPTX
Uploaded byAndrea Tarr
LESS, the CSS Preprocessor
The document discusses the CSS preprocessor Less, emphasizing its features such as dynamic CSS, the use of variables, mixins, and nesting for better organization and customization of styles. It provides practical instructions for installation, preprocessing, and usage within Joomla environments, while also comparing Less to SASS. Additionally, it details the structure of Less files and templates, showcasing how to implement Less within Joomla projects effectively.
LESS, the CSS Preprocessor
- 1. LESS, The CSS Preprocessor Andrea Tarr MetaScale /Sears Holdings Joomla Day New England 2013
- 2. What is LESS UsingLESS LESS in Joomla April 13, 2013 JDNE: LESS, The CSS Preprocessor 2
- 3. Dynamic CSS Easy Customization Reuse Powerof Variables April 13, 2013 JDNE: LESS, The CSS Preprocessor 3
- 4. Dynamic CSS Super setof CSS .LESS April 13, 2013 JDNE: LESS, The CSS Preprocessor 4
- 5. Preprocessing Client Side http://lesscss.org April 13,2013 JDNE: LESS, The CSS Preprocessor 5
- 6. <link rel="stylesheet/ less" type="text/css" href="styles.less"/> <script src="less.js" type="text/javascript"></ script> April 13, 2013 JDNE: LESS, The CSS Preprocessor 6
- 7. Preprocessing Server Side http://leafo.net/lessphp http://nodejs.org April 13,2013 JDNE: LESS, The CSS Preprocessor 7
- 8. 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 April 13, 2013 JDNE: LESS, The CSS Preprocessor 8
- 9. Why LESS notSASS? Faster JavaScript CSS Syntax April 13, 2013 JDNE: LESS, The CSS Preprocessor 9
- 10. @ Variables Define once, use often April13, 2013 JDNE: LESS, The CSS Preprocessor 10
- 11. @text-color: #2c2c2c; p{ color: @text-color; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 11
- 12. h2 { color: @text-color; border: 1px solid @text-color; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 12
- 13. Mixins Shorthand classes April 13,2013 . JDNE: LESS, The CSS Preprocessor 13
- 14. .rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 14
- 15. .sideboxa { .rounded; } .sideboxb { padding: 5px; .rounded; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 15
- 16. () Mixins Parameters April 13, 2013 JDNE: LESS, The CSS Preprocessor 16
- 17. .rounded (@radius: 5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 17
- 18. .sideboxa { .rounded; } .sideboxb { padding: 5px; .rounded(3px); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 18
- 19. Operations + Math! - * / () April 13, 2013 JDNE: LESS, The CSS Preprocessor 19
- 20. @base-margin: 15px; @base: 5%; @filler:(@base * 2); .box1 { margin-bottom: (@base- margin + 20px); height: (100% / 2 + @filler); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 20
- 21. @link-color: #3f43ca; a{ color: @link-color; } a:hover { color: (@link-color + #222); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 21
- 22. () Functions Built-in April 13, 2013 JDNE: LESS, The CSS Preprocessor 22
- 23. @link-color: #3f43ca; a{ color: @link-color; } a:hover { color: lighten(@link- color, 10%; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 23
- 24. lighten(@color, 10%); darken(@color, 10%); saturate(@color,10%); desaturate(@color, 10%); fadein(@color, 10%); spin(@color, 10); April 13, 2013 JDNE: LESS, The CSS Preprocessor 24
- 25. /* Comments CSS Style Included */ April 13, 2013 JDNE: LESS, The CSS Preprocessor 25
- 26. /* Header styles forblog pages */ April 13, 2013 JDNE: LESS, The CSS Preprocessor 26
- 27. // Comments Single line Not included April13, 2013 JDNE: LESS, The CSS Preprocessor 27
- 28. // Override fromtemplate April 13, 2013 JDNE: LESS, The CSS Preprocessor 28
- 29. @ @import CSS files LESS files April13, 2013 JDNE: LESS, The CSS Preprocessor 29
- 30. @import "variables.less"; @import "mixins.less"; @import "layout.less"; @import "grid.less"; Compiles to single file April 13, 2013 JDNE: LESS, The CSS Preprocessor 30
- 31. Nesting { .{} &{ } } April 13, 2013 JDNE: LESS, The CSS Preprocessor 31
- 32. #header { color:#2c2c2c; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: underline; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 32
- 33. #header { color: #2c2c2c; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: underline; } } } April 13, 2013 JDNE: LESS, The CSS Preprocessor 33
- 34. Debug Issues Firebug givesCSS line Search LESS files for multiple selectors Doesn't work when nested April 13, 2013 JDNE: LESS, The CSS Preprocessor 34
- 35. LESS in Joomla April13, 2013 JDNE: LESS, The CSS Preprocessor 35
- 36. You don't need LESS forJoomla templates April 13, 2013 JDNE: LESS, The CSS Preprocessor 36
- 37. Joomla Bootstrap files arealready compiled Some Bootstrap template vendors don't distribute LESS files April 13, 2013 JDNE: LESS, The CSS Preprocessor 37
- 38. You don't needLESS in Joomla ... but it's very helpful! April 13, 2013 JDNE: LESS, The CSS Preprocessor 38
- 39. Joomla JUI files media jui css fonts img js less April 13, 2013 JDNE: LESS, The CSS Preprocessor 39
- 40.
- 41. carousel.less close.less code.less component- animations.less dropdowns.less forms.less grid.less hero-unit.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 41
- 42. icomoon.less labels-badges.less layouts.less mixins.less modals.less navbar.less navs.less pager.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 42
- 43. pagination.less popovers.less progress-bars.less reset.less responsive-1200px- min.less responsive-767px- max.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 43
- 44.
- 45. tooltip.less type.less utilities.less variables.less wells.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 45
- 46. JUI Extensions bootstrap-extended.less April 13,2013 JDNE: LESS, The CSS Preprocessor 46
- 47. Bootstrap.less contains @imports of otherless files. Replace bootstrap.less with template.less in your template. April 13, 2013 JDNE: LESS, The CSS Preprocessor 47
- 48. mytemplate css template.css html images less template.less variables.less index.php April 13, 2013 JDNE: LESS, The CSS Preprocessor 48
- 49. variables.less Sets up variablesfor your template Copy file from media/jui/ less and change it in your template April 13, 2013 JDNE: LESS, The CSS Preprocessor 49
- 50. variables.less @bodyBackground: #ffffff; @textColor: #2c2c2c; @linkColor:#08c08d; @linkColorHover: darken(@linkColor, 15%); @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans- serif; April 13, 2013 JDNE: LESS, The CSS Preprocessor 50
- 51. template.less @import less filesfrom media/jui/less @import any less files in your template Add styles for your template using less April 13, 2013 JDNE: LESS, The CSS Preprocessor 51
- 52. Remember, straight CSS is validLESS. Add in LESS where it is helpful. Ignore it where it would be confusing. April 13, 2013 JDNE: LESS, The CSS Preprocessor 52
- 53. template.less @import "../../../media/jui/ less/reset.less"; @import "variables.less"; @import"../../../media/jui/ less/mixins.less"; @import "../../../media/jui/ less/scaffolding.less"; etc... April 13, 2013 JDNE: LESS, The CSS Preprocessor 53
- 54. template.less (con't) @import "../../../media/jui/ less/bootstrap- extended.less"; Hasto be after the other Bootstrap @imports to override when necessary April 13, 2013 JDNE: LESS, The CSS Preprocessor 54
- 55. template.less (con't) After theimports, add your styles .img_caption .right { float: right; margin-left: 1em; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 55
- 56. Compile template.less lessc ../less/template.less >template.css Call the template.css file in your index.php file as usual. April 13, 2013 JDNE: LESS, The CSS Preprocessor 56
- 57. Questions? April 13, 2013 JDNE: LESS, The CSS Preprocessor 57