mirror/flexbox-patterns
1
0
Fork 0
mirror of https://github.com/cjcenizal/flexbox-patterns.git synced 2025-08-05 07:37:31 +02:00
Code Issues Releases Wiki Activity

Merge pull request #11 from cjcenizal/feature/stream

Browse Source 
Add Post and Stream patterns.
This commit is contained in:
CJ Cenizal
2017-01-05 18:28:49 -08:00
committed by GitHub
parent a1b5188de0 3b7d7d6b36
commit 5c88c8be5b
11 changed files with 562 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
dist/index.html vendored
View File

@@ -3,8 +3,8 @@
<head>
<title>Flexbox Patterns Demo Page</title>
<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 rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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.7.0/css/font-awesome.min.css">
<link href="styles.css" rel="stylesheet" type="text/css">
<style>
body {
@@ -73,6 +73,25 @@
</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>
<!-- Side bar-->
<div class="demo"><div class="sideBar">
@@ -127,6 +146,80 @@
<div class="featureListItem__description">You can get notified by email or SMS.</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>
<!-- Card-->
<div class="demo"><div class="card card--fixedWidth">

191
dist/styles.css vendored
View File

@@ -212,6 +212,169 @@
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
=====================================================*/
@@ -419,10 +582,34 @@
}
.featureListItem__description {
color: #86969C;
color: #57727C;
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
=====================================================*/
@@ -530,7 +717,7 @@
.cardGroup__card {
/**
* 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
* element resizes to fill its container.
*

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "flexbox-patterns",
"version": "0.2.0",
"version": "0.3.0",
"description": "Patterns for using flexbox CSS to build awesome UI components",
"repository": "cjcenizal/flexbox-patterns",
"author": {

17
src/examples/post.html Normal file
View 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
View 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>

2
src/index.css
View File

@@ -6,10 +6,12 @@
@import url("./styles/tabs.css");
@import url("./styles/site-header.css");
@import url("./styles/form-footer.css");
@import url("./styles/post.css");
@import url("./styles/side-bar.css");
@import url("./styles/centered-prompt.css");
@import url("./styles/centered-icon.css");
@import url("./styles/feature-list.css");
@import url("./styles/stream.css");
@import url("./styles/card.css");
@import url("./styles/card-group.css");
@import url("./styles/photo.css");

12
src/index.jade
View File

@@ -11,7 +11,7 @@ html(lang='en')
//- Fonts
link(
href="http://fonts.googleapis.com/css?family=Lato:400"
href="http://fonts.googleapis.com/css?family=Lato:400,700"
rel="stylesheet"
type="text/css"
)
@@ -19,7 +19,7 @@ html(lang='en')
//- Font aweosome icons
link(
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
@@ -60,6 +60,10 @@ html(lang='en')
.demo
include ./examples/form-footer.html
// Post
.demo
include ./examples/post.html
// Side bar
.demo
include ./examples/side-bar.html
@@ -76,6 +80,10 @@ html(lang='en')
.demo
include ./examples/feature-list.html
// Stream
.demo
include ./examples/stream.html
// Card
.demo
include ./examples/card.html

2
src/styles/card-group.css
View File

@@ -13,7 +13,7 @@
.cardGroup__card {
/**
* 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
* element resizes to fill its container.
*

2
src/styles/feature-list.css
View File

@@ -40,6 +40,6 @@
}
.featureListItem__description {
color: #86969C;
color: #57727C;
font-size: 12px;
}

156
src/styles/post.css Normal file
View 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
View 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;
}