Adding and modifying LESS in your web site templates
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Adding and modifying LESS in your web site templates

on

  • 945 views

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

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

Statistics

Views

Total Views
945
Views on SlideShare
945
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Adding and modifying LESS in your web site templates Presentation Transcript

  • 1. Joomla + LESSMilwaukee JUGMay 23, 2013Cory Webb
  • 2. Agenda● What is LESS● LESS Resources● LESS in Joomla● Hands-on● Questions
  • 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. Variables● Set widely used values in one place● Re-use them throughout the stylesheet● Set once, change once
  • 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. 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. 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. 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. 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. 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. 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. Hands-on With LESS
  • 13. Questions?@corywebb