Joomla + LESSMilwaukee JUGMay 23, 2013Cory Webb
Agenda● What is LESS● LESS Resources● LESS in Joomla● Hands-on● Questions
What is LESS● “The dynamic stylesheet language”● Everything I always wanted CSS to be● Extends CSS with variables, mixins,...
Variables● Set widely used values in one place● Re-use them throughout the stylesheet● Set once, change once
Mixins● Embed all properties of a class into anotherclass● Behave like functions and take arguments● Great for setting val...
Border Radius Example.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius...
Nested Rules● Nest selectors inside other selectors to specifyinheritence<div class=”top-level”><div class=”next-level”><d...
Nested Rules● Old Way.top-level .next-level .third-level {/* Set styles here */}● With LESS.top-level {.next-level {.third...
Operations & Functions● Operations let you add, subtract, divide andmultiply property values and colors.● Functions can be...
LESS Resources● Main Website: http://lesscss.org/● LESS Compilers:● CodeKit: http://incident57.com/codekit/● Crunch App: h...
LESS in Joomla● Bootstrap built into Joomla 3.0● You still have to compile your LESS files to CSS● Many template framework...
Hands-on With LESS
Questions?@corywebb
Upcoming SlideShare
Loading in...5
×

Adding and modifying LESS in your web site templates

922

Published on

Cory Webb from Mano Crafted gives us an introduction to LESS n Joomla. Too bad the slides don't capture the live demo!

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

  • Be the first to like this

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

No notes for slide

Adding and modifying LESS in your web site templates

  1. 1. Joomla + LESSMilwaukee JUGMay 23, 2013Cory Webb
  2. 2. Agenda● What is LESS● LESS Resources● LESS in Joomla● Hands-on● Questions
  3. 3. What is LESS● “The dynamic stylesheet language”● Everything I always wanted CSS to be● Extends CSS with variables, mixins, nestedrules, operations and functions● Must be compiled
  4. 4. Variables● Set widely used values in one place● Re-use them throughout the stylesheet● Set once, change once
  5. 5. Mixins● Embed all properties of a class into anotherclass● Behave like functions and take arguments● Great for setting values that have a lot ofbrowser prefixes● Example: border-radius
  6. 6. Border Radius Example.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;border-radius: @radius;}.some-class-here {.border-radius(5px);}
  7. 7. Nested Rules● Nest selectors inside other selectors to specifyinheritence<div class=”top-level”><div class=”next-level”><div class=”third-level”>...</div></div></div>
  8. 8. Nested Rules● Old Way.top-level .next-level .third-level {/* Set styles here */}● With LESS.top-level {.next-level {.third-level {// Set styles here}}}
  9. 9. Operations & Functions● Operations let you add, subtract, divide andmultiply property values and colors.● Functions can be used to transform colors,manipulate strings and do math● Example: color(@string); // parses a string to a color● Function Reference: http://lesscss.org/#reference
  10. 10. LESS Resources● Main Website: http://lesscss.org/● LESS Compilers:● CodeKit: http://incident57.com/codekit/● Crunch App: http://crunchapp.net/● LESS PHP: http://leafo.net/lessphp/
  11. 11. LESS in Joomla● Bootstrap built into Joomla 3.0● You still have to compile your LESS files to CSS● Many template frameworks now include LESS-CSS compilers● Be wise in choosing your compiling strategy● Server-side compiling can add to load times if youdo them on every page load● Compile once and re-use● Only compile when changes are made
  12. 12. Hands-on With LESS
  13. 13. Questions?@corywebb
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×