Skip to content

Commit

Permalink
Adding docs to the repo.
Browse files Browse the repository at this point in the history
Removed inline docs from plugins.
  • Loading branch information
peteboere committed Jan 21, 2014
1 parent d04a9a7 commit 2c88fd6
Show file tree
Hide file tree
Showing 63 changed files with 1,630 additions and 431 deletions.
3 changes: 3 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# CSS-Crush Documentation

Rendered online at http://the-echoplex.net/csscrush
66 changes: 66 additions & 0 deletions docs/api/functions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!--{
"title": "API functions"
}-->

## csscrush_file()

Process host CSS file and return the compiled file URL.

<code>csscrush_file( string $file [, array [$options](#api--options) ] )</code>


## csscrush_tag()

Process host CSS file and return an HTML link tag with populated href.

<code>csscrush_tag( string $file [, array [$options](#api--options) [, array $attributes ]] )</code>


## csscrush_inline()

Process host CSS file and return CSS as text wrapped in html `style` tags.

<code>csscrush_inline( string $file [, array [$options](#api--options) [, array $attributes ]] )</code>


## csscrush_string()

Compile a raw string of CSS string and return it.

<code>csscrush_string( string $string [, array [$options](#api--options) ] )</code>


## csscrush_stat()

Retrieve statistics from the most recent compiled file. Current available stats: selector_count, rule_count, compile_time and errors.

`csscrush_stat()`


## csscrush_version()

Get the library version.

`csscrush_version()`


## csscrush_get()

Retrieve a config setting or option default.

* `$object_name` Name of object you want to inspect: 'config' or 'options'.
* `$property`

`csscrush_get( string $object_name, string $property )`


## csscrush_set()

Set a config setting or option default.

* `$object_name` Name of object you want to modify: 'config' or 'options'.
* `$settings` Assoc array of keys and values to set, or callable which argument is the object specified in `$object_name`.

`csscrush_set( string $object_name, mixed $settings )`
109 changes: 109 additions & 0 deletions docs/api/options.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!--{
"title": "Options"
}-->

<table>
<tr>
<th class="option">Option
<th class="values">Values (default in bold)
<th>Description
</tr>
<tr>
<td class="option">minify
<td class="values"><b>true</b> | false | Array
<td>Enable or disable minification. Optionally specify an array of advanced minification parameters. Currently the only advanced option is 'colors', which will compress all color values in any notation.
</tr>
<tr>
<td class="option">formatter
<td class="values"><b>block</b> | single-line | padded
<td>Set the formatting mode. Overrides minify option if both are set.
</tr>
<tr>
<td class="option">newlines
<td class="values"><b>use-platform</b> | windows/win | unix
<td>Set the output style of newlines
</tr>
<tr>
<td class="option">boilerplate
<td class="values"><b>true</b> | false | Path
<td>Prepend a boilerplate to the output file
</tr>
<tr>
<td class="option">versioning
<td class="values"><b>true</b> | false
<td>Append a timestamped querystring to the output filename
</tr>
<tr>
<td class="option">vars
<td class="values">Array
<td>An associative array of CSS variables to be applied at runtime. These will override variables declared globally or in the CSS.
</tr>
<tr>
<td class="option">cache
<td class="values"><b>true</b> | false
<td>Turn caching on or off.
</tr>
<tr>
<td class="option">output_dir
<td class="values">Path
<td>Specify an output directory for compiled files. Defaults to the same directory as the host file.
</tr>
<tr>
<td class="option">output_file
<td class="values">Output filename
<td>Specify an output filename (suffix is added).
</tr>
<tr>
<td class="option">asset_dir
<td class="values">Path
<td>Directory for SVG and image files generated by plugins (defaults to the main file output directory).
</tr>
<tr>
<td class="option">stat_dump
<td class="values"><b>false</b> | true | Path
<td>Save compile stats and variables to a file in json format.
</tr>
<tr>
<td class="option">vendor_target
<td class="values"><b>"all"</b> | "moz", "webkit", ... | Array
<td>Limit aliasing to a specific vendor, or an array of vendors.
</tr>
<tr>
<td class="option">rewrite_import_urls
<td class="values"><b>true</b> | false | "absolute"
<td>Rewrite relative URLs inside inlined imported files.
</tr>
<tr>
<td class="option">enable
<td class="values">Array
<td>An array of plugin names to enable.
</tr>
<tr>
<td class="option">disable
<td class="values">Array | "all"
<td>An array of plugin names to disable. This option is always evaluated before enable.
</tr>
<tr>
<td class="option">source_map
<td class="values">true | <b>false</b>
<td>Output a source map (compliant with the Source Map v3 proposal).
</tr>
<tr>
<td class="option">trace
<td class="values">true | <b>false</b>
<td>Output SASS debug-info stubs for use with tools like FireSass.
</tr>
<tr>
<td class="option">context
<td class="values">Path
<td>Context for importing resources from relative urls (Only applies to `csscrush_string()` and command line utility).
</tr>
<tr>
<td class="option">doc_root
<td class="values">Path
<td>Specify an alternative server document root for situations where the CSS is being served behind an alias or url rewritten path.
</tr>
</table>

44 changes: 44 additions & 0 deletions docs/core/abstract.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!--{
"title": "Abstract rules"
}-->

Abstract rules are generic rules that can be [extended](#core--inheritance) with the `@extend` directive or mixed in (without arguments) like regular [mixins](#core--mixins) with the `@include` directive.

```crush
@abstract ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@abstract heading {
font: bold 1rem serif;
letter-spacing: .1em;
}
.foo {
@extend ellipsis;
display: block;
}
.bar {
@extend ellipsis;
@include heading;
}
```

```css
.foo,
.bar {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.foo {
display: block;
}
.bar {
font: bold 1rem serif;
letter-spacing: .1em;
}
```
53 changes: 53 additions & 0 deletions docs/core/auto-prefixing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!--{
"title": "Vendor prefixing"
}-->

Vendor prefixes for properties, functions, @-rules and even full declarations are **automatically generated** – based on [trusted](http://caniuse.com) [sources](http://developer.mozilla.org/en-US/docs/CSS/CSS_Reference) – so you can maintain cross-browser support while keeping your source code clean and easy to maintain.

In some cases (e.g. CSS3 gradients) final syntax is incompatible with older prefixed syntax. In these cases the old syntax is polyfilled so you can use the correct syntax while preserving full support for older implementations.

```crush
.foo {
background: linear-gradient(to right, red, white);
}
```

```css
.foo {
background: -webkit-linear-gradient(left, red, white);
background: -moz-linear-gradient(left, red, white);
background: -o-linear-gradient(left, red, white);
background: linear-gradient(to right, red, white);
}
```


```crush
@keyframes bounce {
50% {transform: scale(1.4);}
}
```

```css
@-webkit-keyframes bounce {
50% {-webkit-transform: scale(1.4);
transform: scale(1.4);}
}
@-moz-keyframes bounce {
50% {-moz-transform: scale(1.4);
transform: scale(1.4);}
}
@-o-keyframes bounce {
50% {-o-transform: scale(1.4);
transform: scale(1.4);}
}
@keyframes bounce {
50% {-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);}
}
```
37 changes: 37 additions & 0 deletions docs/core/block-nesting.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!--{
"title": "Nesting"
}-->

Block nesting is done with the `@in` directive. Especially useful for when you need to group lots of styles under a common selector prefix.

Note use of the parent selector `&`:

```crush2
@in .homepage {
@in .content {
p {
font-size: 110%;
}
}
&amp;.blue {
color: powderblue;
}
.no-js &amp; {
max-width: 1024px;
}
}
```

```crush
.homepage .content p {
font-size: 110%;
}
.homepage.blue {
color: powderblue;
}
.no-js .homepage {
max-width: 1024px;
}
```
25 changes: 25 additions & 0 deletions docs/core/direct-import.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!--{
"title": "Direct @import"
}-->

Files referenced with the `@import` directive are inlined directly to save on http requests. Relative URL paths in the CSS are also updated if necessary.

If you specify a media designation following the import URL — as per the CSS standard — the imported file content is wrapped in a `@media` block.


```crush
/* Standard CSS @import statements */
@import "print.css" print;
@import url( "small-screen.css" ) screen and ( max-width: 500px );
```

```css
@media print {
/* Contents of print.css */
}
@media screen and ( max-width: 500px ) {
/* Contents of small-screen.css */
}
```
25 changes: 25 additions & 0 deletions docs/core/fragments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!--{
"title": "Fragments"
}-->

Fragments – defined and invoked with the <code>@fragment</code> directive – work in a similar way to [mixins](#core--mixins), except that they work at block level:

```crush
@fragment input-placeholder {
#(1)::-webkit-input-placeholder { color: #(0); }
#(1):-moz-placeholder { color: #(0); }
#(1)::placeholder { color: #(0); }
#(1).placeholder-state { color: #(0); }
}
@fragment input-placeholder(#777, textarea);
```

```css
textarea::-webkit-input-placeholder { color: #777; }
textarea:-moz-placeholder { color: #777; }
textarea::placeholder { color: #777; }
textarea.placeholder-state { color: #777; }
```
23 changes: 23 additions & 0 deletions docs/core/functions/a-adjust.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!--{
"title": "a-adjust()"
}-->

Manipulate the opacity (alpha channel) of a color value.

<code>a-adjust( *color*, *offset* )</code>

## Params

* *`color`* Any valid CSS color value
* *`offset`* The percentage to offset the color opacity

## Returns

The modified color value

```css
/* Reduce color opacity by 10% */
color: a-adjust( rgb(50,50,0) -10 );
```
Loading

0 comments on commit 2c88fd6

Please sign in to comment.