drupal+less | phdug drupal developers day 2012
DESCRIPTION
Drupal + LESS[CSS], Presentation by Albert Causing during Drupal Developers Day 2012 | October 27TRANSCRIPT
2 of 16
Table of Contents
1. What is CSS2. What is LESS CSS3. Less CSS:
VariablesMixinsNested RulesFunctions & Operations
4. Code samples
5. Drupal & LessDrupal Less Module Installation
6. Q&A and Live Example
3 of 16
The Drupal & Less Combowww.drupalph.org
What is CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is 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
PHDUG: Drupal Developers Day 2012
4 of 16
The Drupal & Less Combowww.drupalph.org
What 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.
PHDUG: Drupal Developers Day 2012
5 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
6 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
//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”;
Configurable Theme
7 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
8 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
9 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
10 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
11 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
12 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
13 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
14 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
15 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
16 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
17 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
18 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
19 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
20 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
21 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
22 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
23 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
24 of 16
The Drupal & Less Combowww.drupalph.org
PHDUG: Drupal Developers Day 2012
25 of 16
The Drupal & Less Combowww.drupalph.org
DRUPAL + LESS
http://www.drupal.org/project/less
This module will automatically process any LESS files that are added using drupal_add_css or added through your theme's .info file.
Add your files just like any other css file, just with .less as the extension, and they will be automatically processed.
PHDUG: Drupal Developers Day 2012
26 of 16
The Drupal & Less Combowww.drupalph.org
LESS 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.
PHDUG: Drupal Developers Day 2012
27 of 16
The Drupal & Less Combowww.drupalph.org
Changes 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/importing using drupal_add_css().
PHDUG: Drupal Developers Day 2012
28 of 16
The Drupal & Less Combowww.drupalph.org
File 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.css"
PHDUG: Drupal Developers Day 2012
29 of 16
The Drupal & Less Combowww.drupalph.org
Compatibility:
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 are named "somename.css.less".
Should work with most themes and caching mechanisms.Confirmed to work with:• Boost• Advagg (Advanced CSS/JS Aggregation)• Omega
PHDUG: Drupal Developers Day 2012
30 of 16
The Drupal & Less Combowww.drupalph.org
LINKS:
• 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/
PHDUG: Drupal Developers Day 2012
31 of 16
The Drupal & Less Combowww.drupalph.org
Q & ALive Drupal + Less Dry
Run
PHDUG: Drupal Developers Day 2012
THANK YOU!
Albert S. [email protected]