Drupal+LESS | PHDUG Drupal Developers Day 2012

1,188 views

Published on

Drupal + LESS[CSS], Presentation by Albert Causing during Drupal Developers Day 2012 | October 27

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal+LESS | PHDUG Drupal Developers Day 2012

  1. 1. The Drupal & Less Combo By: Albert S. Causing acausing@drupalph.org Date: October 27, 2012
  2. 2. 1. What is CSS2. What is LESS CSS3. Less CSS: Variables Mixins Nested Rules Functions & Operations4. Code samples5. Drupal & Less Drupal Less Module Installation6. Q&A and Live Example 2 of 16
  3. 3. www.drupalph.orgWhat is CSSCascading Style Sheets (CSS) is a style sheet language used fordescribing the presentation semantics (the look and formatting) of adocument written in a markup language. Its most common applicationis to style web pages written in HTML and XHTML.CSS Usage• Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup;• HTML element attributes had to be explicitly descripted, often repeatedly, within the HTML.• CSS allows authors to move much of that information to another file, the style sheet, resulting in considerably simpler HTML. - Wikipedia 3 of 16
  4. 4. www.drupalph.orgWhat is LESS• LESS was developed by Alexis Sellier,• The dynamic stylesheet language.• It is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax.• The indented syntax of LESS is a nested metalanguage, as valid CSS is valid LESS code with the same semantics.• LESS provides the following mechanisms: variables, nesting, mixins, operators and functions. 4 of 16
  5. 5. www.drupalph.org5 of 16
  6. 6. www.drupalph.org//Site Theme Configuration@main-background : transparent url(mainbg.png) no-repeat;@main-font-color : #333333;@anchor-color : #776600;@banner-image : sites/default/files/banners/newbanner.jpg;@footer-background : transparent url(footer.png) no-repeat;//Fonts@font-h1 : "Times New Roman",Georgia,Serif;@font-h2 : “Arial”;@font-block-title : “Helvetica”; 6 of 16
  7. 7. www.drupalph.org7 of 16
  8. 8. www.drupalph.org8 of 16
  9. 9. www.drupalph.org9 of 16
  10. 10. www.drupalph.org10 of 16
  11. 11. www.drupalph.org11 of 16
  12. 12. www.drupalph.org12 of 16
  13. 13. www.drupalph.org13 of 16
  14. 14. www.drupalph.org14 of 16
  15. 15. www.drupalph.org15 of 16
  16. 16. www.drupalph.org16 of 16
  17. 17. www.drupalph.org17 of 16
  18. 18. www.drupalph.org18 of 16
  19. 19. www.drupalph.org19 of 16
  20. 20. www.drupalph.org20 of 16
  21. 21. www.drupalph.org21 of 16
  22. 22. www.drupalph.org22 of 16
  23. 23. www.drupalph.org23 of 16
  24. 24. www.drupalph.org24 of 16
  25. 25. www.drupalph.orgDRUPAL + LESShttp://www.drupal.org/project/lessThis module will automatically process any LESS filesthat are added using drupal_add_css or added throughyour themes .info file.Add your files just like any other css file, just with .less asthe extension, and they will be automatically processed. 25 of 16
  26. 26. www.drupalph.orgLESS Module Installation• Download & Install Libraries API. @ http://drupal.org/project/libraries• Download lessphp @ http://leafo.net/lessphp/ and unpack it so that lessc.inc.php is located at sites/all/libraries/lessphp/lessc.inc.php.• Download and install http://drupal.org/project/less. 26 of 16
  27. 27. www.drupalph.orgChanges should be made to theme• Rename all [name].css file to [name].css.less• Open and Edit [theme-name].info -> Search and Replace “.css” to “.css.less” and save file.• Open and Edit template.php -> Search and Replace “.css” to “.css.less” and save file.Make sure to check that .css files are loaded/imported using drupal_add_css()api, otherwise don’t append .less unless you’ll change the loading/importingusing drupal_add_css(). 27 of 16
  28. 28. www.drupalph.orgFile placement during LESS compilation.• If your source file was "sites/all/modules/test/test.css.less“• Then your compiled file will be "sites/[sites|default]/files/less/[random.string]/sites/all/modules/test/test.c ss" 28 of 16
  29. 29. www.drupalph.orgCompatibility:Fully compatible with "Optimize CSS files"setting on "Admin->Site configuration->Performance"(admin/settings/performance).RTL (Right-To-Left Languages) support will work as long as your files arenamed "somename.css.less".Should work with most themes and caching mechanisms.Confirmed to work with:• Boost• Advagg (Advanced CSS/JS Aggregation)• Omega 29 of 16
  30. 30. www.drupalph.orgLINKS:• Drupal = http://www.drupal.org/project/drupal• Less Module = http://www.drupal.org/project/less• Libraries Api Module = http://www.drupal.org/project/libraries• LessPHP Library = http://leafo.net/lessphp/• Less CSS Doc = http://lesscss.org/ 30 of 16
  31. 31. www.drupalph.org31 of 16
  32. 32. THANK YOU!Albert S. Causing acausing@drupalph.org

×