Home

WingStyle

The most amazing way to style.

With the help of WingStyle, you can easyly create cross-browser compatible designs, without always repeating yourself. And since you are using PHP, you have all the normal options. You can pull things off $_GET, use loops and everything else. This makes designing a whole new thing than before. You don't need to care for the output - you can have it rich or poor, and just keep the same code.

To include a WingStyle based style, you can use a little neat hack:

	<link rel="stylesheet" src="WingStyle" media="screen"/>
```
The trick here is, to let the web-server append the /index.php into that url - so in fact you are asking for WingStyle/index.php in a more confortable way.

In the index.php file, you just need a simple include_once to the WingStyle.php file, and it'll set itself up in the split of a second.

```php5
<?php
include_once "WingStyle.php";

echo WS("body")
	->background("#ffffff")
->end;
?>
```

As you can see, the syntax is super easy:
```php5
<?=WS(__selector__)
	->rule(arguments)
->end?>
```
__selector__ is your normal CSS selector, like html, body, ul li > img, #header, .userPic and alike.
Most rule-names - except a few - have the same name as in usual CSS. Examples are:
- background
- padding
- color
Some odd ones would be:
- text-shadow => textShadow
- border-radius => borderRadius
As you see, we dismissed the dash and capitalized the following letter

To access more precise props, you can do it like this:
```php5
<?=WS("table tr #stuff td:last-child")
	->border->top->right(20)
	->border->top->left(20)
->end;?>
```
Not too hard, right? :)

As you saw above, some rules look like they are native to the main class - which they aren't. Thanks to a neat little PHP trick, we have three types of rules:
- background(...) = These are "stand-alone" rules - or as W3C calls them, shorthands.
- padding->top(...) = It's a normal rule - we call it just...a rule.
- background->gradient->linear(...) = This we call a sub-level rule - in fact, you could code a rule that has about a million chains. =) This way, you can be super precise!
 
There is a whole bunch of other things you can use to customize the bootstrap:

```php5
<?php
// Make WingStyle output NO header
define("WS_NO_HEADER",true);

// Display the copyright, regardless.
define("WS_COPYRIGHT",true);

// above constants now take influence how the file sets everything up:
include_once "WingStyle.php";

// If this is set to false, every CSS rule will end up in its own new line but will only take one line and nothing more.
WS()->beauty=true;

// Pre-load some of the rulesets in advance to pre-configure them to avoid PHP errors. The propertory "display" and "font" currently can cause said issues and throw an E_WARNING or E_NOTICE. Just seperate all the things you want to pre-load by a comma.
WS()->preLoad("display", "font");

// Setting this to true will enable debugging output.
WS()->debug=false;

// This option will filter which functions are displayed in the outputed debug log:
WS()->debugFunc=array("__get");

?>
```

Ok, that's enough for the user-land stuff. There'll be more informations available soon - like a table of available rules and their siblings.

# The devel stuff.
To extend WingStyle's functionality, there is a super simple way to just add your own rule to it.
If you know the Yii Framework, you surely will start finding yourself being reminded on it's syntax and structure.

## The signature
To create an own rule, open up your IDE or PHP source editor and copy-paste this structure:
```php5
<?php class WS_@rule extends WingStyleDesigner {
} ?>
```
First, replace *@rule* with the actual rule name - but keep the the WS_ prefix - this is very important for this to work. Then save the file by it's class name into the rulesets folder.

Now, depending on your type of rule, you can now decide what kind of a rule this is at all. To show an example, let's take the CSS rule "opacity". This rule has no other variants or doesn't need siblings, so we can handle it like the background rule - as a standart rule. To do this, take a look at the following piece of code:

```php5
<?php class WS_opacity extends WingStyleDesigner {
	public function main($o) { // 1
		$this->addRule(new WingStyleRule("opacity", $o)); // 2
		return WS(); // 3
	}
} ?>
```
Now, let's look into the facts.
	1. We define the main method of this rule. This way we can access it like WS(...)->opacity(...).
	2. In this place, we add a rule to the set. You might see that the first argument of this function is the creation of a new object of WingStyleRule - this is a "Definition Type". When we parse all the things we have added to a selector, we might want indidual parsing. Like we also have WingStyleComment to properly display small and large comments the CSS way. This is very mandatory because otherwise the end()-method will only display the first argument, and ommit the other ones.
	3. To keep the chain going, we always return the WingStyle singleton. Since we are not passing any argument to it, we aren't modifying the selector but just getting back its instance.
Now after you read this, you maybe are confused...but don't be, thats actually all you needed to know! Now you can make your own first-level rule.

Let's look at another example - the margin rule. This one has sub-rules - -top, -bottom, -left and -right. Let's assume opacity had a sub-rule. For this primitive example, I'll call it "negate".
```php5
<?php class WS_opacity extends WingStyleDesigner {
	public function main($o) {
		$this->addRule(new WingStyleRule("opacity", $o));
		return WS();
	}
	public function negate($n) { // <----
		$this->addRule(new WingStyleRule("opacity-negate",$n));
		return WS();
	}
} ?>
```
As you see, we now have a new method - and now we can do this in our css:
```php5
<?=WS("#content")
	->opacity(0.4)
	->opacity->negate(2)
->end?>
```
As you see, we have the main-method called like it belonged to WingStyle itself - and negate() as a method of opacity.

## Multi-level chain
In fact, the whole framework is designed to totally make things chain, chain and chain. That is why you shall open your eyes right now:
```php5
<?=WS("article")
	->borderRadius->top->left(20)
	->borderRadius->top->right(20)
	->borderRadius->bottom->left(5)
	->borderRadius->bottom->right(5)
	->background("black")
	->background->gradient->linear("#ffffff", "#000000")
->end?>
```
As you saw, I totally used a sibling of *borderRadius* called *top* another called *bottom* - also I used *gradient* from *background*. You can make this yourself with two additional steps - and yes, I am testing to stretch this even further.

First, look at this version of the template:
```php5
<?php class WS_@rule extends WingStyleDesigner {
	public function getFile() { return __FILE__; }
} ?>
```
Now, create a folder with the **EXACT** same name as the class. If it is called __WS_foo__ then you have to make a folder called just like that.
	|-rulesets
	  |-WS_foo.php
	  |-WS_foo
	    |- WS_bar.php
You see this? Once you made a folder, it looks like you added a new rule-set folder. So you just can chain things into each other from now on. Look into how I did it in *WS_background*.



# Questions?
### Answer: email.
You can just email me or report an issue if you have a question! :3