forked from stylus/stylus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (50 loc) · 4.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html><html><head><title>Stylus</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="main.css"></head><body><div id="container"><h1> <a href="http://learnboost.github.com/stylus">Stylus</a></h1><p class="tagline"> <em class="expressive">Expressive, </em><em class="dynamic">dynamic, </em><em class="robust">robust </em><em class="css">CSS</em></p><ul id="menu"><li><a href="docs/selectors.html">Selectors</a></li><li><a href="docs/variables.html">Variables</a></li><li><a href="docs/interpolation.html">Interpolation</a></li><li><a href="docs/operators.html">Operators</a></li><li><a href="docs/mixins.html">Mixins</a></li><li><a href="docs/functions.html">Functions</a></li><li><a href="docs/kwargs.html">Keyword Arguments</a></li><li><a href="docs/bifs.html">Built-in Functions</a></li><li><a href="docs/vargs.html">Rest Params</a></li><li><a href="docs/comments.html">Comments</a></li><li><a href="docs/conditionals.html">Conditionals</a></li><li><a href="docs/iteration.html">Iteration</a></li><li><a href="docs/import.html">@import</a></li><li><a href="docs/media.html">@media</a></li><li><a href="docs/font-face.html">@font-face</a></li><li><a href="docs/keyframes.html">@keyframes</a></li><li><a href="docs/extend.html">@extend</a></li><li><a href="docs/functions.url.html">url()</a></li><li><a href="docs/literal.html">CSS Literal</a></li><li><a href="docs/css-style.html">CSS Style Syntax</a></li><li><a href="docs/escape.html">Char Escaping</a></li><li><a href="docs/executable.html">Executable</a></li><li><a href="docs/error-reporting.html">Error Reporting</a></li><li><a href="docs/middleware.html">Connect Middleware</a></li><li><a href="docs/introspection.html">Introspection API</a></li><li><a href="docs/js.html">JavaScript API</a></li><li><a href="http://github.com/visionmedia/nib">CSS3 Extensions with Nib</a></li><li><a href="try.html">Try Stylus Online!</a></li></ul><div id="ribbon"><a href="http://github.com/learnboost/stylus">Fork me on GitHub</a></div><div id="content"><div class="example"><h2>CSS needs a hero</h2><pre>body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}</pre></div><div class="example"><h2>What if we could omit braces?</h2><pre>body
font: 12px Helvetica, Arial, sans-serif;
a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;</pre></div><div class="example"><h2>How about semi-colons?</h2><pre>body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px</pre></div><div class="example"><h2>Why stop there, drop the colons</h2><pre>body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px</pre></div><div class="example"><h2>Keep things DRY</h2><pre>border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius(5px)</pre></div><div class="example"><h2>How about transparent mixins?</h2><pre>border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px</pre></div><div class="example"><h2>Create & Share</h2><pre>@import 'vendor'
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px</pre></div><div class="example"><h2>Even in-language functions!</h2><pre>sum(nums...)
sum = 0
sum += n for n in nums
sum(1 2 3 4)
// => 10</pre></div><div class="example"><h2>What if it were all optional?</h2><pre>fonts = helvetica, arial, sans-serif
body {
padding: 50px;
font: 14px/1.4 fonts;
}</pre></div><div class="example closing"><h2>Get styling with Stylus</h2><pre class="terminal">$ npm install stylus</pre><p>If you want an expressive css language for nodejs with these
features or the features listed below, head over to<a href="http://github.com/learnboost/stylus">GitHub </a>for more information.</p><div class="features"><h3>Features</h3><ul><li>Optional colons </li><li>Optional semi-colons </li><li>Optional commas </li><li>Optional braces </li><li>Variables </li><li>Interpolation</li><li>Mixins</li><li>Arithmetic</li><li>Type coercion</li><li>Dynamic importing</li><li>Conditionals</li><li>Iteration</li><li>Nested selectors</li><li>Parent referencing</li><li>Variable function calls</li><li>Lexical scoping</li><li>Built-in functions (over 25)</li><li>In-language functions</li><li>Optional compression</li><li>Optional image inlining</li><li>Stylus executable</li><li>Robust error reporting</li><li>Single-line and multi-line comments</li><li>CSS literal for those tricky times</li><li>Character escaping</li><li>TextMate bundle</li><li>and more!</li></ul></div></div></div></div></body></html>