Your SlideShare is downloading. ×
0
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Drupal+LESS | PHDUG Drupal Developers Day 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupal+LESS | PHDUG Drupal Developers Day 2012

983

Published on

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

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
983
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Drupal & Less Combo By: Albert S. Causing acausing@drupalph.org Date: October 27, 2012
  • 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. 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. 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. www.drupalph.org5 of 16
  • 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. www.drupalph.org7 of 16
  • 8. www.drupalph.org8 of 16
  • 9. www.drupalph.org9 of 16
  • 10. www.drupalph.org10 of 16
  • 11. www.drupalph.org11 of 16
  • 12. www.drupalph.org12 of 16
  • 13. www.drupalph.org13 of 16
  • 14. www.drupalph.org14 of 16
  • 15. www.drupalph.org15 of 16
  • 16. www.drupalph.org16 of 16
  • 17. www.drupalph.org17 of 16
  • 18. www.drupalph.org18 of 16
  • 19. www.drupalph.org19 of 16
  • 20. www.drupalph.org20 of 16
  • 21. www.drupalph.org21 of 16
  • 22. www.drupalph.org22 of 16
  • 23. www.drupalph.org23 of 16
  • 24. www.drupalph.org24 of 16
  • 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. 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. 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. 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. 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. 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. www.drupalph.org31 of 16
  • 32. THANK YOU!Albert S. Causing acausing@drupalph.org

×