mirror of
https://github.com/cjcenizal/flexbox-patterns.git
synced 2025-08-23 08:03:19 +02:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f856b14c88 | ||
|
|
5c88c8be5b | ||
|
|
3b7d7d6b36 | ||
|
|
9bc53b177b | ||
|
|
a1b5188de0 | ||
|
|
8379097f52 | ||
|
|
7354301f6b | ||
|
|
767630e3a7 | ||
|
|
7b708f1a56 | ||
|
|
32b10cdc27 | ||
|
|
ec3a380dba | ||
|
|
9b9336056f | ||
|
|
0c8747d500 | ||
|
|
18db3b20df | ||
|
|
45193b80d2 |
BIN
dist/images/dog_1.jpg
vendored
Normal file
BIN
dist/images/dog_1.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
dist/images/dog_2.jpg
vendored
Normal file
BIN
dist/images/dog_2.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
dist/images/dog_3.jpg
vendored
Normal file
BIN
dist/images/dog_3.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
dist/images/dog_4.jpg
vendored
Normal file
BIN
dist/images/dog_4.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
dist/images/dog_5.jpg
vendored
Normal file
BIN
dist/images/dog_5.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
351
dist/index.html
vendored
351
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 {
|
||||||
@@ -22,6 +22,215 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Stepper input-->
|
||||||
|
<div class="demo"><div class="stepperInput">
|
||||||
|
<button class="button button--addOnLeft">-</button>
|
||||||
|
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
||||||
|
<button class="button button--addOnRight">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Tabs-->
|
||||||
|
<div class="demo"><div class="tabs">
|
||||||
|
<div class="tab is-tab-selected">Tab 1</div>
|
||||||
|
<div class="tab">Tab 2</div>
|
||||||
|
<div class="tab">Tab 3</div>
|
||||||
|
<div class="tab">Tab 4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Site header-->
|
||||||
|
<div class="demo"><div class="siteHeader">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="siteHeader__section">
|
||||||
|
<div class="siteHeader__item siteHeaderLogo">
|
||||||
|
<div class="fa fa-inbox"></div>
|
||||||
|
</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
|
<div class="siteHeader__section">
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Log out</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Form footer-->
|
||||||
|
<div class="demo"><div class="formFooter">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item formFooterFeedback">
|
||||||
|
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item button button--clear">Reset</div>
|
||||||
|
<div class="formFooter__item button">Save</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
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Side bar-->
|
||||||
|
<div class="demo"><div class="sideBar">
|
||||||
|
<!-- This section gets pushed to the top-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
||||||
|
<div class="sideBar__item">Contacts</div>
|
||||||
|
<div class="sideBar__item">Account</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the bottom-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item">Change theme</div>
|
||||||
|
<div class="sideBar__item">Legal</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Centered prompt-->
|
||||||
|
<div class="demo"><div class="centeredPrompt">
|
||||||
|
<div class="centeredPrompt__item centeredPromptIcon">
|
||||||
|
<div class="icon fa fa-smile-o"></div>
|
||||||
|
</div>
|
||||||
|
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
||||||
|
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
||||||
|
<div class="centeredPrompt__item button">Begin tour</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Centered icon-->
|
||||||
|
<div class="demo"><div class="centeredIcon">
|
||||||
|
<div class="icon fa fa-phone"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Feature list-->
|
||||||
|
<div class="demo"><div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-calendar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem featureListItem--reverse">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-dashboard"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-envelope"></div>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
<!-- Card-->
|
||||||
|
<div class="demo"><div class="card card--fixedWidth">
|
||||||
|
<div class="card__description">
|
||||||
|
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Science potion</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Costs $5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<!-- Card group-->
|
<!-- Card group-->
|
||||||
<div class="demo"><div class="cardGroup">
|
<div class="demo"><div class="cardGroup">
|
||||||
<div class="card cardGroup__card">
|
<div class="card cardGroup__card">
|
||||||
@@ -48,117 +257,41 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Card-->
|
<!-- Photo-->
|
||||||
<div class="demo"><div class="card card--fixedWidth">
|
<div class="demo"><div class="photo photo1 photo--large">
|
||||||
<div class="card__description">
|
Sup, dog
|
||||||
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Science potion</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">Costs $5</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Centered icon-->
|
<!-- Gallery-->
|
||||||
<div class="demo"><div class="centeredIcon">
|
<div class="demo"><div class="gallery">
|
||||||
<div class="icon fa fa-phone"></div>
|
<div class="photo photo1 photo--large">1</div>
|
||||||
|
<div class="photo photo2 photo--large">2</div>
|
||||||
|
<div class="photo photo3 photo--large">3</div>
|
||||||
|
<div class="photo photo4 photo--large">4</div>
|
||||||
|
<div class="photo photo5 photo--large">5</div>
|
||||||
|
<div class="photo photo6 photo--large">6</div>
|
||||||
|
<div class="photo photo7 photo--large">7</div>
|
||||||
|
<div class="photo photo8 photo--large">8</div>
|
||||||
|
<div class="photo photo9 photo--large">9</div>
|
||||||
|
<div class="photo photo10 photo--large">10</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Centered prompt-->
|
<!-- Mosaic-->
|
||||||
<div class="demo"><div class="centeredPrompt">
|
<div class="demo"><div class="mosaic">
|
||||||
<div class="centeredPrompt__item centeredPromptIcon">
|
<div class="photo photo1 photo--small">1</div>
|
||||||
<div class="icon fa fa-smile-o"></div>
|
<div class="photo photo2 photo--medium">2</div>
|
||||||
</div>
|
<div class="photo photo3 photo--large">3</div>
|
||||||
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
<div class="photo photo4 photo--small">4</div>
|
||||||
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
<div class="photo photo5 photo--large">5</div>
|
||||||
<div class="centeredPrompt__item button">Begin tour</div>
|
<div class="photo photo6 photo--small">6</div>
|
||||||
</div>
|
<div class="photo photo7 photo--large">7</div>
|
||||||
|
<div class="photo photo8 photo--medium">8</div>
|
||||||
</div>
|
<div class="photo photo9 photo--medium">9</div>
|
||||||
<!-- Feature list-->
|
<div class="photo photo10 photo--small">10</div>
|
||||||
<div class="demo"><div class="featureListItem">
|
<div class="photo photo11 photo--large">11</div>
|
||||||
<div class="featureListItem__icon">
|
<div class="photo photo12 photo--medium">12</div>
|
||||||
<div class="icon fa fa-calendar"></div>
|
<div class="photo photo13 photo--large">13</div>
|
||||||
</div>
|
<div class="photo photo14 photo--medium">14</div>
|
||||||
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem featureListItem--reverse">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-dashboard"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-envelope"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Form footer-->
|
|
||||||
<div class="demo"><div class="formFooter">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item formFooterFeedback">
|
|
||||||
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item button button--clear">Reset</div>
|
|
||||||
<div class="formFooter__item button">Save</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Side bar-->
|
|
||||||
<div class="demo"><div class="sideBar">
|
|
||||||
<!-- This section gets pushed to the top-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
|
||||||
<div class="sideBar__item">Contacts</div>
|
|
||||||
<div class="sideBar__item">Account</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the bottom-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item">Legal</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Site header-->
|
|
||||||
<div class="demo"><div class="siteHeader">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderLogo">
|
|
||||||
<div class="fa fa-inbox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Stepper input-->
|
|
||||||
<div class="demo"><div class="stepperInput">
|
|
||||||
<button class="button button--addOnLeft">-</button>
|
|
||||||
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
|
||||||
<button class="button button--addOnRight">+</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Tabs-->
|
|
||||||
<div class="demo"><div class="tabs">
|
|
||||||
<div class="tab is-tab-selected">Tab 1</div>
|
|
||||||
<div class="tab">Tab 2</div>
|
|
||||||
<div class="tab">Tab 3</div>
|
|
||||||
<div class="tab">Tab 4</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
518
dist/styles.css
vendored
518
dist/styles.css
vendored
@@ -1,3 +1,6 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
/*=====================================================
|
/*=====================================================
|
||||||
contents of: styles/stepper-input.css
|
contents of: styles/stepper-input.css
|
||||||
@@ -10,7 +13,6 @@
|
|||||||
* This has a similar effect to setting the children
|
* This has a similar effect to setting the children
|
||||||
* to have display: inline-block.
|
* to have display: inline-block.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@@ -57,7 +59,6 @@
|
|||||||
* out its children using flexbox, the exact same
|
* out its children using flexbox, the exact same
|
||||||
* as in the above "Stepper input" example.
|
* as in the above "Stepper input" example.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -84,7 +85,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox, which is horizontal by default.
|
* flexbox, which is horizontal by default.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -93,7 +93,6 @@
|
|||||||
* between its children, with the children at either
|
* between its children, with the children at either
|
||||||
* end laying flush against the container's edges.
|
* end laying flush against the container's edges.
|
||||||
*/
|
*/
|
||||||
-webkit-justify-content: space-between;
|
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@@ -106,7 +105,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox.
|
* flexbox.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -115,7 +113,6 @@
|
|||||||
* the main axis. By default the children will
|
* the main axis. By default the children will
|
||||||
* align along their top edges.
|
* align along their top edges.
|
||||||
*/
|
*/
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -154,27 +151,24 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox, which is horizontal by default.
|
* flexbox, which is horizontal by default.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
|
||||||
* Align the children in the center, along
|
|
||||||
* the main axis, which is horizontal in this case.
|
|
||||||
*/
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make the container put as much space as possible
|
* Make the container put as much space as possible
|
||||||
* between its children, with the children at either
|
* between its children, with the children at either
|
||||||
* end laying flush against the container's edges.
|
* end laying flush against the container's edges.
|
||||||
*/
|
*/
|
||||||
-webkit-justify-content: space-between;
|
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align the children in the center, along
|
||||||
|
* the main axis, which is horizontal in this case.
|
||||||
|
*/
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
border-top: 1px solid #D7DBDD;
|
border-top: 1px solid #D7DBDD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
@@ -183,14 +177,12 @@
|
|||||||
/**
|
/**
|
||||||
* This container orders items horizontally.
|
* This container orders items horizontally.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* It aligns them vertically in the center.
|
* It aligns them vertically in the center.
|
||||||
*/
|
*/
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -206,18 +198,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.formFooterSpinner {
|
.formFooterSpinner {
|
||||||
-webkit-animation: formFooterSpinner 1s infinite steps(8, end);
|
|
||||||
animation: formFooterSpinner 1s infinite steps(8, end);
|
animation: formFooterSpinner 1s infinite steps(8, end);
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes formFooterSpinner {
|
|
||||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|
||||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes formFooterSpinner {
|
@keyframes formFooterSpinner {
|
||||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
0% { transform: rotate(0deg); }
|
||||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
100% { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--clear {
|
.button--clear {
|
||||||
@@ -226,6 +212,172 @@
|
|||||||
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;
|
||||||
|
|
||||||
|
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: -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;
|
||||||
|
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.
|
||||||
|
*/
|
||||||
|
-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
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
@@ -235,7 +387,6 @@
|
|||||||
* rules. By default, this would arrange its children
|
* rules. By default, this would arrange its children
|
||||||
* horizontally. However, the next property...
|
* horizontally. However, the next property...
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -244,7 +395,6 @@
|
|||||||
* horizontal, so now the children are laid out
|
* horizontal, so now the children are laid out
|
||||||
* vertically, from top to bottom.
|
* vertically, from top to bottom.
|
||||||
*/
|
*/
|
||||||
-webkit-flex-direction: column;
|
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@@ -253,7 +403,6 @@
|
|||||||
* between its children, with the children at either end
|
* between its children, with the children at either end
|
||||||
* laying flush against the container's edges.
|
* laying flush against the container's edges.
|
||||||
*/
|
*/
|
||||||
-webkit-justify-content: space-between;
|
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@@ -284,7 +433,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox.
|
* flexbox.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -293,29 +441,26 @@
|
|||||||
* are laid out vertically, the same as in the
|
* are laid out vertically, the same as in the
|
||||||
* above "Side bar" example.
|
* above "Side bar" example.
|
||||||
*/
|
*/
|
||||||
-webkit-flex-direction: column;
|
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instead of pushing the children apart, as in
|
||||||
|
* previous examples, we will group them together
|
||||||
|
* in the center of their container.
|
||||||
|
*/
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis. Because the direction is
|
* the main axis. Because the direction is
|
||||||
* "column" this has a similar effect as setting
|
* "column" this has a similar effect as setting
|
||||||
* text-align: center.
|
* text-align: center.
|
||||||
*/
|
*/
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/**
|
|
||||||
* Instead of pushing the children apart, as in
|
|
||||||
* previous examples, we will group them together
|
|
||||||
* in the center of their container.
|
|
||||||
*/
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
@@ -355,7 +500,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox.
|
* flexbox.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -364,26 +508,24 @@
|
|||||||
* we'll rotate the main axis so that the children
|
* we'll rotate the main axis so that the children
|
||||||
* are ordered vertically.
|
* are ordered vertically.
|
||||||
*/
|
*/
|
||||||
-webkit-flex-direction: column;
|
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
|
||||||
* And just like in that example, align the children
|
|
||||||
* in the center, along the main axis.
|
|
||||||
*/
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Same thing here as before: group the children
|
* Same thing here as before: group the children
|
||||||
* together in the center of their container.
|
* together in the center of their container.
|
||||||
*/
|
*/
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Just like in the "Centered prmopt" example,
|
||||||
|
* align the children in the center, along the
|
||||||
|
* main axis.
|
||||||
|
*/
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
border: 1px solid #D7DBDD;
|
border: 1px solid #D7DBDD;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
width: 90px;
|
width: 90px;
|
||||||
@@ -403,7 +545,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox, which is horizontal by default.
|
* flexbox, which is horizontal by default.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -411,7 +552,6 @@
|
|||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis, which is horizontal in this case.
|
* the main axis, which is horizontal in this case.
|
||||||
*/
|
*/
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@@ -430,7 +570,6 @@
|
|||||||
* reverse order of how they appear in the
|
* reverse order of how they appear in the
|
||||||
* markup.
|
* markup.
|
||||||
*/
|
*/
|
||||||
-webkit-flex-direction: row-reverse;
|
|
||||||
-ms-flex-direction: row-reverse;
|
-ms-flex-direction: row-reverse;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
@@ -446,10 +585,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
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
@@ -458,7 +621,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox, which is horizontal by default.
|
* flexbox, which is horizontal by default.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -466,7 +628,6 @@
|
|||||||
* Rotate the main axis so that the children
|
* Rotate the main axis so that the children
|
||||||
* are laid out vertically.
|
* are laid out vertically.
|
||||||
*/
|
*/
|
||||||
-webkit-flex-direction: column;
|
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@@ -480,7 +641,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox.
|
* flexbox.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -490,29 +650,26 @@
|
|||||||
* First we'll rotate the main axis so that the
|
* First we'll rotate the main axis so that the
|
||||||
* children are laid out vertically.
|
* children are laid out vertically.
|
||||||
*/
|
*/
|
||||||
-webkit-flex-direction: column;
|
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Just like in the "Centered prompt" example,
|
* Just like in the "Centered prompt", we'll
|
||||||
* we'll align the children in the center, along
|
|
||||||
* the main axis.
|
|
||||||
*/
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* And just like in the "Centered prompt", we'll
|
|
||||||
* group the children in the center of their
|
* group the children in the center of their
|
||||||
* container.
|
* container.
|
||||||
*/
|
*/
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 15px;
|
/**
|
||||||
|
* And just like in the "Centered prompt" example,
|
||||||
|
* we'll align the children in the center, along
|
||||||
|
* the main axis.
|
||||||
|
*/
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__descriptionIcon {
|
.card__descriptionIcon {
|
||||||
@@ -524,6 +681,7 @@
|
|||||||
color: #57727C;
|
color: #57727C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
max-width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__price {
|
.card__price {
|
||||||
@@ -539,6 +697,7 @@
|
|||||||
.card--fixedWidth {
|
.card--fixedWidth {
|
||||||
max-width: 120px;
|
max-width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*=====================================================
|
/*=====================================================
|
||||||
contents of: index.css
|
contents of: index.css
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
@@ -550,7 +709,6 @@
|
|||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox, which is horizontal by default.
|
* flexbox, which is horizontal by default.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -562,17 +720,17 @@
|
|||||||
.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.
|
||||||
*
|
*
|
||||||
* We'll also set flex-grow to 1 so that it
|
* We'll set flex-grow to 1 so that it will
|
||||||
* will expand to fill its container. (The
|
* expand to fill its container. (The default
|
||||||
* default value is 0.)
|
* default value is 0.)
|
||||||
*
|
*
|
||||||
* We'll set flex-shrink to 1 so that the element
|
* We'll also set flex-shrink to 1 so that the
|
||||||
* will shrink as its container gets smaller.
|
* element will shrink as its container gets
|
||||||
* (The default value is 1.)
|
* smaller. (The default value is 1.)
|
||||||
*
|
*
|
||||||
* Last, we set flex-basis to 0 so that its
|
* Last, we set flex-basis to 0 so that its
|
||||||
* size is solely determined by the size of
|
* size is solely determined by the size of
|
||||||
@@ -585,10 +743,15 @@
|
|||||||
* shrink with its container and siblings, but
|
* shrink with its container and siblings, but
|
||||||
* they will all have the same size, even if they
|
* they will all have the same size, even if they
|
||||||
* have different amounts of content.
|
* have different amounts of content.
|
||||||
|
*
|
||||||
|
* 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.
|
||||||
*/
|
*/
|
||||||
-webkit-flex: 1 1 0;
|
-ms-flex: 1 1 0%;
|
||||||
-ms-flex: 1 1 0;
|
flex: 1 1 0%;
|
||||||
flex: 1 1 0;
|
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@@ -605,9 +768,198 @@
|
|||||||
* flex-basis is auto, so now the size of its content
|
* flex-basis is auto, so now the size of its content
|
||||||
* will affect how large it is.
|
* will affect how large it is.
|
||||||
*/
|
*/
|
||||||
-webkit-flex: 1 1 auto;
|
|
||||||
-ms-flex: 1 1 auto;
|
-ms-flex: 1 1 auto;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/photo.css
|
||||||
|
=====================================================*/
|
||||||
|
.photo {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align all the children to the end of the main
|
||||||
|
* axis. This is the right side, by default.
|
||||||
|
*/
|
||||||
|
-ms-flex-pack: end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align all the children to the end of the
|
||||||
|
* secondary axis. This is the bottom, by default.
|
||||||
|
*/
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
width: 145px;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo--large {
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo1 {
|
||||||
|
background-image: url('images/dog_1.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/gallery.css
|
||||||
|
=====================================================*/
|
||||||
|
.gallery {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow the children to wrap to the next "row",
|
||||||
|
* instead of trying to squeeze them all into
|
||||||
|
* a single row.
|
||||||
|
*/
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
width: 478px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #D7DBDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo2 {
|
||||||
|
background-image: url('images/dog_2.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo3 {
|
||||||
|
background-image: url('images/dog_3.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo4 {
|
||||||
|
background-image: url('images/dog_4.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo5 {
|
||||||
|
background-image: url('images/dog_5.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo6 {
|
||||||
|
background-image: url('images/dog_1.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo7 {
|
||||||
|
background-image: url('images/dog_2.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo8 {
|
||||||
|
background-image: url('images/dog_3.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo9 {
|
||||||
|
background-image: url('images/dog_4.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo10 {
|
||||||
|
background-image: url('images/dog_5.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/mosaic.css
|
||||||
|
=====================================================*/
|
||||||
|
.mosaic {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the main axis to be vertical instead of
|
||||||
|
* horizontal, so now the children are laid out
|
||||||
|
* vertically, from top to bottom.
|
||||||
|
*/
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Now when the children wrap, they'll wrap to the
|
||||||
|
* next "column".
|
||||||
|
*/
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
width: 478px;
|
||||||
|
height: 370px;
|
||||||
|
padding: 6px;
|
||||||
|
border: 1px solid #D7DBDD;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo:last-child {
|
||||||
|
/**
|
||||||
|
* This is the first part of a flexbox hack.
|
||||||
|
* It addresses a problem flexbox has with scrolling
|
||||||
|
* content. Without this hack, the children on the
|
||||||
|
* far right of the container will be flush against
|
||||||
|
* the container's right edge.
|
||||||
|
*/
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo:last-child::after {
|
||||||
|
/**
|
||||||
|
* This is the second part of the hack. It creates
|
||||||
|
* an invisible element on the last child that
|
||||||
|
* forces a space between the child and the right
|
||||||
|
* edge of the container.
|
||||||
|
*/
|
||||||
|
display: block;
|
||||||
|
width: 11px;
|
||||||
|
height: 1px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
visibility: hidden;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo--small {
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo--medium {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo11 {
|
||||||
|
background-image: url('images/dog_1.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo12 {
|
||||||
|
background-image: url('images/dog_2.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo13 {
|
||||||
|
background-image: url('images/dog_3.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo14 {
|
||||||
|
background-image: url('images/dog_4.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
7
dist/styles.css.map
vendored
7
dist/styles.css.map
vendored
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"version": 3,
|
|
||||||
"mappings": "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",
|
|
||||||
"sources": ["../src/styles/stepper-input.scss","../src/styles/tabs.scss","../src/styles/site-header.scss","../src/styles/form-footer.scss","../src/styles/side-bar.scss","../src/styles/centered-prompt.scss","../src/styles/centered-icon.scss","../src/styles/feature-list.scss","../src/styles/card.scss","../src/styles/card-group.scss"],
|
|
||||||
"names": [],
|
|
||||||
"file": "styles.css"
|
|
||||||
}
|
|
||||||
12
package.json
12
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "flexbox-patterns",
|
"name": "flexbox-patterns",
|
||||||
"version": "0.1.1",
|
"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": {
|
||||||
@@ -11,13 +11,15 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "6.2.3",
|
"autoprefixer": "6.2.3",
|
||||||
"css-concat": "0.0.4",
|
"css-concat": "0.0.4",
|
||||||
|
"cpx": "1.3.1",
|
||||||
"jade": "1.11.0",
|
"jade": "1.11.0",
|
||||||
"postcss-cli": "2.3.3"
|
"postcss-cli": "2.3.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
|
"build": "npm run copyImages && npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
|
||||||
"compileCss": "node_modules/.bin/css-concat src/index.css dist/styles.css",
|
"copyImages": "cpx \"src/images/**/*\" dist/images",
|
||||||
"autoPrefixCss": "node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css",
|
"compileCss": "css-concat src/index.css dist/styles.css",
|
||||||
"compileHtml": "node_modules/.bin/jade src/index.jade -P -o dist"
|
"autoPrefixCss": "postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css",
|
||||||
|
"compileHtml": "jade src/index.jade -P -o dist"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
12
src/examples/gallery.html
Normal file
12
src/examples/gallery.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<div class="gallery">
|
||||||
|
<div class="photo photo1 photo--large">1</div>
|
||||||
|
<div class="photo photo2 photo--large">2</div>
|
||||||
|
<div class="photo photo3 photo--large">3</div>
|
||||||
|
<div class="photo photo4 photo--large">4</div>
|
||||||
|
<div class="photo photo5 photo--large">5</div>
|
||||||
|
<div class="photo photo6 photo--large">6</div>
|
||||||
|
<div class="photo photo7 photo--large">7</div>
|
||||||
|
<div class="photo photo8 photo--large">8</div>
|
||||||
|
<div class="photo photo9 photo--large">9</div>
|
||||||
|
<div class="photo photo10 photo--large">10</div>
|
||||||
|
</div>
|
||||||
16
src/examples/mosaic.html
Normal file
16
src/examples/mosaic.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<div class="mosaic">
|
||||||
|
<div class="photo photo1 photo--small">1</div>
|
||||||
|
<div class="photo photo2 photo--medium">2</div>
|
||||||
|
<div class="photo photo3 photo--large">3</div>
|
||||||
|
<div class="photo photo4 photo--small">4</div>
|
||||||
|
<div class="photo photo5 photo--large">5</div>
|
||||||
|
<div class="photo photo6 photo--small">6</div>
|
||||||
|
<div class="photo photo7 photo--large">7</div>
|
||||||
|
<div class="photo photo8 photo--medium">8</div>
|
||||||
|
<div class="photo photo9 photo--medium">9</div>
|
||||||
|
<div class="photo photo10 photo--small">10</div>
|
||||||
|
<div class="photo photo11 photo--large">11</div>
|
||||||
|
<div class="photo photo12 photo--medium">12</div>
|
||||||
|
<div class="photo photo13 photo--large">13</div>
|
||||||
|
<div class="photo photo14 photo--medium">14</div>
|
||||||
|
</div>
|
||||||
3
src/examples/photo.html
Normal file
3
src/examples/photo.html
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<div class="photo photo1 photo--large">
|
||||||
|
Sup, dog
|
||||||
|
</div>
|
||||||
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>
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- This section gets pushed to the bottom-->
|
<!-- This section gets pushed to the bottom-->
|
||||||
<div class="sideBar__section">
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item">Change theme</div>
|
||||||
<div class="sideBar__item">Legal</div>
|
<div class="sideBar__item">Legal</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -11,5 +11,6 @@
|
|||||||
<!-- This section gets pushed to the right side-->
|
<!-- This section gets pushed to the right side-->
|
||||||
<div class="siteHeader__section">
|
<div class="siteHeader__section">
|
||||||
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Log out</div>
|
||||||
</div>
|
</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>
|
||||||
BIN
src/images/dog_1.jpg
Normal file
BIN
src/images/dog_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/images/dog_2.jpg
Normal file
BIN
src/images/dog_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/images/dog_3.jpg
Normal file
BIN
src/images/dog_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/images/dog_4.jpg
Normal file
BIN
src/images/dog_4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/images/dog_5.jpg
Normal file
BIN
src/images/dog_5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -1,11 +1,19 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
@import url("./styles/stepper-input.css");
|
@import url("./styles/stepper-input.css");
|
||||||
@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/gallery.css");
|
||||||
|
@import url("./styles/mosaic.css");
|
||||||
|
|||||||
176
src/index.html
176
src/index.html
@@ -1,176 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<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:300,400,700|Ubuntu+Mono" 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="styles.css" rel="stylesheet" type="text/css">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
padding: 40px;
|
|
||||||
font-family: "Lato", "Helvetica", sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo {
|
|
||||||
max-width: 500px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- Card group -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="cardGroup">
|
|
||||||
<div class="card cardGroup__card">
|
|
||||||
<div class="card__description cardGroup__cardDescription">
|
|
||||||
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Trial</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">Free!</div>
|
|
||||||
</div>
|
|
||||||
<div class="card cardGroup__card">
|
|
||||||
<div class="card__description cardGroup__cardDescription">
|
|
||||||
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">$10.00</div>
|
|
||||||
</div>
|
|
||||||
<div class="card cardGroup__card">
|
|
||||||
<div class="card__description cardGroup__cardDescription">
|
|
||||||
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">$6,000.00</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="card card--fixedWidth">
|
|
||||||
<div class="card__description">
|
|
||||||
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Science potion</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">Costs $5</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Centered icon -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="centeredIcon">
|
|
||||||
<div class="icon fa fa-phone"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Centered prompt -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="centeredPrompt">
|
|
||||||
<div class="centeredPrompt__item centeredPromptIcon">
|
|
||||||
<div class="icon fa fa-smile-o"></div>
|
|
||||||
</div>
|
|
||||||
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
|
||||||
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
|
||||||
<div class="centeredPrompt__item button">Begin tour</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Feature list -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-calendar"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem featureListItem--reverse">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-dashboard"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-envelope"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Form footer -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="formFooter">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item formFooterFeedback">
|
|
||||||
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item button button--clear">Reset</div>
|
|
||||||
<div class="formFooter__item button">Save</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Side bar -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="sideBar">
|
|
||||||
<!-- This section gets pushed to the top-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
|
||||||
<div class="sideBar__item">Contacts</div>
|
|
||||||
<div class="sideBar__item">Account</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the bottom-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item">Legal</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Site header -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="siteHeader">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderLogo">
|
|
||||||
<div class="fa fa-inbox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Stepper input -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="stepperInput">
|
|
||||||
<button class="button button--addOnLeft">-</button>
|
|
||||||
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
|
||||||
<button class="button button--addOnRight">+</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tabs -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="tabs">
|
|
||||||
<div class="tab is-tab-selected">Tab 1</div>
|
|
||||||
<div class="tab">Tab 2</div>
|
|
||||||
<div class="tab">Tab 3</div>
|
|
||||||
<div class="tab">Tab 4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -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
|
||||||
@@ -44,38 +44,6 @@ html(lang='en')
|
|||||||
|
|
||||||
body
|
body
|
||||||
|
|
||||||
// Card group
|
|
||||||
.demo
|
|
||||||
include ./examples/card-group.html
|
|
||||||
|
|
||||||
// Card
|
|
||||||
.demo
|
|
||||||
include ./examples/card.html
|
|
||||||
|
|
||||||
// Centered icon
|
|
||||||
.demo
|
|
||||||
include ./examples/centered-icon.html
|
|
||||||
|
|
||||||
// Centered prompt
|
|
||||||
.demo
|
|
||||||
include ./examples/centered-prompt.html
|
|
||||||
|
|
||||||
// Feature list
|
|
||||||
.demo
|
|
||||||
include ./examples/feature-list.html
|
|
||||||
|
|
||||||
// Form footer
|
|
||||||
.demo
|
|
||||||
include ./examples/form-footer.html
|
|
||||||
|
|
||||||
// Side bar
|
|
||||||
.demo
|
|
||||||
include ./examples/side-bar.html
|
|
||||||
|
|
||||||
// Site header
|
|
||||||
.demo
|
|
||||||
include ./examples/site-header.html
|
|
||||||
|
|
||||||
// Stepper input
|
// Stepper input
|
||||||
.demo
|
.demo
|
||||||
include ./examples/stepper-input.html
|
include ./examples/stepper-input.html
|
||||||
@@ -83,3 +51,55 @@ html(lang='en')
|
|||||||
// Tabs
|
// Tabs
|
||||||
.demo
|
.demo
|
||||||
include ./examples/tabs.html
|
include ./examples/tabs.html
|
||||||
|
|
||||||
|
// Site header
|
||||||
|
.demo
|
||||||
|
include ./examples/site-header.html
|
||||||
|
|
||||||
|
// Form footer
|
||||||
|
.demo
|
||||||
|
include ./examples/form-footer.html
|
||||||
|
|
||||||
|
// Post
|
||||||
|
.demo
|
||||||
|
include ./examples/post.html
|
||||||
|
|
||||||
|
// Side bar
|
||||||
|
.demo
|
||||||
|
include ./examples/side-bar.html
|
||||||
|
|
||||||
|
// Centered prompt
|
||||||
|
.demo
|
||||||
|
include ./examples/centered-prompt.html
|
||||||
|
|
||||||
|
// Centered icon
|
||||||
|
.demo
|
||||||
|
include ./examples/centered-icon.html
|
||||||
|
|
||||||
|
// Feature list
|
||||||
|
.demo
|
||||||
|
include ./examples/feature-list.html
|
||||||
|
|
||||||
|
// Stream
|
||||||
|
.demo
|
||||||
|
include ./examples/stream.html
|
||||||
|
|
||||||
|
// Card
|
||||||
|
.demo
|
||||||
|
include ./examples/card.html
|
||||||
|
|
||||||
|
// Card group
|
||||||
|
.demo
|
||||||
|
include ./examples/card-group.html
|
||||||
|
|
||||||
|
// Photo
|
||||||
|
.demo
|
||||||
|
include ./examples/photo.html
|
||||||
|
|
||||||
|
// Gallery
|
||||||
|
.demo
|
||||||
|
include ./examples/gallery.html
|
||||||
|
|
||||||
|
// Mosaic
|
||||||
|
.demo
|
||||||
|
include ./examples/mosaic.html
|
||||||
|
|||||||
@@ -13,17 +13,17 @@
|
|||||||
.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.
|
||||||
*
|
*
|
||||||
* We'll also set flex-grow to 1 so that it
|
* We'll set flex-grow to 1 so that it will
|
||||||
* will expand to fill its container. (The
|
* expand to fill its container. (The default
|
||||||
* default value is 0.)
|
* default value is 0.)
|
||||||
*
|
*
|
||||||
* We'll set flex-shrink to 1 so that the element
|
* We'll also set flex-shrink to 1 so that the
|
||||||
* will shrink as its container gets smaller.
|
* element will shrink as its container gets
|
||||||
* (The default value is 1.)
|
* smaller. (The default value is 1.)
|
||||||
*
|
*
|
||||||
* Last, we set flex-basis to 0 so that its
|
* Last, we set flex-basis to 0 so that its
|
||||||
* size is solely determined by the size of
|
* size is solely determined by the size of
|
||||||
@@ -36,8 +36,14 @@
|
|||||||
* shrink with its container and siblings, but
|
* shrink with its container and siblings, but
|
||||||
* they will all have the same size, even if they
|
* they will all have the same size, even if they
|
||||||
* have different amounts of content.
|
* have different amounts of content.
|
||||||
|
*
|
||||||
|
* 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;
|
flex: 1 1 0%;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|||||||
@@ -32,20 +32,20 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Just like in the "Centered prompt" example,
|
* Just like in the "Centered prompt", we'll
|
||||||
* we'll align the children in the center, along
|
|
||||||
* the main axis.
|
|
||||||
*/
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* And just like in the "Centered prompt", we'll
|
|
||||||
* group the children in the center of their
|
* group the children in the center of their
|
||||||
* container.
|
* container.
|
||||||
*/
|
*/
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 15px;
|
/**
|
||||||
|
* And just like in the "Centered prompt" example,
|
||||||
|
* we'll align the children in the center, along
|
||||||
|
* the main axis.
|
||||||
|
*/
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__descriptionIcon {
|
.card__descriptionIcon {
|
||||||
@@ -57,6 +57,7 @@
|
|||||||
color: #57727C;
|
color: #57727C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
max-width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__price {
|
.card__price {
|
||||||
|
|||||||
@@ -12,18 +12,19 @@
|
|||||||
*/
|
*/
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
|
||||||
* And just like in that example, align the children
|
|
||||||
* in the center, along the main axis.
|
|
||||||
*/
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Same thing here as before: group the children
|
* Same thing here as before: group the children
|
||||||
* together in the center of their container.
|
* together in the center of their container.
|
||||||
*/
|
*/
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Just like in the "Centered prmopt" example,
|
||||||
|
* align the children in the center, along the
|
||||||
|
* main axis.
|
||||||
|
*/
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
border: 1px solid #D7DBDD;
|
border: 1px solid #D7DBDD;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
width: 90px;
|
width: 90px;
|
||||||
|
|||||||
@@ -12,6 +12,13 @@
|
|||||||
*/
|
*/
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instead of pushing the children apart, as in
|
||||||
|
* previous examples, we will group them together
|
||||||
|
* in the center of their container.
|
||||||
|
*/
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis. Because the direction is
|
* the main axis. Because the direction is
|
||||||
@@ -20,13 +27,6 @@
|
|||||||
*/
|
*/
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/**
|
|
||||||
* Instead of pushing the children apart, as in
|
|
||||||
* previous examples, we will group them together
|
|
||||||
* in the center of their container.
|
|
||||||
*/
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,6 +40,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
color: #86969C;
|
color: #57727C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,12 +5,6 @@
|
|||||||
*/
|
*/
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
|
||||||
* Align the children in the center, along
|
|
||||||
* the main axis, which is horizontal in this case.
|
|
||||||
*/
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make the container put as much space as possible
|
* Make the container put as much space as possible
|
||||||
* between its children, with the children at either
|
* between its children, with the children at either
|
||||||
@@ -18,6 +12,12 @@
|
|||||||
*/
|
*/
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align the children in the center, along
|
||||||
|
* the main axis, which is horizontal in this case.
|
||||||
|
*/
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
border-top: 1px solid #D7DBDD;
|
border-top: 1px solid #D7DBDD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
54
src/styles/gallery.css
Normal file
54
src/styles/gallery.css
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
.gallery {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow the children to wrap to the next "row",
|
||||||
|
* instead of trying to squeeze them all into
|
||||||
|
* a single row.
|
||||||
|
*/
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
width: 478px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #D7DBDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo2 {
|
||||||
|
background-image: url('../images/dog_2.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo3 {
|
||||||
|
background-image: url('../images/dog_3.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo4 {
|
||||||
|
background-image: url('../images/dog_4.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo5 {
|
||||||
|
background-image: url('../images/dog_5.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo6 {
|
||||||
|
background-image: url('../images/dog_1.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo7 {
|
||||||
|
background-image: url('../images/dog_2.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo8 {
|
||||||
|
background-image: url('../images/dog_3.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo9 {
|
||||||
|
background-image: url('../images/dog_4.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo10 {
|
||||||
|
background-image: url('../images/dog_5.jpg');
|
||||||
|
}
|
||||||
78
src/styles/mosaic.css
Normal file
78
src/styles/mosaic.css
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
.mosaic {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the main axis to be vertical instead of
|
||||||
|
* horizontal, so now the children are laid out
|
||||||
|
* vertically, from top to bottom.
|
||||||
|
*/
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Now when the children wrap, they'll wrap to the
|
||||||
|
* next "column".
|
||||||
|
*/
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
width: 478px;
|
||||||
|
height: 370px;
|
||||||
|
padding: 6px;
|
||||||
|
border: 1px solid #D7DBDD;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo:last-child {
|
||||||
|
/**
|
||||||
|
* This is the first part of a flexbox hack.
|
||||||
|
* It addresses a problem flexbox has with scrolling
|
||||||
|
* content. Without this hack, the children on the
|
||||||
|
* far right of the container will be flush against
|
||||||
|
* the container's right edge.
|
||||||
|
*/
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo:last-child::after {
|
||||||
|
/**
|
||||||
|
* This is the second part of the hack. It creates
|
||||||
|
* an invisible element on the last child that
|
||||||
|
* forces a space between the child and the right
|
||||||
|
* edge of the container.
|
||||||
|
*/
|
||||||
|
display: block;
|
||||||
|
width: 11px;
|
||||||
|
height: 1px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
visibility: hidden;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo--small {
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo--medium {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo11 {
|
||||||
|
background-image: url('../images/dog_1.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo12 {
|
||||||
|
background-image: url('../images/dog_2.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo13 {
|
||||||
|
background-image: url('../images/dog_3.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo14 {
|
||||||
|
background-image: url('../images/dog_4.jpg');
|
||||||
|
}
|
||||||
38
src/styles/photo.css
Normal file
38
src/styles/photo.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
.photo {
|
||||||
|
/**
|
||||||
|
* Lay out the children of this container with
|
||||||
|
* flexbox, which is horizontal by default.
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align all the children to the end of the main
|
||||||
|
* axis. This is the right side, by default.
|
||||||
|
*/
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align all the children to the end of the
|
||||||
|
* secondary axis. This is the bottom, by default.
|
||||||
|
*/
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
width: 145px;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo--large {
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo1 {
|
||||||
|
background-image: url('../images/dog_1.jpg');
|
||||||
|
}
|
||||||
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