Skip to content

Commit 9bc53b1

Browse files
cjcenizalcjcenizal
committed
Add Post and Stream patterns.
- Upgrade FontAwesome to 4.7.0.
1 parent a1b5188 commit 9bc53b1

File tree

10 files changed

+561
-8
lines changed

10 files changed

+561
-8
lines changed

‎dist/index.html‎

Lines changed: 95 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
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:400" rel="stylesheet" type="text/css">
7-
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
6+
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
88
<link href="styles.css" rel="stylesheet" type="text/css">
99
<style>
1010
body {
@@ -73,6 +73,25 @@
7373
</div>
7474
</div>
7575

76+
</div>
77+
<!-- Post-->
78+
<div class="demo"><div class="post">
79+
<div class="postUser">
80+
<div class="postUser__portrait">
81+
<span class="icon fa fa-user-circle-o"></span>
82+
</div>
83+
<div class="postUser__name">Sherlyn S.</div>
84+
</div>
85+
<div class="postBody">
86+
<div class="postBody__content">
87+
I built a tree house out of reclaimed cedar and gave it a coat of my home-made
88+
organic coffee-based varnish. Tree housewarming party this weekend!
89+
</div>
90+
<div class="postBody__date">
91+
December 4, 2023
92+
</div>
93+
</div>
94+
</div>
7695
</div>
7796
<!-- Side bar-->
7897
<div class="demo"><div class="sideBar">
@@ -127,6 +146,80 @@
127146
<div class="featureListItem__description">You can get notified by email or SMS.</div>
128147
</div>
129148

149+
</div>
150+
<!-- Stream-->
151+
<div class="demo"><div class="stream">
152+
<div class="post">
153+
<div class="postUser">
154+
<div class="postUser__portrait">
155+
<span class="icon fa fa-user-circle-o"></span>
156+
</div>
157+
<div class="postUser__name">CJ C.</div>
158+
</div>
159+
<div class="postBody">
160+
<div class="postBody__content">
161+
Going hiking with @karla in Yosemite!
162+
</div>
163+
<div class="postBody__date">
164+
May 27, 2027
165+
</div>
166+
</div>
167+
</div>
168+
169+
<div class="post">
170+
<div class="postUser">
171+
<div class="postUser__portrait">
172+
<span class="icon fa fa-user-circle-o"></span>
173+
</div>
174+
<div class="postUser__name">Jatesh V.</div>
175+
</div>
176+
<div class="postBody">
177+
<div class="postBody__content">
178+
Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my
179+
life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com!
180+
Love flexboxpatterns.com!
181+
</div>
182+
<div class="postBody__date">
183+
May 28, 2027
184+
</div>
185+
</div>
186+
</div>
187+
188+
<div class="post">
189+
<div class="postUser">
190+
<div class="postUser__portrait">
191+
<span class="icon fa fa-user-circle-o"></span>
192+
</div>
193+
<div class="postUser__name">Damien S.</div>
194+
</div>
195+
<div class="postBody">
196+
<div class="postBody__content">
197+
Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover
198+
#replicant
199+
</div>
200+
<div class="postBody__date">
201+
June 1, 2027
202+
</div>
203+
</div>
204+
</div>
205+
206+
<div class="post">
207+
<div class="postUser">
208+
<div class="postUser__portrait">
209+
<span class="icon fa fa-user-circle-o"></span>
210+
</div>
211+
<div class="postUser__name">Ziggie G.</div>
212+
</div>
213+
<div class="postBody">
214+
<div class="postBody__content">
215+
I love eating pizza!!!!!!!
216+
</div>
217+
<div class="postBody__date">
218+
June 5, 2027
219+
</div>
220+
</div>
221+
</div>
222+
</div>
130223
</div>
131224
<!-- Card-->
132225
<div class="demo"><div class="card card--fixedWidth">

‎dist/styles.css‎

Lines changed: 189 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,169 @@
212212
border: 1px solid #FFFFFF;
213213
}
214214

215+
/*=====================================================
216+
contents of: styles/post.css
217+
=====================================================*/
218+
.post {
219+
/**
220+
* Lay out the children of this container with
221+
* flexbox, which is horizontal by default.
222+
*/
223+
display: -ms-flexbox;
224+
display: flex;
225+
}
226+
227+
.postUser {
228+
/**
229+
* The flex property is a short-hand for setting
230+
* the flex-grow, flex-shrink, and flex-basis
231+
* properties. These properties control how the
232+
* element resizes to fill its container.
233+
*
234+
* The value we're using here is actually the
235+
* default, but I'm including so I can explain it
236+
* a bit. The default value equates to:
237+
*
238+
* - flex-grow: 0
239+
* - flex-shrink: 1
240+
* - flex-basis: auto
241+
*
242+
* We set flex-grow to 0, so this element won't
243+
* expand to fill its container.
244+
*
245+
* We'll then set flex-shrink to 1 so that the
246+
* element will shrink as its container gets
247+
* smaller. However, it will only shrink so far
248+
* because...
249+
*
250+
* ...we set flex-basis to auto. This causes
251+
* the content's size to also be a factor in the
252+
* calculation of the element's size. Because
253+
* the width of a child element is set (below),
254+
* this element won't shrink below that size.
255+
*
256+
* The net result is that this element stays a
257+
* fixed size, neither expanding nor shrinking.
258+
*/
259+
-ms-flex: 0 1 auto;
260+
flex: 0 1 auto;
261+
}
262+
263+
.postUser__portrait {
264+
/**
265+
* We're using these three flexbox properties
266+
* here to center the portrait icon inside of
267+
* this element.
268+
*
269+
* We'll explore these properties in more detail
270+
* in the "Stay Centered" section, so I'll only
271+
* briefly summarize here:
272+
*
273+
* - display: flex instructs the browser to
274+
* use flexbox to lay out this element's
275+
* children.
276+
* - justify-content: center will center the
277+
* icon along the main axis.
278+
* - align-items: center will center the icon
279+
* along the secondary (perpendicular) axis.
280+
*/
281+
display: -ms-flexbox;
282+
display: flex;
283+
-ms-flex-pack: center;
284+
justify-content: center;
285+
-ms-flex-align: center;
286+
align-items: center;
287+
288+
width: 100px;
289+
height: 90px;
290+
font-size: 70px;
291+
line-height: 0;
292+
}
293+
294+
.postUser__name {
295+
color: #57727C;
296+
font-size: 12px;
297+
font-weight: 700;
298+
text-align: center;
299+
}
300+
301+
.postBody {
302+
/**
303+
* We'll use the short-hand flex property again
304+
* here, to make the body of the post expand to
305+
* fill the container, and shrink as the container
306+
* becomes narrower.
307+
*
308+
* By setting flex-grow to 1, we cause this
309+
* element to expand to fill the container.
310+
*
311+
* Setting flex-shrink to 1 causes this element
312+
* to shrink with the container.
313+
*
314+
* Last, we set flex-basis to 0 so that its
315+
* size is solely determined by the size of
316+
* the container. (The default value is auto,
317+
* which would cause the content's size to also
318+
* be a factor in this calculation.)
319+
*
320+
* The net result of these properties is that the
321+
* element is a fluid size, and will expand and
322+
* shrink with its container.
323+
*
324+
* NOTE: IE11 ignores flex short-hand declarations
325+
* with unitless flex-basis values. So we have to
326+
* use 0% instead of 0 as a workaround. You can
327+
* find more info at:
328+
* github.com/philipwalton/flexbugs.
329+
*/
330+
-ms-flex: 1 1 0%;
331+
flex: 1 1 0%;
332+
333+
position: relative;
334+
padding: 15px;
335+
border: 1px solid #CAD0D2;
336+
border-radius: 4px;
337+
}
338+
339+
.postBody:after,
340+
.postBody:before {
341+
right: 100%;
342+
top: 35px;
343+
border: solid transparent;
344+
content: " ";
345+
height: 0;
346+
width: 0;
347+
position: absolute;
348+
pointer-events: none;
349+
}
350+
351+
.postBody:after {
352+
border-color: transparent;
353+
border-right-color: #ffffff;
354+
border-width: 8px;
355+
margin-top: -8px;
356+
}
357+
358+
.postBody:before {
359+
border-color: transparent;
360+
border-right-color: #CAD0D2;
361+
border-width: 9px;
362+
margin-top: -9px;
363+
}
364+
365+
.postBody__content {
366+
color: #57727C;
367+
font-size: 12px;
368+
}
369+
370+
.postBody__date {
371+
margin-top: 5px;
372+
color: #86969C;
373+
font-size: 10px;
374+
text-transform: uppercase;
375+
letter-spacing: 1px;
376+
}
377+
215378
/*=====================================================
216379
contents of: styles/side-bar.css
217380
=====================================================*/
@@ -419,10 +582,34 @@
419582
}
420583

421584
.featureListItem__description {
422-
color: #86969C;
585+
color: #57727C;
423586
font-size: 12px;
424587
}
425588

589+
/*=====================================================
590+
contents of: styles/stream.css
591+
=====================================================*/
592+
.stream {
593+
/**
594+
* Lay out the children of this container with
595+
* flexbox.
596+
*/
597+
display: -ms-flexbox;
598+
display: flex;
599+
600+
/*
601+
* Set the main axis to be vertical, but present
602+
* the children in reverse order of that in which
603+
* they occur in the DOM.
604+
*/
605+
-ms-flex-direction: column-reverse;
606+
flex-direction: column-reverse;
607+
}
608+
609+
.post + .post {
610+
margin-bottom: 5px;
611+
}
612+
426613
/*=====================================================
427614
contents of: styles/card.css
428615
=====================================================*/
@@ -530,7 +717,7 @@
530717
.cardGroup__card {
531718
/**
532719
* The flex property is a short-hand for setting
533-
* the flex-shrink, flex-grow, and flex-basis
720+
* the flex-grow, flex-shrink, and flex-basis
534721
* properties. These properties control how the
535722
* element resizes to fill its container.
536723
*

‎src/examples/post.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="post">
2+
<div class="postUser">
3+
<div class="postUser__portrait">
4+
<span class="icon fa fa-user-circle-o"></span>
5+
</div>
6+
<div class="postUser__name">Sherlyn S.</div>
7+
</div>
8+
<div class="postBody">
9+
<div class="postBody__content">
10+
I built a tree house out of reclaimed cedar and gave it a coat of my home-made
11+
organic coffee-based varnish. Tree housewarming party this weekend!
12+
</div>
13+
<div class="postBody__date">
14+
December 4
15+
</div>
16+
</div>
17+
</div>

0 commit comments

Comments
 (0)