drupal+less | phdug drupal developers day 2012

The Drupal & Less Combo

By: Albert S. Causing acausing@drupalph.org

Date: October 27, 2012

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

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.

5 of 16

6 of 16

//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

8 of 16

9 of 16

10 of 16

11 of 16

12 of 16

13 of 16

14 of 16

15 of 16

16 of 16

17 of 16

18 of 16

19 of 16

20 of 16

21 of 16

22 of 16

23 of 16

24 of 16

25 of 16

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.

26 of 16

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.

27 of 16

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().

28 of 16

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"

29 of 16

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

30 of 16

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/

31 of 16

Q & ALive Drupal + Less Dry

THANK YOU!

Albert S. Causingacausing@drupalph.org

drupal+less | phdug drupal developers day 2012

css filessetting

css doc

csscascading style sheets

drupal lessdrupal

loadingimportingusing

info file

compiled file

source file

Documents

drupal 8 - a brief introduction - unfpa malawi · migrate...

drupal developers

key modules for drupal website developers

drupal omega theme + less

apex developers : do more with less !

how to keep your drupal developers happy and inspired!

bootstrap + drupal commerce in less than 45 minutes!

strong features of drupal developers you should know before...

drupal beginner’s guide · about drupal drupal, launched...

drupal basics · drupal basics legal aid drupal users...

integrating drupal with software developers assistance...

drupal web developers

best practices for drupal developers by mir nazim @ drupal...

drupal – site builders - home | catalyst nz - site...

civicrm for drupal developers, site builders, and themers

adapting a site template using drupal themes and sass/less

drupal developers india

managing drupal development with multiple developers - jay...

hire drupal developers for your website

drupal developers of the eastern europe