-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.src.html
executable file
·133 lines (121 loc) · 6.27 KB
/
index.src.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<div class="pro_header">
<a href="https://github.com/sourcejs/Source" class="pro_fork" title="Fork me on Github"></a>
<div class="source_col-main">
<div class="pro_header_content">
<div class="pro_title">
<h1 class="pro_title_main-tx">Source</h1>
</div>
<div class="pro_slogan">
Living Style Guide Platform
</div>
<div class="pro_descr">
The most advanced tool for documenting, testing and managing UI components achieving productive team work
</div>
</div>
<div class="pro_header_content">
<div class="pro_download">
<a href="/docs/base/#install" class="pro_button">Install and get Started</a>
<div class="pro_download_ft">
<a href="/docs/base/#examples" class="pro_download_a">Examples</a>
<a href="https://bit.ly/sourcejs-mailing" class="pro_download_a">Mailing list</a>
<a href="mailto:r@rhr.me" class="pro_download_a">Request consultation</a>
<a href="https://github.com/sourcejs/Source/releases" class="pro_download_a">Changelog</a>
</div>
</div>
</div>
</div>
<div class="pro_header_topright">
<a href="https://gitter.im/sourcejs/Source">
<img src="https://camo.githubusercontent.com/9e985aa8b0d2b4d4bf4066bd2f1eadc75f1f814c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769747465722d6a6f696e253230636861742d3164636537332e737667" />
</a>
<div class="pro_header-soc" id="pro_header-soc">
<div class="pro_header-soc_i pro_header-soc_tw">
<a href="https://twitter.com/sourceJS" class="twitter-follow-button" data-show-count="false">Follow @sourceJS</a>
</div>
</div>
<script> setTimeout(function(){document.getElementById('pro_header-soc').className='pro_header-soc __loaded';}, 1) </script>
</div>
</div>
<div class="pro_features">
<div class="source_col-main">
<h2 class="pro_h2">Features</h2>
<p class="pro_features_main">
SourceJS is a dynamic Style Guide platform. It allows to combine multiple project UI component libraries, based on any technologies.<br><br>
Following Living Style Guide driven development,<br> SourceJS allows to <strong>code new components directly in the Style Guide.</strong>
</p>
<ul class="pro_features-list">
<li class="pro_features-list_i">
<div class="pro_features-list_img">
<div class="pro_features-list_ic __tools"></div>
</div>
<div class="pro_features-list_tx">
Modular, unopinionated core.<br>
Easy to integrate aside existing codebase.
</div>
</li><li class="pro_features-list_i">
<div class="pro_features-list_img">
<div class="pro_features-list_ic __navi"></div>
</div>
<div class="pro_features-list_tx">
Convenient <a class="source_a_hl" href="/docs/data-nav/">navigation</a> through your components library.
</div>
</li><li class="pro_features-list_i">
<div class="pro_features-list_img">
<div class="pro_features-list_ic __spec"></div>
</div>
<div class="pro_features-list_tx">
Feature loaded <a class="source_a_hl" href="/docs/spec/">documentation pages.</a> Chose any doc syntax you want, or combine <a class="source_a_hl" href="/specs">them all.</a>
</div>
</li><li class="pro_features-list_i">
<div class="pro_features-list_img">
<div class="pro_features-list_ic __art"></div>
</div>
<div class="pro_features-list_tx">
Interactive style guides<br> for web designers<br> and rich <a class="source_a_hl" href="/docs/base/#plugins">plugin system.</a>
</div>
</li>
</ul>
</div>
</div>
<div class="pro_video">
<div class="pro_video_container">
<div class="source_col-main">
<h2 class="pro_h2">Watch a short intro</h2>
<div class="pro_video_iframe">
<iframe class="pro_video_iframe_cnt" src="https://www.youtube.com/embed/y4KHmX8vCc0?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="pro_how">
<div class="source_col-main">
<h2 class="pro_h2">How it works</h2>
<ul class="pro_how-list">
<li class="pro_how-list_i">
<div class="pro_how-list_img">
<div class="pro_how-list_ic __files"></div>
</div>
<div class="pro_how-list_tx">
Link your codebase to SourceJS Specs catalog.<br> Prepare separate folders for each component, containing all technologies (template, styles, JS).
</div>
</li><li class="pro_how-list_i">
<div class="pro_how-list_img">
<div class="pro_how-list_ic __node"></div>
</div>
<div class="pro_how-list_tx">
Describe your components using special .src templates, Markdown, DSS, Jade or other technologies.<br> SourceJS will parse your catalogs and component definitions.
</div>
</li><li class="pro_how-list_i">
<div class="pro_how-list_img">
<div class="pro_how-list_ic __spec"></div>
</div>
<div class="pro_how-list_tx">
<strong>Get feature loaded <a href="/docs/spec" class="source_a_o">documentation pages</a> directly in your favorite browser. Extend and customize pages with <a href="/docs/base/#plugins" class="source_a_o">custom plugins</a> and tools.</strong>
</div>
</li>
</ul>
<div class="pro_how_more">
Follow simple <a href="/docs/base/#install" class="source_a_o">setup instructions</a> and start organizing your UI component library.
</div>
</div>
</div>