launchboxhq.com

tutsplus.com

Cory Simmons - Envato Tuts+ Profile

http://tutsplus.com/authors/cory-simmons

3D and Motion Graphics. 3D and Motion Graphics. 3D and Motion Graphics. 3D and Motion Graphics. 3D and Motion Graphics. 3D and Motion Graphics. Web-designer, Ashland, KY. Cory works at LaunchBox. He is the creator of Jeet. And also writes for Packt Publishing. He's done work for companies such as Scholastic, World Vision Charities, and TeeSpring. Power Up Your Portfolio With Bootstrap. CSS Animation in the Real World. Building Easy Responsive Layouts With Jeet. Quick Tip: Try Combining EMs and REMs.

stylus-lang.com

@block — Stylus

http://stylus-lang.com/docs/block.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. You can assign any block of code in Stylus to a variable and then call it, pass as an argument or reuse in any other way. To define a block, either write it down with an increased indent after an assign sign:. Foo = width: 20px height: 20px. Or use a curly braces syntax with. Foo = @block { width: 20px height: 20px }. If you would like to render this block anywhere, you could call this variable inside an interpolation, so.

stylus-lang.com

@extend — Stylus

http://stylus-lang.com/docs/extend.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. Directive is inspired by (and essentially the same as) the SASS Implementation. With few subtle differences. This feature significantly simplifies maintenance of semantic rulesets that inherit from other semantic rulesets. Although you can use mixins to achieve a similar effect, this can lead to duplicate CSS. A typical pattern is to define several classes as shown below, then combine them on the element such as warning message . Message, .warning,...

stylus-lang.com

@import and @require — Stylus

http://stylus-lang.com/docs/import.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. Stylus supports both literal @import. For CSS, as well as dynamic importing or requiring of other Stylus sheets. Any filename with the extension. Will become a literal. For example:. Render the literal CSS @import. Disclaimer: In all places the @import. Is used with Stylus sheets, the @require. Extension, it’s assumed to be a Stylus sheet (e.g.,. This array defaults to a single path, which is derived from the. So, if your filename is. Stylus supports b...

stylus-lang.com

Introspection API — Stylus

http://stylus-lang.com/docs/introspection.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. Stylus supports an introspection API. This allows mixins and functions to reflect relative to the caller, etc. Local variable is automatically assigned within function bodies. It contains the string. If the function was called at the root level, or. Indicating otherwise, and finally. If the invoked function expects a return value. In the following example, we define. Got { root: true; } body { foo: "not a mixin"; got: "a mixin"; }.

stylus-lang.com

@font-face — Stylus

http://stylus-lang.com/docs/font-face.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. At-rule expects as you would expect. Simply add a block of properties after it, like so:. Font-face font-family Geo font-style normal src url(fonts/geo sans light/GensansLight.ttf) .ingeo font-family Geo. Font-face { font-family: Geo; font-style: normal; src: url("fonts/geo sans light/GensansLight.ttf"); } .ingeo { font-family: Geo; }.

stylus-lang.com

Executable — Stylus

http://stylus-lang.com/docs/executable.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. Stylus ships with the. Executable for converting Stylus to CSS. Stylus - compress some.styl some.css. Try Stylus some in the terminal! Type below and press. Stylus body color red font 14px Arial, sans-serif. Also accepts files and directories. For example, a directory named. Will compile and output. Files in the same directory. The following will output to. Stylus css - out public/stylesheets. Or a few files:. Stylus one.styl two.styl. Stylus -i color ...

stylus-lang.com

CSS Style Syntax — Stylus

http://stylus-lang.com/docs/css-style.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. Stylus transparently supports a regular CSS-style syntax. This means you don’t need an alternative parser, or specify that a certain file uses a specific style. Below is a small style using the indented approach:. Since braces, colons, and semi-colons are optional, we could write this example just as we would with normal CSS:. While Stylus don’t support. Possible CSS-like syntax, if can understand even such code:. Border-radius() { -webkit-border-radiu...

stylus-lang.com

Built-in Functions — Stylus

http://stylus-lang.com/docs/bifs.html

CSS3 Extensions with Nib. Created by TJ Holowaychuk. Return the red component of the given. Or set the red component to the optional second. Red(#c00) / = 204 red(#000, 255) / = #f00. Return the green component of the given. Or set the green component to the optional second. Green(#0c0) / = 204 green(#000, 255) / = #0f0. Return the blue component of the given. Or set the blue component to the optional second. Blue(#00c) / = 204 blue(#000, 255) / = #00f. Return the alpha component of the given. Returns th...