LESS, the CSS Preprocessor
6 likes3,335 views
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 Using LESS LESS in Joomla April 13, 2013 JDNE: LESS, The CSS Preprocessor 2
- 3. Dynamic CSS Easy Customization Reuse Power of Variables April 13, 2013 JDNE: LESS, The CSS Preprocessor 3
- 4. Dynamic CSS Super set of 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 not SASS? Faster JavaScript CSS Syntax April 13, 2013 JDNE: LESS, The CSS Preprocessor 9
- 10. @ Variables Define once, use often April 13, 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 for blog pages */ April 13, 2013 JDNE: LESS, The CSS Preprocessor 26
- 27. // Comments Single line Not included April 13, 2013 JDNE: LESS, The CSS Preprocessor 27
- 28. // Override from template April 13, 2013 JDNE: LESS, The CSS Preprocessor 28
- 29. @ @import CSS files LESS files April 13, 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 gives CSS 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 April 13, 2013 JDNE: LESS, The CSS Preprocessor 35
- 36. You don't need LESS for Joomla templates April 13, 2013 JDNE: LESS, The CSS Preprocessor 36
- 37. Joomla Bootstrap files are already compiled Some Bootstrap template vendors don't distribute LESS files April 13, 2013 JDNE: LESS, The CSS Preprocessor 37
- 38. You don't need LESS 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. media/jui/less accordion.less alerts.less bootstrap-extended.less bootstrap-rtl.less bootstrap.less breadcrumbs.less button-groups.less buttons.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 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. responsive-768px-979p x.less responsive-navbar.less responsive-utilities.less responsive.less scaffolding.less sprites.less tables.less thumbnails.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 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 other less 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 variables for 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 files from 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 valid LESS. 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"; Has to 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 the imports, 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