mirror of
https://github.com/cjcenizal/flexbox-patterns.git
synced 2025-08-05 15:47:27 +02:00
Merge pull request #11 from cjcenizal/feature/stream
Add Post and Stream patterns.
This commit is contained in:
CJ Cenizal
GitHub
97
dist/index.html
vendored
97
dist/index.html
vendored
@@ -3,8 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Flexbox Patterns Demo Page</title>
|
<title>Flexbox Patterns Demo Page</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
|
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
|
||||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
@@ -73,6 +73,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Post-->
|
||||||
|
<div class="demo"><div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Sherlyn S.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
I built a tree house out of reclaimed cedar and gave it a coat of my home-made
|
||||||
|
organic coffee-based varnish. Tree housewarming party this weekend!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
December 4, 2023
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Side bar-->
|
<!-- Side bar-->
|
||||||
<div class="demo"><div class="sideBar">
|
<div class="demo"><div class="sideBar">
|
||||||
@@ -127,6 +146,80 @@
|
|||||||
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Stream-->
|
||||||
|
<div class="demo"><div class="stream">
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">CJ C.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
Going hiking with @karla in Yosemite!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
May 27, 2027
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Jatesh V.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my
|
||||||
|
life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com!
|
||||||
|
Love flexboxpatterns.com!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
May 28, 2027
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Damien S.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover
|
||||||
|
#replicant
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
June 1, 2027
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Ziggie G.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
I love eating pizza!!!!!!!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
June 5, 2027
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Card-->
|
<!-- Card-->
|
||||||
<div class="demo"><div class="card card--fixedWidth">
|
<div class="demo"><div class="card card--fixedWidth">
|
||||||
|
|||||||
191
dist/styles.css
vendored
191
dist/styles.css
vendored
@@ -212,6 +212,169 @@
|
|||||||
border: 1px solid #FFFFFF;
|
border: 1px solid #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/post.css
|
||||||
|
=====================================================*/
|
||||||
|
.post {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postUser {
|
||||||
|
/**
|
||||||
|
* The flex property is a short-hand for setting
|
||||||
|
* the flex-grow, flex-shrink, and flex-basis
|
||||||
|
* properties. These properties control how the
|
||||||
|
* element resizes to fill its container.
|
||||||
|
*
|
||||||
|
* The value we're using here is actually the
|
||||||
|
* default, but I'm including so I can explain it
|
||||||
|
* a bit. The default value equates to:
|
||||||
|
*
|
||||||
|
* - flex-grow: 0
|
||||||
|
* - flex-shrink: 1
|
||||||
|
* - flex-basis: auto
|
||||||
|
*
|
||||||
|
* We set flex-grow to 0, so this element won't
|
||||||
|
* expand to fill its container.
|
||||||
|
*
|
||||||
|
* We'll then set flex-shrink to 1 so that the
|
||||||
|
* element will shrink as its container gets
|
||||||
|
* smaller. However, it will only shrink so far
|
||||||
|
* because...
|
||||||
|
*
|
||||||
|
* ...we set flex-basis to auto. This causes
|
||||||
|
* the content's size to also be a factor in the
|
||||||
|
* calculation of the element's size. Because
|
||||||
|
* the width of a child element is set (below),
|
||||||
|
* this element won't shrink below that size.
|
||||||
|
*
|
||||||
|
* The net result is that this element stays a
|
||||||
|
* fixed size, neither expanding nor shrinking.
|
||||||
|
*/
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postUser__portrait {
|
||||||
|
/**
|
||||||
|
* We're using these three flexbox properties
|
||||||
|
* here to center the portrait icon inside of
|
||||||
|
* this element.
|
||||||
|
*
|
||||||
|
* We'll explore these properties in more detail
|
||||||
|
* in the "Stay Centered" section, so I'll only
|
||||||
|
* briefly summarize here:
|
||||||
|
*
|
||||||
|
* - display: flex instructs the browser to
|
||||||
|
* use flexbox to lay out this element's
|
||||||
|
* children.
|
||||||
|
* - justify-content: center will center the
|
||||||
|
* icon along the main axis.
|
||||||
|
* - align-items: center will center the icon
|
||||||
|
* along the secondary (perpendicular) axis.
|
||||||
|
*/
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: 100px;
|
||||||
|
height: 90px;
|
||||||
|
font-size: 70px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postUser__name {
|
||||||
|
color: #57727C;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody {
|
||||||
|
/**
|
||||||
|
* We'll use the short-hand flex property again
|
||||||
|
* here, to make the body of the post expand to
|
||||||
|
* fill the container, and shrink as the container
|
||||||
|
* becomes narrower.
|
||||||
|
*
|
||||||
|
* By setting flex-grow to 1, we cause this
|
||||||
|
* element to expand to fill the container.
|
||||||
|
*
|
||||||
|
* Setting flex-shrink to 1 causes this element
|
||||||
|
* to shrink with the container.
|
||||||
|
*
|
||||||
|
* Last, we set flex-basis to 0 so that its
|
||||||
|
* size is solely determined by the size of
|
||||||
|
* the container. (The default value is auto,
|
||||||
|
* which would cause the content's size to also
|
||||||
|
* be a factor in this calculation.)
|
||||||
|
*
|
||||||
|
* The net result of these properties is that the
|
||||||
|
* element is a fluid size, and will expand and
|
||||||
|
* shrink with its container.
|
||||||
|
*
|
||||||
|
* NOTE: IE11 ignores flex short-hand declarations
|
||||||
|
* with unitless flex-basis values. So we have to
|
||||||
|
* use 0% instead of 0 as a workaround. You can
|
||||||
|
* find more info at:
|
||||||
|
* github.com/philipwalton/flexbugs.
|
||||||
|
*/
|
||||||
|
-ms-flex: 1 1 0%;
|
||||||
|
flex: 1 1 0%;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #CAD0D2;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody:after,
|
||||||
|
.postBody:before {
|
||||||
|
right: 100%;
|
||||||
|
top: 35px;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-right-color: #ffffff;
|
||||||
|
border-width: 8px;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody:before {
|
||||||
|
border-color: transparent;
|
||||||
|
border-right-color: #CAD0D2;
|
||||||
|
border-width: 9px;
|
||||||
|
margin-top: -9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody__content {
|
||||||
|
color: #57727C;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody__date {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #86969C;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
/*=====================================================
|
/*=====================================================
|
||||||
contents of: styles/side-bar.css
|
contents of: styles/side-bar.css
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
@@ -419,10 +582,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
color: #86969C;
|
color: #57727C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/stream.css
|
||||||
|
=====================================================*/
|
||||||
|
.stream {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox.
|
||||||
|
*/
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Set the main axis to be vertical, but present
|
||||||
|
* the children in reverse order of that in which
|
||||||
|
* they occur in the DOM.
|
||||||
|
*/
|
||||||
|
-ms-flex-direction: column-reverse;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post + .post {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
/*=====================================================
|
/*=====================================================
|
||||||
contents of: styles/card.css
|
contents of: styles/card.css
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
@@ -530,7 +717,7 @@
|
|||||||
.cardGroup__card {
|
.cardGroup__card {
|
||||||
/**
|
/**
|
||||||
* The flex property is a short-hand for setting
|
* The flex property is a short-hand for setting
|
||||||
* the flex-shrink, flex-grow, and flex-basis
|
* the flex-grow, flex-shrink, and flex-basis
|
||||||
* properties. These properties control how the
|
* properties. These properties control how the
|
||||||
* element resizes to fill its container.
|
* element resizes to fill its container.
|
||||||
*
|
*
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "flexbox-patterns",
|
"name": "flexbox-patterns",
|
||||||
"version": "0.2.0",
|
"version": "0.3.0",
|
||||||
"description": "Patterns for using flexbox CSS to build awesome UI components",
|
"description": "Patterns for using flexbox CSS to build awesome UI components",
|
||||||
"repository": "cjcenizal/flexbox-patterns",
|
"repository": "cjcenizal/flexbox-patterns",
|
||||||
"author": {
|
"author": {
|
||||||
|
|||||||
17
src/examples/post.html
Normal file
17
src/examples/post.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Sherlyn S.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
I built a tree house out of reclaimed cedar and gave it a coat of my home-made
|
||||||
|
organic coffee-based varnish. Tree housewarming party this weekend!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
December 4
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
72
src/examples/stream.html
Normal file
72
src/examples/stream.html
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<div class="stream">
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">CJ C.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
Going hiking with @karla in Yosemite!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
May 27
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Jatesh V.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my
|
||||||
|
life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com!
|
||||||
|
Love flexboxpatterns.com!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
May 28
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Damien S.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover
|
||||||
|
#replicant
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
June 1
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
<div class="postUser">
|
||||||
|
<div class="postUser__portrait">
|
||||||
|
<span class="icon fa fa-user-circle-o"></span>
|
||||||
|
</div>
|
||||||
|
<div class="postUser__name">Ziggie G.</div>
|
||||||
|
</div>
|
||||||
|
<div class="postBody">
|
||||||
|
<div class="postBody__content">
|
||||||
|
I love eating pizza!!!!!!!
|
||||||
|
</div>
|
||||||
|
<div class="postBody__date">
|
||||||
|
June 5
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -6,10 +6,12 @@
|
|||||||
@import url("./styles/tabs.css");
|
@import url("./styles/tabs.css");
|
||||||
@import url("./styles/site-header.css");
|
@import url("./styles/site-header.css");
|
||||||
@import url("./styles/form-footer.css");
|
@import url("./styles/form-footer.css");
|
||||||
|
@import url("./styles/post.css");
|
||||||
@import url("./styles/side-bar.css");
|
@import url("./styles/side-bar.css");
|
||||||
@import url("./styles/centered-prompt.css");
|
@import url("./styles/centered-prompt.css");
|
||||||
@import url("./styles/centered-icon.css");
|
@import url("./styles/centered-icon.css");
|
||||||
@import url("./styles/feature-list.css");
|
@import url("./styles/feature-list.css");
|
||||||
|
@import url("./styles/stream.css");
|
||||||
@import url("./styles/card.css");
|
@import url("./styles/card.css");
|
||||||
@import url("./styles/card-group.css");
|
@import url("./styles/card-group.css");
|
||||||
@import url("./styles/photo.css");
|
@import url("./styles/photo.css");
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html(lang='en')
|
|||||||
|
|
||||||
//- Fonts
|
//- Fonts
|
||||||
link(
|
link(
|
||||||
href="http://fonts.googleapis.com/css?family=Lato:400"
|
href="http://fonts.googleapis.com/css?family=Lato:400,700"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
)
|
)
|
||||||
@@ -19,7 +19,7 @@ html(lang='en')
|
|||||||
//- Font aweosome icons
|
//- Font aweosome icons
|
||||||
link(
|
link(
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
|
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
)
|
)
|
||||||
|
|
||||||
//- CSS
|
//- CSS
|
||||||
@@ -60,6 +60,10 @@ html(lang='en')
|
|||||||
.demo
|
.demo
|
||||||
include ./examples/form-footer.html
|
include ./examples/form-footer.html
|
||||||
|
|
||||||
|
// Post
|
||||||
|
.demo
|
||||||
|
include ./examples/post.html
|
||||||
|
|
||||||
// Side bar
|
// Side bar
|
||||||
.demo
|
.demo
|
||||||
include ./examples/side-bar.html
|
include ./examples/side-bar.html
|
||||||
@@ -76,6 +80,10 @@ html(lang='en')
|
|||||||
.demo
|
.demo
|
||||||
include ./examples/feature-list.html
|
include ./examples/feature-list.html
|
||||||
|
|
||||||
|
// Stream
|
||||||
|
.demo
|
||||||
|
include ./examples/stream.html
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
.demo
|
.demo
|
||||||
include ./examples/card.html
|
include ./examples/card.html
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
.cardGroup__card {
|
.cardGroup__card {
|
||||||
/**
|
/**
|
||||||
* The flex property is a short-hand for setting
|
* The flex property is a short-hand for setting
|
||||||
* the flex-shrink, flex-grow, and flex-basis
|
* the flex-grow, flex-shrink, and flex-basis
|
||||||
* properties. These properties control how the
|
* properties. These properties control how the
|
||||||
* element resizes to fill its container.
|
* element resizes to fill its container.
|
||||||
*
|
*
|
||||||
|
|||||||
@@ -40,6 +40,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
color: #86969C;
|
color: #57727C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
156
src/styles/post.css
Normal file
156
src/styles/post.css
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
.post {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postUser {
|
||||||
|
/**
|
||||||
|
* The flex property is a short-hand for setting
|
||||||
|
* the flex-grow, flex-shrink, and flex-basis
|
||||||
|
* properties. These properties control how the
|
||||||
|
* element resizes to fill its container.
|
||||||
|
*
|
||||||
|
* The value we're using here is actually the
|
||||||
|
* default, but I'm including so I can explain it
|
||||||
|
* a bit. The default value equates to:
|
||||||
|
*
|
||||||
|
* - flex-grow: 0
|
||||||
|
* - flex-shrink: 1
|
||||||
|
* - flex-basis: auto
|
||||||
|
*
|
||||||
|
* We set flex-grow to 0, so this element won't
|
||||||
|
* expand to fill its container.
|
||||||
|
*
|
||||||
|
* We'll then set flex-shrink to 1 so that the
|
||||||
|
* element will shrink as its container gets
|
||||||
|
* smaller. However, it will only shrink so far
|
||||||
|
* because...
|
||||||
|
*
|
||||||
|
* ...we set flex-basis to auto. This causes
|
||||||
|
* the content's size to also be a factor in the
|
||||||
|
* calculation of the element's size. Because
|
||||||
|
* the width of a child element is set (below),
|
||||||
|
* this element won't shrink below that size.
|
||||||
|
*
|
||||||
|
* The net result is that this element stays a
|
||||||
|
* fixed size, neither expanding nor shrinking.
|
||||||
|
*/
|
||||||
|
flex: 0 1 auto;
|
||||||
|
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postUser__portrait {
|
||||||
|
/**
|
||||||
|
* We're using these three flexbox properties
|
||||||
|
* here to center the portrait icon inside of
|
||||||
|
* this element.
|
||||||
|
*
|
||||||
|
* We'll explore these properties in more detail
|
||||||
|
* in the "Stay Centered" section, so I'll only
|
||||||
|
* briefly summarize here:
|
||||||
|
*
|
||||||
|
* - display: flex instructs the browser to
|
||||||
|
* use flexbox to lay out this element's
|
||||||
|
* children.
|
||||||
|
* - justify-content: center will center the
|
||||||
|
* icon along the main axis.
|
||||||
|
* - align-items: center will center the icon
|
||||||
|
* along the secondary (perpendicular) axis.
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: 100px;
|
||||||
|
height: 90px;
|
||||||
|
font-size: 70px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postUser__name {
|
||||||
|
color: #57727C;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody {
|
||||||
|
/**
|
||||||
|
* We'll use the short-hand flex property again
|
||||||
|
* here, to make the body of the post expand to
|
||||||
|
* fill the container, and shrink as the container
|
||||||
|
* becomes narrower.
|
||||||
|
*
|
||||||
|
* By setting flex-grow to 1, we cause this
|
||||||
|
* element to expand to fill the container.
|
||||||
|
*
|
||||||
|
* Setting flex-shrink to 1 causes this element
|
||||||
|
* to shrink with the container.
|
||||||
|
*
|
||||||
|
* Last, we set flex-basis to 0 so that its
|
||||||
|
* size is solely determined by the size of
|
||||||
|
* the container. (The default value is auto,
|
||||||
|
* which would cause the content's size to also
|
||||||
|
* be a factor in this calculation.)
|
||||||
|
*
|
||||||
|
* The net result of these properties is that the
|
||||||
|
* element is a fluid size, and will expand and
|
||||||
|
* shrink with its container.
|
||||||
|
*
|
||||||
|
* NOTE: IE11 ignores flex short-hand declarations
|
||||||
|
* with unitless flex-basis values. So we have to
|
||||||
|
* use 0% instead of 0 as a workaround. You can
|
||||||
|
* find more info at:
|
||||||
|
* github.com/philipwalton/flexbugs.
|
||||||
|
*/
|
||||||
|
flex: 1 1 0%;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #CAD0D2;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody:after,
|
||||||
|
.postBody:before {
|
||||||
|
right: 100%;
|
||||||
|
top: 35px;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-right-color: #ffffff;
|
||||||
|
border-width: 8px;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody:before {
|
||||||
|
border-color: transparent;
|
||||||
|
border-right-color: #CAD0D2;
|
||||||
|
border-width: 9px;
|
||||||
|
margin-top: -9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody__content {
|
||||||
|
color: #57727C;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postBody__date {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #86969C;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
18
src/styles/stream.css
Normal file
18
src/styles/stream.css
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
.stream {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox.
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Set the main axis to be vertical, but present
|
||||||
|
* the children in reverse order of that in which
|
||||||
|
* they occur in the DOM.
|
||||||
|
*/
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post + .post {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user