Skip to content

Commit cf91c1f

Browse files
cjcenizalcjcenizal
committed
Split examples into individual HTML files.
1 parent 6f5b31c commit cf91c1f

File tree

13 files changed

+316
-127
lines changed

13 files changed

+316
-127
lines changed

‎dist/index.html‎

Lines changed: 116 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>Flexbox Patterns Demo Page</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700|Ubuntu+Mono" rel="stylesheet" type="text/css">
6+
<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
77
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
88
<link href="styles.css" rel="stylesheet" type="text/css">
99
<style>
@@ -13,164 +13,154 @@
1313
font-size: 14px;
1414
line-height: 1.5;
1515
}
16-
16+
1717
.demo {
1818
max-width: 500px;
1919
margin-bottom: 40px;
2020
}
21+
2122
</style>
2223
</head>
2324
<body>
24-
25-
<!-- Card group -->
26-
<div class="demo">
27-
<div class="cardGroup">
28-
<div class="card cardGroup__card">
29-
<div class="card__description cardGroup__cardDescription">
30-
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
31-
<div class="card__descriptionText">Trial</div>
32-
</div>
33-
<div class="card__price">Free!</div>
34-
</div>
35-
<div class="card cardGroup__card">
36-
<div class="card__description cardGroup__cardDescription">
37-
<div class="icon fa fa-trophy card__descriptionIcon"></div>
38-
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
39-
</div>
40-
<div class="card__price">$10.00</div>
41-
</div>
42-
<div class="card cardGroup__card">
43-
<div class="card__description cardGroup__cardDescription">
44-
<div class="icon fa fa-bolt card__descriptionIcon"></div>
45-
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
46-
</div>
47-
<div class="card__price">$6,000.00</div>
48-
</div>
25+
<!-- Card group-->
26+
<div class="demo"><div class="cardGroup">
27+
<div class="card cardGroup__card">
28+
<div class="card__description cardGroup__cardDescription">
29+
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
30+
<div class="card__descriptionText">Trial</div>
4931
</div>
32+
<div class="card__price">Free!</div>
5033
</div>
51-
52-
<!-- Card -->
53-
<div class="demo">
54-
<div class="card card--fixedWidth">
55-
<div class="card__description">
56-
<div class="icon fa fa-flask card__descriptionIcon"></div>
57-
<div class="card__descriptionText">Science potion</div>
58-
</div>
59-
<div class="card__price">Costs $5</div>
34+
<div class="card cardGroup__card">
35+
<div class="card__description cardGroup__cardDescription">
36+
<div class="icon fa fa-trophy card__descriptionIcon"></div>
37+
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
6038
</div>
39+
<div class="card__price">$10.00</div>
6140
</div>
62-
63-
<!-- Centered icon -->
64-
<div class="demo">
65-
<div class="centeredIcon">
66-
<div class="icon fa fa-phone"></div>
41+
<div class="card cardGroup__card">
42+
<div class="card__description cardGroup__cardDescription">
43+
<div class="icon fa fa-bolt card__descriptionIcon"></div>
44+
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
6745
</div>
46+
<div class="card__price">$6,000.00</div>
6847
</div>
48+
</div>
6949

70-
<!-- Centered prompt -->
71-
<div class="demo">
72-
<div class="centeredPrompt">
73-
<div class="centeredPrompt__item centeredPromptIcon">
74-
<div class="icon fa fa-smile-o"></div>
75-
</div>
76-
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
77-
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div>
78-
<div class="centeredPrompt__item button">Begin tour</div>
7950
</div>
51+
<!-- Card-->
52+
<div class="demo"><div class="card card--fixedWidth">
53+
<div class="card__description">
54+
<div class="icon fa fa-flask card__descriptionIcon"></div>
55+
<div class="card__descriptionText">Science potion</div>
8056
</div>
57+
<div class="card__price">Costs $5</div>
58+
</div>
8159

82-
<!-- Feature list -->
83-
<div class="demo">
84-
<div class="featureListItem">
85-
<div class="featureListItem__icon">
86-
<div class="icon fa fa-calendar"></div>
87-
</div>
88-
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
89-
</div>
90-
<div class="featureListItem featureListItem--reverse">
91-
<div class="featureListItem__icon">
92-
<div class="icon fa fa-dashboard"></div>
93-
</div>
94-
<div class="featureListItem__description">Our dashboard gives you a bird&rsquo;s-eye-view-at-a-glance-on-the-go.</div>
9560
</div>
96-
<div class="featureListItem">
97-
<div class="featureListItem__icon">
98-
<div class="icon fa fa-envelope"></div>
99-
</div>
100-
<div class="featureListItem__description">You can get notified by email or SMS.</div>
61+
<!-- Centered icon-->
62+
<div class="demo"><div class="centeredIcon">
63+
<div class="icon fa fa-phone"></div>
64+
</div>
65+
10166
</div>
67+
<!-- Centered prompt-->
68+
<div class="demo"><div class="centeredPrompt">
69+
<div class="centeredPrompt__item centeredPromptIcon">
70+
<div class="icon fa fa-smile-o"></div>
10271
</div>
72+
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
73+
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div>
74+
<div class="centeredPrompt__item button">Begin tour</div>
75+
</div>
10376

104-
<!-- Form footer -->
105-
<div class="demo">
106-
<div class="formFooter">
107-
<!-- This section gets pushed to the left side-->
108-
<div class="formFooter__section">
109-
<div class="formFooter__item formFooterFeedback">
110-
<div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
111-
</div>
112-
</div>
113-
<!-- This section gets pushed to the right side-->
114-
<div class="formFooter__section">
115-
<div class="formFooter__item button button--clear">Reset</div>
116-
<div class="formFooter__item button">Save</div>
117-
</div>
11877
</div>
78+
<!-- Feature list-->
79+
<div class="demo"><div class="featureListItem">
80+
<div class="featureListItem__icon">
81+
<div class="icon fa fa-calendar"></div>
82+
</div>
83+
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
84+
</div>
85+
<div class="featureListItem featureListItem--reverse">
86+
<div class="featureListItem__icon">
87+
<div class="icon fa fa-dashboard"></div>
11988
</div>
89+
<div class="featureListItem__description">Our dashboard gives you a bird&rsquo;s-eye-view-at-a-glance-on-the-go.</div>
90+
</div>
91+
<div class="featureListItem">
92+
<div class="featureListItem__icon">
93+
<div class="icon fa fa-envelope"></div>
94+
</div>
95+
<div class="featureListItem__description">You can get notified by email or SMS.</div>
96+
</div>
12097

121-
<!-- Side bar -->
122-
<div class="demo">
123-
<div class="sideBar">
124-
<!-- This section gets pushed to the top-->
125-
<div class="sideBar__section">
126-
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
127-
<div class="sideBar__item">Contacts</div>
128-
<div class="sideBar__item">Account</div>
129-
</div>
130-
<!-- This section gets pushed to the bottom-->
131-
<div class="sideBar__section">
132-
<div class="sideBar__item">Legal</div>
133-
</div>
98+
</div>
99+
<!-- Form footer-->
100+
<div class="demo"><div class="formFooter">
101+
<!-- This section gets pushed to the left side-->
102+
<div class="formFooter__section">
103+
<div class="formFooter__item formFooterFeedback">
104+
<div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
134105
</div>
135106
</div>
107+
<!-- This section gets pushed to the right side-->
108+
<div class="formFooter__section">
109+
<div class="formFooter__item button button--clear">Reset</div>
110+
<div class="formFooter__item button">Save</div>
111+
</div>
112+
</div>
136113

137-
<!-- Site header -->
138-
<div class="demo">
139-
<div class="siteHeader">
140-
<!-- This section gets pushed to the left side-->
141-
<div class="siteHeader__section">
142-
<div class="siteHeader__item siteHeaderLogo">
143-
<div class="fa fa-inbox"></div>
144-
</div>
145-
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
146-
<div class="siteHeader__item siteHeaderButton">Sent</div>
147-
<div class="siteHeader__item siteHeaderButton">Trash</div>
148-
</div>
149-
<!-- This section gets pushed to the right side-->
150-
<div class="siteHeader__section">
151-
<div class="siteHeader__item siteHeaderButton">Settings</div>
152-
</div>
153114
</div>
115+
<!-- Side bar-->
116+
<div class="demo"><div class="sideBar">
117+
<!-- This section gets pushed to the top-->
118+
<div class="sideBar__section">
119+
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
120+
<div class="sideBar__item">Contacts</div>
121+
<div class="sideBar__item">Account</div>
122+
</div>
123+
<!-- This section gets pushed to the bottom-->
124+
<div class="sideBar__section">
125+
<div class="sideBar__item">Legal</div>
154126
</div>
127+
</div>
155128

156-
<!-- Stepper input -->
157-
<div class="demo">
158-
<div class="stepperInput">
159-
<button class="button button--addOnLeft">-</button>
160-
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
161-
<button class="button button--addOnRight">+</button>
162129
</div>
130+
<!-- Site header-->
131+
<div class="demo"><div class="siteHeader">
132+
<!-- This section gets pushed to the left side-->
133+
<div class="siteHeader__section">
134+
<div class="siteHeader__item siteHeaderLogo">
135+
<div class="fa fa-inbox"></div>
136+
</div>
137+
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
138+
<div class="siteHeader__item siteHeaderButton">Sent</div>
139+
<div class="siteHeader__item siteHeaderButton">Trash</div>
140+
</div>
141+
<!-- This section gets pushed to the right side-->
142+
<div class="siteHeader__section">
143+
<div class="siteHeader__item siteHeaderButton">Settings</div>
163144
</div>
145+
</div>
164146

165-
<!-- Tabs -->
166-
<div class="demo">
167-
<div class="tabs">
168-
<div class="tab is-tab-selected">Tab 1</div>
169-
<div class="tab">Tab 2</div>
170-
<div class="tab">Tab 3</div>
171-
<div class="tab">Tab 4</div>
172147
</div>
173-
</div>
148+
<!-- Stepper input-->
149+
<div class="demo"><div class="stepperInput">
150+
<button class="button button--addOnLeft">-</button>
151+
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
152+
<button class="button button--addOnRight">+</button>
153+
</div>
154+
155+
</div>
156+
<!-- Tabs-->
157+
<div class="demo"><div class="tabs">
158+
<div class="tab is-tab-selected">Tab 1</div>
159+
<div class="tab">Tab 2</div>
160+
<div class="tab">Tab 3</div>
161+
<div class="tab">Tab 4</div>
162+
</div>
174163

164+
</div>
175165
</body>
176-
</html>
166+
</html>

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@
1010
},
1111
"devDependencies": {
1212
"autoprefixer": "6.2.3",
13+
"jade": "1.11.0",
1314
"postcss-cli": "2.3.3"
1415
},
1516
"scripts": {
16-
"build": "sass src/index.scss dist/styles.css && node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css && cp src/index.html dist/index.html"
17+
"build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
18+
"compileCss": "sass src/index.scss dist/styles.css",
19+
"autoPrefixCss": "node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css",
20+
"compileHtml": "./node_modules/.bin/jade src/index.jade -P -o dist"
1721
}
1822
}

‎src/examples/card-group.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="cardGroup">
2+
<div class="card cardGroup__card">
3+
<div class="card__description cardGroup__cardDescription">
4+
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
5+
<div class="card__descriptionText">Trial</div>
6+
</div>
7+
<div class="card__price">Free!</div>
8+
</div>
9+
<div class="card cardGroup__card">
10+
<div class="card__description cardGroup__cardDescription">
11+
<div class="icon fa fa-trophy card__descriptionIcon"></div>
12+
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
13+
</div>
14+
<div class="card__price">$10.00</div>
15+
</div>
16+
<div class="card cardGroup__card">
17+
<div class="card__description cardGroup__cardDescription">
18+
<div class="icon fa fa-bolt card__descriptionIcon"></div>
19+
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
20+
</div>
21+
<div class="card__price">$6,000.00</div>
22+
</div>
23+
</div>

‎src/examples/card.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="card card--fixedWidth">
2+
<div class="card__description">
3+
<div class="icon fa fa-flask card__descriptionIcon"></div>
4+
<div class="card__descriptionText">Science potion</div>
5+
</div>
6+
<div class="card__price">Costs $5</div>
7+
</div>

‎src/examples/centered-icon.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="centeredIcon">
2+
<div class="icon fa fa-phone"></div>
3+
</div>

‎src/examples/centered-prompt.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="centeredPrompt">
2+
<div class="centeredPrompt__item centeredPromptIcon">
3+
<div class="icon fa fa-smile-o"></div>
4+
</div>
5+
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
6+
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div>
7+
<div class="centeredPrompt__item button">Begin tour</div>
8+
</div>

‎src/examples/feature-list.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="featureListItem">
2+
<div class="featureListItem__icon">
3+
<div class="icon fa fa-calendar"></div>
4+
</div>
5+
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
6+
</div>
7+
<div class="featureListItem featureListItem--reverse">
8+
<div class="featureListItem__icon">
9+
<div class="icon fa fa-dashboard"></div>
10+
</div>
11+
<div class="featureListItem__description">Our dashboard gives you a bird&rsquo;s-eye-view-at-a-glance-on-the-go.</div>
12+
</div>
13+
<div class="featureListItem">
14+
<div class="featureListItem__icon">
15+
<div class="icon fa fa-envelope"></div>
16+
</div>
17+
<div class="featureListItem__description">You can get notified by email or SMS.</div>
18+
</div>

‎src/examples/form-footer.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="formFooter">
2+
<!-- This section gets pushed to the left side-->
3+
<div class="formFooter__section">
4+
<div class="formFooter__item formFooterFeedback">
5+
<div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
6+
</div>
7+
</div>
8+
<!-- This section gets pushed to the right side-->
9+
<div class="formFooter__section">
10+
<div class="formFooter__item button button--clear">Reset</div>
11+
<div class="formFooter__item button">Save</div>
12+
</div>
13+
</div>

‎src/examples/side-bar.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="sideBar">
2+
<!-- This section gets pushed to the top-->
3+
<div class="sideBar__section">
4+
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
5+
<div class="sideBar__item">Contacts</div>
6+
<div class="sideBar__item">Account</div>
7+
</div>
8+
<!-- This section gets pushed to the bottom-->
9+
<div class="sideBar__section">
10+
<div class="sideBar__item">Legal</div>
11+
</div>
12+
</div>

0 commit comments

Comments
 (0)