Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd0c6cdb

Browse files
committed
Merge branch 'gh-pages-dev' into gh-pages
2 parentsc2a3613 +2c5275a commitd0c6cdb

File tree

49 files changed

+2081
-6027
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2081
-6027
lines changed

‎_includes/preview-and-snippet.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
{% endcomment %}
55

66
{% if snippet %}
7-
<divclass="ds-preview">
8-
{{ snippet }}
9-
</div>
7+
<divclass="ds-preview">{{ snippet }}</div>
108
```html{{ snippet }}```
119
{% endif %}
1210

‎components/alerts/index.md‎

Lines changed: 29 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ parent: "Components"
44
type:"UI Component"
55
title:"Inline Alerts"
66
shortName:"component__alerts"
7-
intro:"Inline Alerts help to provide inline, page-level messaging to the User. These may be as the result of a user's specific actionsorunsolicited messages."
7+
intro:"Display contextual assistanceorresponse."
88
jump_menu:true
99
custom_js:"inline-alert.js"
1010
---
@@ -24,116 +24,82 @@ Variations are styled with `class="fsa-alert fsa-alert--[type]"`.
2424

2525
###Success
2626

27-
<divclass="ds-preview">
28-
<divclass="fsa-alert fsa-alert--success"role="alert">
29-
<div class="fsa-alert__body">
30-
<h3 class="fsa-alert__heading">Optional success title</h3>
31-
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
32-
</div>
33-
</div>
34-
</div>
35-
```html
27+
{% capture snippet %}
3628
<divclass="fsa-alert fsa-alert--success"role="alert">
3729
<divclass="fsa-alert__body">
3830
<h3 class="fsa-alert__heading">Optional success title</h3>
3931
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
4032
</div>
4133
</div>
42-
```
34+
{% endcapture %}
35+
36+
{% include preview-and-snippet.html %}
4337

4438
###Warning
4539

46-
<divclass="ds-preview">
47-
<divclass="fsa-alert fsa-alert--warning"role="alert">
48-
<div class="fsa-alert__body">
49-
<h3 class="fsa-alert__heading">Optional warning title</h3>
50-
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
51-
</div>
52-
</div>
53-
</div>
54-
```html
40+
{% capture snippet %}
5541
<divclass="fsa-alert fsa-alert--warning"role="alert">
5642
<divclass="fsa-alert__body">
5743
<h3 class="fsa-alert__heading">Optional warning title</h3>
5844
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
5945
</div>
6046
</div>
61-
```
47+
{% endcapture %}
48+
49+
{% include preview-and-snippet.html %}
6250

6351
###Error
6452

65-
<divclass="ds-preview">
66-
<divclass="fsa-alert fsa-alert--error"role="alert">
67-
<div class="fsa-alert__body">
68-
<h3 class="fsa-alert__heading">Optional error title</h3>
69-
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
70-
</div>
71-
</div>
72-
</div>
73-
```html
53+
{% capture snippet %}
7454
<divclass="fsa-alert fsa-alert--error"role="alert">
7555
<divclass="fsa-alert__body">
7656
<h3 class="fsa-alert__heading">Optional error title</h3>
7757
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
7858
</div>
7959
</div>
80-
```
60+
{% endcapture %}
61+
62+
{% include preview-and-snippet.html %}
8163

8264
###Info
8365

84-
<divclass="ds-preview">
85-
<divclass="fsa-alert fsa-alert--info"role="alert">
86-
<div class="fsa-alert__body">
87-
<h3 class="fsa-alert__heading">Optional information title</h3>
88-
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
89-
</div>
90-
</div>
91-
</div>
92-
```html
66+
{% capture snippet %}
9367
<divclass="fsa-alert fsa-alert--info"role="alert">
9468
<divclass="fsa-alert__body">
9569
<h3 class="fsa-alert__heading">Optional information title</h3>
9670
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
9771
</div>
9872
</div>
99-
```
73+
{% endcapture %}
74+
75+
{% include preview-and-snippet.html %}
10076

10177
###No icon
10278

103-
<divclass="ds-preview">
104-
<divclass="fsa-alert fsa-alert--success fsa-alert--no-icon"role="alert">
105-
<div class="fsa-alert__body">
106-
<h3 class="fsa-alert__heading">Optional [type] title</h3>
107-
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
108-
</div>
79+
{% capture snippet %}
80+
<divclass="fsa-alert fsa-alert--success fsa-alert--no-icon"role="alert">
81+
<divclass="fsa-alert__body">
82+
<h3 class="fsa-alert__heading">Optional [type] title</h3>
83+
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
10984
</div>
11085
</div>
111-
```html
112-
<divclass="fsa-alert fsa-alert--[type] fsa-alert--no-icon"role="alert">
113-
....
114-
</div>
115-
```
86+
{% endcapture %}
87+
88+
{% include preview-and-snippet.html %}
11689

11790
###Dismissable
11891

119-
<divclass="ds-preview">
120-
<divclass="fsa-alert fsa-alert--success"role="alert">
121-
<button class="fsa-alert__close" data-behavior="alert-dismiss" type="button" title="Dismiss this message" aria-label="Dismiss this message"></button>
122-
<div class="fsa-alert__body">
123-
<h3 class="fsa-alert__heading">Optional success title</h3>
124-
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing assumenda harum accusamus nemo non iste quia. Nihil ab tenetur ipsa dolore nisi qui molestias assumenda a perferendis maxime sed do eiusmod.</p>
125-
</div>
126-
</div>
127-
</div>
128-
```html
92+
{% capture snippet %}
12993
<divclass="fsa-alert fsa-alert--success"role="alert">
13094
<buttonclass="fsa-alert__close"data-behavior="alert-dismiss"type="button"title="Dismiss this message"aria-label="Dismiss this message"></button>
13195
<divclass="fsa-alert__body">
13296
<h3 class="fsa-alert__heading">Optional success title</h3>
13397
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing assumenda harum accusamus nemo non iste quia. Nihil ab tenetur ipsa dolore nisi qui molestias assumenda a perferendis maxime sed do eiusmod.</p>
13498
</div>
13599
</div>
136-
```
100+
{% endcapture %}
101+
102+
{% include preview-and-snippet.html %}
137103

138104
##Usage
139105

‎components/badges/index.md‎

Lines changed: 39 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ parent: "Components"
44
type:"UI Component"
55
title:"Badges"
66
shortName:"component__badges"
7-
intro:"Badges are used as indicators of an update or action items that have yet to be completed."
7+
intro:"Succinctly display quantified information."
88
jump_menu:true
9+
relatedItems:
10+
-"Timeline"
911
---
1012

1113
<divclass="ds-preview">
@@ -35,71 +37,55 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.
3537

3638
###Default
3739

38-
<divclass="ds-preview">
39-
<spanclass="fsa-badge">1</span>
40-
</div>
41-
```html
40+
{% capture snippet %}
4241
<spanclass="fsa-badge">1</span>
43-
```
42+
{% endcapture %}
43+
44+
{% include preview-and-snippet.html %}
4445

4546
###Neutral
4647

47-
<divclass="ds-preview">
48-
<spanclass="fsa-badge fsa-badge--neutral">8</span>
49-
</div>
50-
```html
48+
{% capture snippet %}
5149
<spanclass="fsa-badge fsa-badge--neutral">8</span>
52-
```
50+
{% endcapture %}
51+
52+
{% include preview-and-snippet.html %}
5353

5454
###General
5555

56-
<divclass="ds-preview">
57-
<spanclass="fsa-badge fsa-badge--general">11</span>
58-
</div>
59-
```html
56+
{% capture snippet %}
6057
<spanclass="fsa-badge fsa-badge--general">11</span>
61-
```
58+
{% endcapture %}
59+
60+
{% include preview-and-snippet.html %}
6261

6362
###Alert
6463

65-
<divclass="ds-preview">
66-
<spanclass="fsa-badge fsa-badge--alert">11</span> Bugs Found
67-
</div>
68-
```html
64+
{% capture snippet %}
6965
<spanclass="fsa-badge fsa-badge--alert">11</span> Bugs Found
70-
```
66+
{% endcapture %}
67+
68+
{% include preview-and-snippet.html %}
7169

7270
###Warning
7371

74-
<divclass="ds-preview">
75-
<spanclass="fsa-badge fsa-badge--warning">22</span> Issues Recorded
76-
</div>
77-
```html
72+
{% capture snippet %}
7873
<spanclass="fsa-badge fsa-badge--warning">22</span> Issues Recorded
79-
```
74+
{% endcapture %}
75+
76+
{% include preview-and-snippet.html %}
8077

8178
###Success
8279

83-
<divclass="ds-preview">
84-
<spanclass="fsa-badge fsa-badge--success">99+</span> Feature Updates
85-
</div>
86-
```html
80+
{% capture snippet %}
8781
<spanclass="fsa-badge fsa-badge--success">99+</span> Feature Updates
88-
```
82+
{% endcapture %}
83+
84+
{% include preview-and-snippet.html %}
8985

9086
###Large
9187

92-
<divclass="ds-preview">
93-
<ulclass="fsa-level">
94-
<li><span class="fsa-badge fsa-badge--large">1</span></li>
95-
<li><span class="fsa-badge fsa-badge--large fsa-badge--neutral">8</span></li>
96-
<li><span class="fsa-badge fsa-badge--large fsa-badge--general">8</span></li>
97-
<li><span class="fsa-badge fsa-badge--large fsa-badge--alert">11</span></li>
98-
<li><span class="fsa-badge fsa-badge--large fsa-badge--warning">22</span></li>
99-
<li><span class="fsa-badge fsa-badge--large fsa-badge--success">99+</span></li>
100-
</ul>
101-
</div>
102-
```html
88+
{% capture snippet %}
10389
<ulclass="fsa-level">
10490
<li><spanclass="fsa-badge fsa-badge--large">1</span></li>
10591
<li><spanclass="fsa-badge fsa-badge--large fsa-badge--neutral">8</span></li>
@@ -108,21 +94,13 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.
10894
<li><spanclass="fsa-badge fsa-badge--large fsa-badge--warning">22</span></li>
10995
<li><spanclass="fsa-badge fsa-badge--large fsa-badge--success">99+</span></li>
11096
</ul>
111-
```
97+
{% endcapture %}
98+
99+
{% include preview-and-snippet.html %}
112100

113101
###Extra Large
114102

115-
<divclass="ds-preview">
116-
<ulclass="fsa-level">
117-
<li><span class="fsa-badge fsa-badge--extra-large">1</span></li>
118-
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--neutral">8</span></li>
119-
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--general">8</span></li>
120-
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--alert">11</span></li>
121-
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--warning">22</span></li>
122-
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--success">99+</span></li>
123-
</ul>
124-
</div>
125-
```html
103+
{% capture snippet %}
126104
<ulclass="fsa-level">
127105
<li><spanclass="fsa-badge fsa-badge--extra-large">1</span></li>
128106
<li><spanclass="fsa-badge fsa-badge--extra-large fsa-badge--neutral">8</span></li>
@@ -131,26 +109,23 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.
131109
<li><spanclass="fsa-badge fsa-badge--extra-large fsa-badge--warning">22</span></li>
132110
<li><spanclass="fsa-badge fsa-badge--extra-large fsa-badge--success">99+</span></li>
133111
</ul>
134-
```
112+
{% endcapture %}
113+
114+
{% include preview-and-snippet.html %}
135115

136116
###Actionable
137117

138118
Badge styles can be applied to nearly any HTML element, defaulting to non-actionable`<span>` elements as shown above. Below are`<a>` and`<button>` elements:
139119

140-
<divclass="ds-preview">
141-
<ulclass="fsa-level">
142-
<li><a class="fsa-badge" href="link.html">A</a> Anchor</li>
143-
<li><button class="fsa-badge" type="button">B</button> Button</li>
144-
<li><button class="fsa-badge" type="button" disabled="disabled">Z</button> Disabled</li>
145-
</ul>
146-
</div>
147-
```html
120+
{% capture snippet %}
148121
<ulclass="fsa-level">
149122
<li><aclass="fsa-badge"href="link.html">A</a> Anchor</li>
150123
<li><buttonclass="fsa-badge"type="button">B</button> Button</li>
151124
<li><buttonclass="fsa-badge"type="button"disabled="disabled">Z</button> Disabled</li>
152125
</ul>
153-
```
126+
{% endcapture %}
127+
128+
{% include preview-and-snippet.html %}
154129

155130
###Example: Dark Background
156131

‎components/box/index.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,17 @@ parent: "Components"
44
type:"UI Component"
55
title:"Box"
66
shortName:"component__box"
7-
intro:""
7+
intro:"Organize a set of content in a standalone object."
88
jump_menu:true
99
---
1010

11-
<divclass="ds-preview">
12-
<divclass="fsa-box">
13-
<p>Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.</p>
14-
</div>
11+
{% capture snippet %}
12+
<divclass="fsa-box">
13+
<p>Deserunt excepturi rem asperiores. Sapiente aliquid, hic natus.</p>
1514
</div>
15+
{% endcapture %}
1616

17-
```html
18-
<elementclass="fsa-box">...</element>
19-
```
17+
{% include preview-and-snippet.html %}
2018

2119
##Variations
2220

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp