stylus-source 0.23.0 → 0.24.0

data/vendor/docs/keyframes.md

@@ -1,122 +0,0 @@
-
-## @keyframes
-
- Stylus supports the `@keyframes` at-rule, which is converted to `@-webkit-keyframes` when compiled:
-
-
-     @keyframes pulse
-       0%
-         background-color red
-         opacity 1.0
-         -webkit-transform scale(1.0) rotate(0deg)
-       33%
-         background-color blue
-         opacity 0.75
-         -webkit-transform scale(1.1) rotate(-5deg)
-       67%
-         background-color green
-         opacity 0.5
-         -webkit-transform scale(1.1) rotate(5deg)
-       100%
-         background-color red
-         opacity 1.0
-         -webkit-transform scale(1.0) rotate(0deg)
-
-yielding:
-
-      @-webkit-keyframes pulse {
-        0% {
-          background-color: red;
-          opacity: 1;
-          -webkit-transform: scale(1) rotate(0deg);
-        }
-
-        33% {
-          background-color: blue;
-          opacity: 0.75;
-          -webkit-transform: scale(1.1) rotate(-5deg);
-        }
-
-        67% {
-          background-color: green;
-          opacity: 0.5;
-          -webkit-transform: scale(1.1) rotate(5deg);
-        }
-
-        100% {
-          background-color: red;
-          opacity: 1;
-          -webkit-transform: scale(1) rotate(0deg);
-        }
-
-      }
-
-## Expansion
-
- By using `@keyframes`, your rules are automatically expanded to the vendor prefixes defined by the `vendors` variable (default: `webkit moz official`). This means we can alter it at any time for the expansion to take effect immediately. 
- 
- For example, consider the following:
-
-    @keyframes foo {
-      from {
-        color: black
-      }
-      to {
-        color: white
-      }
-    }
-
-This expands to our two default vendors, and the official syntax:
-
-    @-moz-keyframes foo {
-      0% {
-        color: #000;
-      }
-
-      100% {
-        color: #fff;
-      }
-    }
-    @-webkit-keyframes foo {
-      0% {
-        color: #000;
-      }
-
-      100% {
-        color: #fff;
-      }
-    }
-    @keyframes foo {
-      0% {
-        color: #000;
-      }
-
-      100% {
-        color: #fff;
-      }
-    }
-
-If we wanted to limit to the official syntax only, simply alter `vendors`:
-
-    vendors = official
-
-    @keyframes foo {
-      from {
-        color: black
-      }
-      to {
-        color: white
-      }
-    }
-
-Yielding:
-
-    @keyframes foo {
-      0% {
-        color: #000;
-      }
-
-      100% {
-        color: #fff;
-      }
-    }

data/vendor/docs/kwargs.md

@@ -1,34 +0,0 @@
-
-## Keyword Arguments
-
- Stylus supports keyword arguments, or "kwargs". These allow you to reference arguents by their associated parameter name.
-
- The examples shown below are functionally equivalent. However, we can
- place keyword arguments anywhere within the list. The remaining arguments
- that are _not_ keyed will be applied to the parameters that have not
- been satisfied.
-
-      body {
-        color: rgba(255, 200, 100, 0.5);
-        color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);
-        color: rgba(alpha: 0.5, blue: 100, red: 255, 200);
-        color: rgba(alpha: 0.5, blue: 100, 255, 200);
-      }
-
- Yielding:
- 
-       body {
-         color: rgba(255,200,100,0.5);
-         color: rgba(255,200,100,0.5);
-         color: rgba(255,200,100,0.5);
-         color: rgba(255,200,100,0.5);
-       }
-
-
- To see what parameters a function or mixin accept, use the `p()` function:
- 
-    p(rgba)
-
- Yielding:
-
-    inspect: rgba(red, green, blue, alpha)

data/vendor/docs/literal.md

@@ -1,16 +0,0 @@
-## Literal CSS
-
- If for any reason Stylus cannot accommodate a specific need, you can always resort to literal CSS with `@css`:
- 
-     
-     @css {
-       body {
-         font: 14px;
-       }
-     }
-
-Compiling to:
-
-    body {
-      font: 14px;
-    }

data/vendor/docs/media.md

@@ -1,18 +0,0 @@
-
-## @media
-
- The `@media` works just as it does within regular CSS, but with Stylus's block notation:
-
-     @media print
-       #header
-       #footer
-         display none
-
-Yielding:
-
-      @media print {
-        #header,
-        #footer {
-          display: none;
-        }
-      }

data/vendor/docs/middleware.md

@@ -1,72 +0,0 @@
-
-## Connect Middleware
-
- Stylus ships with Connect middleware for auto-compiling Stylus sheets whenever they're modified.
-
-## stylus.middleware(options)
-
- Return Connect middleware with the given `options`.
-
-#### Options
-
-      `force`     When __true__ styles will always re-compile
-      `src`       Source directory used to find .styl files
-      `dest`      Destination directory used to output .css files
-                  when undefined defaults to `src`.
-      `compress`  Whether the output .css files should be compressed
-      `compile`   Custom compile function, accepting the arguments
-                  `(str, path)` returning the renderer.
-      `firebug`   Emits debug infos in the generated css that can
-                  be used by the FireStylus Firebug plugin
-      `linenos`   Emits comments in the generated css indicating
-                  the corresponding stylus line
-
-#### Examples
- 
- Here we set up the custom compile function so that we may
- alter the renderer by providing additional settings.
- 
- By default, the compile function simply sets the `filename`
- and renders the CSS.
- 
-        function compile(str, path) {
-          return stylus(str)
-            .import(__dirname + '/css/mixins/blueprint')
-            .import(__dirname + '/css/mixins/css3')
-            .set('filename', path)
-            .set('warn', true)
-            .set('compress', true);
-        }
- 
- Pass the middleware to Connect, grabbing `.styl` files from this directory
- and saving `.css` files to _./public_. Also supplying our custom `compile` function.
- 
- Following that, we have a `staticProvider` layer setup to serve the `.css`
- files generated by Stylus.
- 
-        var stylus = require('stylus');
- 
-        var server = connect.createServer(
-            stylus.middleware({
-                src: __dirname
-              , dest: __dirname + '/public'
-              , compile: compile
-            })
-          , connect.staticProvider(__dirname + '/public')
-        );
-
- When `force` is used, the styles will unconditionally be re-compiled. But even without this option, the Stylus middleware is smart enough to detect changes in `@import`ed files.
-
- For development purposes, you can enable the `firebug` option if you want to
- use the [FireStylus extension for Firebug](//github.com/LearnBoost/stylus/blob/master/docs/firebug.md) 
- and/or the `linenos` option to emit debug info in the generated CSS.
-
-        function compile(str, path) {
-          return stylus(str)
-            .import(__dirname + '/css/mixins/blueprint')
-            .import(__dirname + '/css/mixins/css3')
-            .set('filename', path)
-            .set('warn', true)
-            .set('firebug', true)
-            .set('linenos', true);
-        }

data/vendor/docs/mixins.md

@@ -1,138 +0,0 @@
-
-## Mixins
-
-Both mixins and functions are defined in the same manner, but they are applied in different ways. 
-
-For example, we have a `border-radius(n)` function defined below, which is invoked as a _mixin_ (i.e., invoked as a statement, rather than part of an expression).
-
-When `border-radius()` is invoked within a selector, the properties are expanded and copied into the selector.
-
-    border-radius(n)
-      -webkit-border-radius n
-      -moz-border-radius n
-      border-radius n
-
-    form input[type=button]
-      border-radius(5px)
-
-Compiles to:
-
-    form input[type=button] {
-      -webkit-border-radius: 5px;
-      -moz-border-radius: 5px;
-      border-radius: 5px;
-    }
-
-When using mixins you can omit the parentheses altogether, providing fantastic transparent vendor property support!
-
-    border-radius(n)
-      -webkit-border-radius n
-      -moz-border-radius n
-      border-radius n
-
-    form input[type=button]
-      border-radius 5px
-
-Note that the `border-radius` within our mixin is treated as a property, and not a recursive function invocation. 
-
-To take this further, we can utilize the automatic `arguments` local variable, containing the expression passed, allowing multiple values to be passed:
-
-    border-radius()
-      -webkit-border-radius arguments
-      -moz-border-radius arguments
-      border-radius arguments
-
-Now we can pass values like `border-radius 1px 2px / 3px 4px`!
-
-Another great use of this is the addition of transparent support for vendor-specifics—such as `opacity` support for IE:
-
-        support-for-ie ?= true
-
-        opacity(n)
-          opacity n
-          if support-for-ie
-            filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
-
-        #logo
-          &:hover
-            opacity 0.5
-
-Rendering:
-
-        #logo:hover {
-          opacity: 0.5;
-          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-        }
-
-### Parent References
-
- Mixins may utilize the parent reference character `&`, acting on the parent instead of further nesting. 
- 
- For example, let's say we want to create a `stripe(even, odd)` mixin for striping table rows. We provide both `even` and `odd` with default color values, and assign the `background-color` property on the row. Nested within the `tr` we use `&` to reference the `tr`, providing the `even` color.
- 
-     stripe(even = #fff, odd = #eee)
-       tr
-         background-color odd
-         &.even
-         &:nth-child(even)
-           background-color even
-
-We may then utilize the mixin as shown below:
-
-     table
-       stripe()
-       td
-         padding 4px 10px
-
-     table#users
-       stripe(#303030, #494848)
-       td
-         color white
-
-Alternatively, `stripe()` could be defined without parent references:
-
-    stripe(even = #fff, odd = #eee)
-      tr
-        background-color odd
-      tr.even
-      tr:nth-child(even)
-        background-color even
-
-If we wished, we could invoke `stripe()` as if it were a property:
-
-    stripe #fff #000
-
-### Mixing Mixins in Mixins
-
- Mixins can (of course!) utilize other mixins, building upon their own selectors and properties. 
- 
- For example, below we create `comma-list()` to inline (via `inline-list()`) and comma-separate an unordered list.
- 
- 
-     inline-list()
-       li
-         display inline
-
-     comma-list()
-       inline-list()
-       li
-         &:after
-           content ', '
-         &:last-child:after
-           content ''
-
-     ul
-       comma-list()
-
-Rendering:
-
-    ul li:after {
-      content: ", ";
-    }
-    ul li:last-child:after {
-      content: "";
-    }
-    ul li {
-      display: inline;
-    }
-