Skip to content

Commit 0b37423

Browse files
jlukicjlukic
committed
Finish new docs
1 parent 22c6791 commit 0b37423

8 files changed

Lines changed: 335 additions & 150 deletions

File tree

‎server/documents/elements/loader.html.eco‎

Lines changed: 0 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -32,31 +32,6 @@ themes : ['Default', 'Duo', 'Pulsar']
3232
</div>
3333
</div>
3434

35-
<div class="example" data-class="image header, paragraph, line, content, loader, image">
36-
<h4 class="ui header">
37-
Content Loader
38-
<div class="ui teal horizontal label">New in 2.4.0</div>
39-
</h4>
40-
<p>A loader can indicate content will soon appear inside a container.</p>
41-
<div class="ui ignored info message">
42-
Content loaders can include <code>paragraph</code>, <code>header</code>, <code>image header</code> and <code>image</code> to let you format the loaders to emulate the content being loaded.
43-
</div>
44-
<div class="ui active content loader">
45-
<div class="image header">
46-
<div class="line"></div>
47-
<div class="line"></div>
48-
</div>
49-
<div class="paragraph">
50-
<div class="line"></div>
51-
<div class="line"></div>
52-
<div class="line"></div>
53-
</div>
54-
</div>
55-
</div>
56-
<div class="another content example">
57-
<%- @partial('examples/content-loader') %>
58-
</div>
59-
6035
<div class="example">
6136
<h4 class="ui header">Text Loader</h4>
6237
<p>A loader can contain text</p>
@@ -77,54 +52,6 @@ themes : ['Default', 'Duo', 'Pulsar']
7752
</div>
7853

7954

80-
<h2 class="ui dividing header">Content</h2>
81-
<div class="example">
82-
<h4 class="ui header">Headers</h4>
83-
<p>A content loader can contain a header</p>
84-
<div class="ui active content loader">
85-
<div class="image header">
86-
<div class="line"></div>
87-
<div class="line"></div>
88-
</div>
89-
</div>
90-
</div>
91-
<div class="another example">
92-
<div class="ui active content loader">
93-
<div class="header">
94-
<div class="line"></div>
95-
<div class="line"></div>
96-
</div>
97-
</div>
98-
</div>
99-
<div class="example">
100-
<h4 class="ui header">Paragraph</h4>
101-
<p>A content loader can contain a paragraph</p>
102-
<div class="ui active content loader">
103-
<div class="paragraph">
104-
<div class="line"></div>
105-
<div class="line"></div>
106-
<div class="line"></div>
107-
<div class="line"></div>
108-
<div class="line"></div>
109-
</div>
110-
<div class="paragraph">
111-
<div class="line"></div>
112-
<div class="line"></div>
113-
<div class="line"></div>
114-
</div>
115-
</div>
116-
</div>
117-
<div class="example">
118-
<h4 class="ui header">Image</h4>
119-
<p>A content loader can contain an image</p>
120-
<div class="ui ignored info message">
121-
For image loaders you can use <code>square</code> (1:1) or <code>rectangular</code> (4:3) to embed an aspect ratio into the image loader, or manually specify a width and height using your site's css.
122-
</div>
123-
<div class="ui active content loader" style="width:150px;height:150px;">
124-
<div class="image"></div>
125-
</div>
126-
</div>
127-
12855
<h2 class="ui dividing header">States</h2>
12956

13057
<div class="example">
@@ -249,21 +176,6 @@ themes : ['Default', 'Duo', 'Pulsar']
249176
<br>
250177
</div>
251178
</div>
252-
<div class="another example">
253-
<div class="ui inverted segment">
254-
<div class="ui active inverted content loader">
255-
<div class="image header">
256-
<div class="line"></div>
257-
<div class="line"></div>
258-
</div>
259-
<div class="paragraph">
260-
<div class="line"></div>
261-
<div class="line"></div>
262-
<div class="line"></div>
263-
</div>
264-
</div>
265-
</div>
266-
</div>
267179
<div class="another example" data-class="inverted dimmer">
268180
<div class="ui ignored info message">Loaders will automatically be inverted inside <code>inverted dimmer</code></div>
269181
<div class="ui segment">

‎server/documents/elements/placeholder.html.eco‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
---
2+
layout : 'default'
3+
css : 'loader'
4+
standalone : true
5+
6+
element : 'placeholder'
7+
elementType : 'element'
8+
9+
title : 'Placeholder'
10+
description : 'A placeholder is used to reserve splace for content that soon will appear in a layout'
11+
type : 'UI Element'
12+
13+
themes : ['Default']
14+
---
15+
16+
<%- @partial('header') %>
17+
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/loader.less" />
18+
<script src="/javascript/loader.js"></script>
19+
20+
<div class="main ui container">
21+
22+
<h2 class="ui dividing header">Types</h2>
23+
24+
<div class="example" data-class="image header, paragraph, line, content, loader, image">
25+
<h4 class="ui header">
26+
Placeholder
27+
<div class="ui teal horizontal label">New in 2.4.0</div>
28+
</h4>
29+
<p>A placeholder is used to reserve space for content that soon will appear in a layout.</p>
30+
<div class="ui ignored info message">
31+
Placeholders can include <code>paragraph</code>, <code>header</code>, <code>image header</code> and <code>image</code> to let you format the loaders to emulate the content being loaded.
32+
</div>
33+
<div class="ui placeholder">
34+
<div class="image header">
35+
<div class="line"></div>
36+
<div class="line"></div>
37+
</div>
38+
<div class="paragraph">
39+
<div class="line"></div>
40+
<div class="line"></div>
41+
<div class="line"></div>
42+
<div class="line"></div>
43+
<div class="line"></div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="another example">
48+
<div class="ui three column stackable grid">
49+
<div class="column">
50+
<div class="ui raised segment">
51+
<div class="ui placeholder">
52+
<div class="image header">
53+
<div class="line"></div>
54+
<div class="line"></div>
55+
</div>
56+
<div class="paragraph">
57+
<div class="medium line"></div>
58+
<div class="short line"></div>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
<div class="column">
64+
<div class="ui raised segment">
65+
<div class="ui placeholder">
66+
<div class="image header">
67+
<div class="line"></div>
68+
<div class="line"></div>
69+
</div>
70+
<div class="paragraph">
71+
<div class="medium line"></div>
72+
<div class="short line"></div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
<div class="column">
78+
<div class="ui raised segment">
79+
<div class="ui placeholder">
80+
<div class="image header">
81+
<div class="line"></div>
82+
<div class="line"></div>
83+
</div>
84+
<div class="paragraph">
85+
<div class="medium line"></div>
86+
<div class="short line"></div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
<div class="another content example">
94+
<%- @partial('examples/content-loader') %>
95+
</div>
96+
97+
98+
<h2 class="ui dividing header">Content</h2>
99+
<div class="example">
100+
<h4 class="ui header">Lines</h4>
101+
<p>A placeholder can contain have lines of text</p>
102+
<div class="ui ignored info message">By default, repeated lines will appear varied in width. However, it may be useful to specify an exact length to make it match up with content more effectively</div>
103+
<div class="ui placeholder">
104+
<div class="line"></div>
105+
<div class="line"></div>
106+
<div class="line"></div>
107+
<div class="line"></div>
108+
<div class="line"></div>
109+
</div>
110+
</div>
111+
<div class="example">
112+
<h4 class="ui header">Headers</h4>
113+
<p>A placeholder can contain a header</p>
114+
<div class="ui ignored info message">
115+
Header content will have a slightly larger block size from paragraph
116+
</div>
117+
<div class="ui placeholder">
118+
<div class="image header">
119+
<div class="line"></div>
120+
<div class="line"></div>
121+
</div>
122+
</div>
123+
</div>
124+
<div class="another example">
125+
<div class="ui placeholder">
126+
<div class="header">
127+
<div class="line"></div>
128+
<div class="line"></div>
129+
</div>
130+
</div>
131+
</div>
132+
<div class="example">
133+
<h4 class="ui header">Paragraph</h4>
134+
<p>A placeholder can contain a paragraph</p>
135+
<div class="ui ignored info message">Paragraphs are used to group lines together.</div>
136+
<div class="ui placeholder">
137+
<div class="paragraph">
138+
<div class="line"></div>
139+
<div class="line"></div>
140+
<div class="line"></div>
141+
<div class="line"></div>
142+
<div class="line"></div>
143+
</div>
144+
<div class="paragraph">
145+
<div class="line"></div>
146+
<div class="line"></div>
147+
<div class="line"></div>
148+
</div>
149+
</div>
150+
</div>
151+
<div class="example">
152+
<h4 class="ui header" data-class="image">Image</h4>
153+
<p>A placeholder can contain an image</p>
154+
<div class="ui placeholder" style="width:150px;height:150px;">
155+
<div class="image"></div>
156+
</div>
157+
</div>
158+
<div class="another example" data-class="square">
159+
<div class="ui ignored info message">
160+
Using <code>square</code> (1:1) or <code>rectangular</code> (4:3) will embed an aspect ratio into the image loader so that they modify size correctly with responsive styles.
161+
</div>
162+
<div class="ui three cards">
163+
<div class="ui card">
164+
<div class="content">
165+
<div class="ui placeholder">
166+
<div class="square image"></div>
167+
</div>
168+
</div>
169+
</div>
170+
<div class="ui card">
171+
<div class="content">
172+
<div class="ui placeholder">
173+
<div class="square image"></div>
174+
</div>
175+
</div>
176+
</div>
177+
<div class="ui card">
178+
<div class="content">
179+
<div class="ui placeholder">
180+
<div class="square image"></div>
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
<div class="another example" data-class="rectangular">
187+
<div class="ui three cards">
188+
<div class="ui card">
189+
<div class="content">
190+
<div class="ui placeholder">
191+
<div class="rectangular image"></div>
192+
</div>
193+
</div>
194+
</div>
195+
<div class="ui card">
196+
<div class="content">
197+
<div class="ui placeholder">
198+
<div class="rectangular image"></div>
199+
</div>
200+
</div>
201+
</div>
202+
<div class="ui card">
203+
<div class="content">
204+
<div class="ui placeholder">
205+
<div class="rectangular image"></div>
206+
</div>
207+
</div>
208+
</div>
209+
</div>
210+
</div>
211+
<h2 class="ui dividing header">Variations</h2>
212+
213+
<div class="example">
214+
<h4 class="ui header">Line Length</h4>
215+
<p>A line can specify how long its contents should appear</p>
216+
<div class="ui placeholder">
217+
<div class="full line"></div>
218+
<div class="very long line"></div>
219+
<div class="long line"></div>
220+
<div class="medium line"></div>
221+
<div class="short line"></div>
222+
<div class="very short line"></div>
223+
</div>
224+
</div>
225+
<div class="another example">
226+
227+
<div class="ui placeholder">
228+
<div class="image header">
229+
<div class="medium line"></div>
230+
<div class="full line"></div>
231+
</div>
232+
<div class="paragraph">
233+
<div class="full line"></div>
234+
<div class="medium line"></div>
235+
</div>
236+
</div>
237+
</div>
238+
239+
<div class="example">
240+
<h4 class="ui header">Fluid</h4>
241+
<p>A fluid placeholder takes up the width of its container</p>
242+
<div class="ui fluid placeholder">
243+
<div class="image header">
244+
<div class="line"></div>
245+
<div class="line"></div>
246+
</div>
247+
<div class="paragraph">
248+
<div class="line"></div>
249+
<div class="line"></div>
250+
<div class="line"></div>
251+
</div>
252+
</div>
253+
</div>
254+
<div class="example">
255+
<h4 class="ui header">Inverted</h4>
256+
<p>A placeholder can have their colors inverted.</p>
257+
<div class="ui inverted segment">
258+
<div class="ui active inverted placeholder">
259+
<div class="image header">
260+
<div class="line"></div>
261+
<div class="line"></div>
262+
</div>
263+
<div class="paragraph">
264+
<div class="line"></div>
265+
<div class="line"></div>
266+
<div class="line"></div>
267+
</div>
268+
</div>
269+
</div>
270+
</div>
271+
</div>

‎server/documents/elements/segment.html.eco‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ themes : ['default', 'GitHub']
2828
</div>
2929
<div class="example">
3030
<h4 class="ui header">
31-
Placeholder
31+
Placeholder Segment
3232
<div class="ui teal horizontal label">New in 2.4.0</div>
3333
</h4>
34-
<p>A segment may be used to explain the purpose of empty space.</p>
34+
<p>A segment can be used to reserve space for conditionally displayed content.</p>
3535
<div class="ui placeholder segment">
3636
<div class="ui icon header">
3737
<i class="dont icon"></i>

0 commit comments

Comments
 (0)