========================================================
TOC
========================================================

1. Describtion
  1.1 Quick Usage
  1.2 What is it?
  1.3 Supported inheritance types
  1.4 Supported constants
  1.5 Added keyword
  1.6 Code example
  1.7 Note
2. Usage
  2.1 Basics
  2.2 Compressed output
  2.3 Commented output
  2.4 Remote files
  2.5 Further usage
3. Processing Examples
  3.1 Inheritance
    3.1.1 Simple Case
    3.1.2 Multiple Inheritance
    3.1.3 Recursive Inheritance
    3.1.4 Overwriting
  3.2 Constants
     3.2.1 Basic Example



========================================================
1. Describtion
========================================================

1.1 Quick Usage
--------------------------------------------------------
To see a ECSS in action, you can call your css file in
the following way, which will produce a syntax high-
lighted html output including comments about the
modifications (variable and inheritance replacements)
taken place.

http://yourdomain.tld/path/to/ecss.php?file=YOUR_CSS.CSS&comment&highlight


1.2 What is it?
--------------------------------------------------------
Extended CSS (ECSS) adds a new language construct called
'extends'. This keyword can then be used in normal *.css
files to inherit properties from parent classes, ids or
tags by single, multiple or recursive inheritance.

Additionally ECSS also provides global constants to be
used throughout the whole CSS file, which makes it easy
to define basic colors, fonts, etc and assign them
to element properties. Once you change the constants,
everything else based on these will change immediately.

Extended CSS (ECSS) itself is the preprocessor that will
generate standard conform CSS code from the user defined
extended CSS code.



1.3 Supported inheritance types:
--------------------------------------------------------
+ single
+ multiple
+ recursive (infinite levels)

1.4 Supported constants:
--------------------------------------------------------
+ Constant declarations are only supported globally
  (outside of classes, ids and/or tags)
+ Constants can contain any value, even white spaces
+ There is no operation (+ - * /) currently supported


1.5 Added keyword
--------------------------------------------------------
+ extends
+ $ (precendor for constants)

1.6 Code example
--------------------------------------------------------
$bar : 100px;
$foo : 500px;

.myColor { 
    color:red;
    width: $bar;
}
.box a extends .myColor{
    height: $foo;
}

1.7 Note
--------------------------------------------------------
Extended CSS (ECSS) emerged as a side-product by sweany
(php framework | https://github.com/cytopia/sweany)
and comes under the same license (see: LICENSE).



========================================================
2. Usage
========================================================

2.1 Basics
--------------------------------------------------------
1.) Put ecss.php somewhere near your css files in your
    document root.
2.) Include your CSS files via the ecss.php wrapper as
    follows:
 http://path/to/ecss.php?file=/css/YOUR_CSS_FILE_1.css
 http://path/to/ecss.php?file=/css/YOUR_CSS_FILE_2.css

2.2 Compressed output
--------------------------------------------------------
If you have finished developing your css files, you can
call each of your files with 'compressed' to produce a
stripped file output:
 http://path/to/ecss.php?file=/css/YOUR_CSS_FILE_1.css&compressed
 http://path/to/ecss.php?file=/css/YOUR_CSS_FILE_2.css&compressed

Then you can paste each of the outputs into your
favorite text editor and save it.

2.3 Commented output
-------------------------------------------------------
If you need to debug your generated CSS file(s) you have
the option to have auto generated comments about the
properties that have been inherited from other parents.
The comments will tell you what property was applied
by what parent.
Comments wil also tell you which values have been
replaced by constants.
How to turn on:
 http://path/to/ecss.php?file=/css/YOUR_CSS_FILE_1.css&comment


2.4 Remote files
--------------------------------------------------------
Instead of just including local files, you could also
include remote files. Use the following syntax:

You can also include remote files by specifying an url
for the file parameter
 http://path/to/ecss.php?file=http://url.tld/style.css
or compressed
 http://path/to/ecss.php?file=http://url.tld/style.css&compressed

2.5 Further usage
--------------------------------------------------------
You can also use the ecss.php file as a code layouter
for stripped CSS files. If you want to browse a remote
css files that has no spaces/lines or tabs, just paste
the url into the file param and view a nice layouted
CSS file. 



========================================================
3. Processing Examples
========================================================

3.1 Inheritance
--------------------------------------------------------



3.1.1 Simple Case
--------------------------------------------------------

Unpreprocessed CSS file (what you code):

    .baseColor
    {
        color:       #FFFFFF;
    }
    .myBox extends .baseColor
    {
        width:       60px;
    }

Preprocessed file (auto-generated):

    .baseColor
    {
        color:       #FFFFFF;
    }
    .myBox
    {
        width:       60px;
        color:       #FFFFFF;
    }

Nothing too complicated here. The class myBox just gets
all the attributes from its parent.

	
3.1.2 Multiple Inheritance
--------------------------------------------------------
Multiple inheritance is done by a comma seperated list
of classes, ids or tags.

Unpreprocessed CSS file (what you code):

    baseColor
    {
        color:       #FFFFFF;
    }
    #head
    {
        font-weight: bold;
        font-size:   1.2em;
    }
    .myBox extends .baseColor, #head
    {
        width:       60px;
    }

	
Preprocessed file (auto-generated):

    .baseColor
    {
        color:       #FFFFFF;
    }
    #head
    {
        font-weight: bold;
        font-size:   1.2em;
    }
    .myBox
    {
        color:       #FFFFFF;
        font-weight: bold;
        font-size:   1.2em;
        width:       60px;
    }	


	
3.1.3 Recursive inheritance
--------------------------------------------------------	

Unpreprocessed CSS file (what you code):

    #someId {
        width:  100px;
    }
    .parentCorp {
        color:  red;
        margin: 10px;
    }
    .parentBase extends .parentCorp {
        color:  blue;
    }
    #head extends .parentBase {
    }
    #body extends #head, #someId {
        color:  black;
    }
	

Preprocessed file (auto-generated):

    #someId {
        width:  100px;
    }
    .parentCorp {
        color:  red;
        margin: 10px;
    }
    .parentBase {
        color:  blue;
        margin: 10px;
    }
    #head {
        color:  blue;
        margin: 10px;
    }
    #body {
        color:  black;
        margin: 10px;
        width:  100px;
    }




3.1.4 Overwriting
--------------------------------------------------------

Unpreprocessed CSS file (what you code):

    #header
    {
        with:        100px;
    }
    .baseColor
    {
        color:       #FFFFFF;
    }
    .baseFont
    {
        font-weight: bold;
        font-size:   1.2em;
        color:       #3F3F3f;
    }
    .myBox extends #header, .baseColor, .baseFont
    {
        width:       60px;
    }



Preprocessed file (auto-generated):

    #header
    {
        with:        100px;
    }
    .baseColor
    {
        color:       #FFFFFF;
    }
    .baseFont
    {
        font-weight: bold;
        font-size:   1.2em;
        color:       #3F3F3f;
    }
    .myBox
    {
        font-weight: bold;
        font-size:   1.2em;
        color:       #3F3F3f;
        width:       60px;
    }	


'color' was inheritated from #header and .baseColor,
but the last element (.baseColor) applied the final value.

'width' was inheritated from #header, but the local definition
is stronger than parent defines.


3.2 Constants
--------------------------------------------------------

3.2.1 Basic Example
--------------------------------------------------------

$corpColor1 : red;
$corpColor2 : #CECECE;
$corpBorder : solid 1px black;

#head {
    color : $corpColor1;
    border: $corpBorder;
}

/* you can also mix it with inheritance */

#main extends #head {
    color : $corpColor2;
}