Skip to content

Commit 767630e

Browse files
cjcenizalcjcenizal
committed
Add Photo, Gallery, and Mosaic examples.
1 parent 7b708f1 commit 767630e

23 files changed

+599
-194
lines changed

‎dist/images/dog_1.jpg‎

21.4 KB
Loading

‎dist/images/dog_2.jpg‎

26.4 KB
Loading

‎dist/images/dog_3.jpg‎

16.9 KB
Loading

‎dist/images/dog_4.jpg‎

19 KB
Loading

‎dist/images/dog_5.jpg‎

19.7 KB
Loading

‎dist/index.html‎

Lines changed: 118 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -22,45 +22,71 @@
2222
</style>
2323
</head>
2424
<body>
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>
25+
<!-- Stepper input-->
26+
<div class="demo"><div class="stepperInput">
27+
<button class="button button--addOnLeft">-</button>
28+
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
29+
<button class="button button--addOnRight">+</button>
30+
</div>
31+
3132
</div>
32-
<div class="card__price">Free!</div>
33-
</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>
33+
<!-- Tabs-->
34+
<div class="demo"><div class="tabs">
35+
<div class="tab is-tab-selected">Tab 1</div>
36+
<div class="tab">Tab 2</div>
37+
<div class="tab">Tab 3</div>
38+
<div class="tab">Tab 4</div>
39+
</div>
40+
3841
</div>
39-
<div class="card__price">$10.00</div>
40-
</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>
42+
<!-- Site header-->
43+
<div class="demo"><div class="siteHeader">
44+
<!-- This section gets pushed to the left side-->
45+
<div class="siteHeader__section">
46+
<div class="siteHeader__item siteHeaderLogo">
47+
<div class="fa fa-inbox"></div>
4548
</div>
46-
<div class="card__price">$6,000.00</div>
49+
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
50+
<div class="siteHeader__item siteHeaderButton">Sent</div>
51+
<div class="siteHeader__item siteHeaderButton">Trash</div>
52+
</div>
53+
<!-- This section gets pushed to the right side-->
54+
<div class="siteHeader__section">
55+
<div class="siteHeader__item siteHeaderButton">Settings</div>
56+
<div class="siteHeader__item siteHeaderButton">Log out</div>
4757
</div>
4858
</div>
4959

5060
</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>
61+
<!-- Form footer-->
62+
<div class="demo"><div class="formFooter">
63+
<!-- This section gets pushed to the left side-->
64+
<div class="formFooter__section">
65+
<div class="formFooter__item formFooterFeedback">
66+
<div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
67+
</div>
68+
</div>
69+
<!-- This section gets pushed to the right side-->
70+
<div class="formFooter__section">
71+
<div class="formFooter__item button button--clear">Reset</div>
72+
<div class="formFooter__item button">Save</div>
5673
</div>
57-
<div class="card__price">Costs $5</div>
5874
</div>
5975

6076
</div>
61-
<!-- Centered icon-->
62-
<div class="demo"><div class="centeredIcon">
63-
<div class="icon fa fa-phone"></div>
77+
<!-- Side bar-->
78+
<div class="demo"><div class="sideBar">
79+
<!-- This section gets pushed to the top-->
80+
<div class="sideBar__section">
81+
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
82+
<div class="sideBar__item">Contacts</div>
83+
<div class="sideBar__item">Account</div>
84+
</div>
85+
<!-- This section gets pushed to the bottom-->
86+
<div class="sideBar__section">
87+
<div class="sideBar__item">Change theme</div>
88+
<div class="sideBar__item">Legal</div>
89+
</div>
6490
</div>
6591

6692
</div>
@@ -74,6 +100,12 @@
74100
<div class="centeredPrompt__item button">Begin tour</div>
75101
</div>
76102

103+
</div>
104+
<!-- Centered icon-->
105+
<div class="demo"><div class="centeredIcon">
106+
<div class="icon fa fa-phone"></div>
107+
</div>
108+
77109
</div>
78110
<!-- Feature list-->
79111
<div class="demo"><div class="featureListItem">
@@ -96,71 +128,77 @@
96128
</div>
97129

98130
</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...
105-
</div>
106-
</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>
131+
<!-- Card-->
132+
<div class="demo"><div class="card card--fixedWidth">
133+
<div class="card__description">
134+
<div class="icon fa fa-flask card__descriptionIcon"></div>
135+
<div class="card__descriptionText">Science potion</div>
111136
</div>
137+
<div class="card__price">Costs $5</div>
112138
</div>
113139

114140
</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">Change theme</div>
126-
<div class="sideBar__item">Legal</div>
127-
</div>
128-
</div>
129-
141+
<!-- Card group-->
142+
<div class="demo"><div class="cardGroup">
143+
<div class="card cardGroup__card">
144+
<div class="card__description cardGroup__cardDescription">
145+
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
146+
<div class="card__descriptionText">Trial</div>
130147
</div>
131-
<!-- Site header-->
132-
<div class="demo"><div class="siteHeader">
133-
<!-- This section gets pushed to the left side-->
134-
<div class="siteHeader__section">
135-
<div class="siteHeader__item siteHeaderLogo">
136-
<div class="fa fa-inbox"></div>
148+
<div class="card__price">Free!</div>
149+
</div>
150+
<div class="card cardGroup__card">
151+
<div class="card__description cardGroup__cardDescription">
152+
<div class="icon fa fa-trophy card__descriptionIcon"></div>
153+
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
137154
</div>
138-
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
139-
<div class="siteHeader__item siteHeaderButton">Sent</div>
140-
<div class="siteHeader__item siteHeaderButton">Trash</div>
155+
<div class="card__price">$10.00</div>
141156
</div>
142-
<!-- This section gets pushed to the right side-->
143-
<div class="siteHeader__section">
144-
<div class="siteHeader__item siteHeaderButton">Settings</div>
145-
<div class="siteHeader__item siteHeaderButton">Log out</div>
157+
<div class="card cardGroup__card">
158+
<div class="card__description cardGroup__cardDescription">
159+
<div class="icon fa fa-bolt card__descriptionIcon"></div>
160+
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
161+
</div>
162+
<div class="card__price">$6,000.00</div>
146163
</div>
147164
</div>
148165

149166
</div>
150-
<!-- Stepper input-->
151-
<div class="demo"><div class="stepperInput">
152-
<button class="button button--addOnLeft">-</button>
153-
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
154-
<button class="button button--addOnRight">+</button>
167+
<!-- Photo-->
168+
<div class="demo"><div class="photo photo1 photo--large">
169+
Sup, dog
155170
</div>
156-
157171
</div>
158-
<!-- Tabs-->
159-
<div class="demo"><div class="tabs">
160-
<div class="tab is-tab-selected">Tab 1</div>
161-
<div class="tab">Tab 2</div>
162-
<div class="tab">Tab 3</div>
163-
<div class="tab">Tab 4</div>
172+
<!-- Gallery-->
173+
<div class="demo"><div class="gallery">
174+
<div class="photo photo1 photo--large">1</div>
175+
<div class="photo photo2 photo--large">2</div>
176+
<div class="photo photo3 photo--large">3</div>
177+
<div class="photo photo4 photo--large">4</div>
178+
<div class="photo photo5 photo--large">5</div>
179+
<div class="photo photo6 photo--large">6</div>
180+
<div class="photo photo7 photo--large">7</div>
181+
<div class="photo photo8 photo--large">8</div>
182+
<div class="photo photo9 photo--large">9</div>
183+
<div class="photo photo10 photo--large">10</div>
184+
</div>
185+
</div>
186+
<!-- Mosaic-->
187+
<div class="demo"><div class="mosaic">
188+
<div class="photo photo1 photo--small">1</div>
189+
<div class="photo photo2 photo--medium">2</div>
190+
<div class="photo photo3 photo--large">3</div>
191+
<div class="photo photo4 photo--small">4</div>
192+
<div class="photo photo5 photo--large">5</div>
193+
<div class="photo photo6 photo--small">6</div>
194+
<div class="photo photo7 photo--large">7</div>
195+
<div class="photo photo8 photo--medium">8</div>
196+
<div class="photo photo9 photo--medium">9</div>
197+
<div class="photo photo10 photo--small">10</div>
198+
<div class="photo photo11 photo--large">11</div>
199+
<div class="photo photo12 photo--medium">12</div>
200+
<div class="photo photo13 photo--large">13</div>
201+
<div class="photo photo14 photo--medium">14</div>
164202
</div>
165203

166204
</div>

0 commit comments

Comments
 (0)