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

Merge pull request #4 from cjcenizal/improvement/individual-examples

Browse Source 
Split examples into individual HTML files.
This commit is contained in:
CJ Cenizal
2016-04-21 15:33:03 -07:00
parent 6f5b31c4dc c63f70c734
commit 90a709f4af
27 changed files with 723 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@@ -1,6 +1,6 @@
# Flexbox Patterns # Flexbox Patterns
This repository contains the original SCSS used for the This repository contains the original CSS used for the
components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com). components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com).
Feel free to use these styles however you like! Feel free to use these styles however you like!
@@ -10,14 +10,11 @@ Assuming you have Node installed, you can install the project dependencies with
`npm install`. This will install PostCSS and Autoprefixer; two critical tools `npm install`. This will install PostCSS and Autoprefixer; two critical tools
for making your CSS cross-browser compatible. for making your CSS cross-browser compatible.
This project also requires you have [SASS](http://sass-lang.com/) installed
(`sudo gem install sass`).
## Commands ## Commands
`npm run build` `npm run build`
I've chosen to write the styles with SCSS since it's widely adopted and I've This command will concatenate the source CSS files into a single CSS file, and
found that it makes me more productive. This command will compile the SCSS into then use PostCSS to add various vendor-prefixed properties. Open up
CSS and add various vendor-prefixed properties. Open up `dist/index.html` `dist/index.html` to see a demo page of the various flexbox patterns in the
to see a demo page of the various flexbox patterns in the browser. browser.

54
dist/index.html vendored
View File

@@ -3,7 +3,7 @@
<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:300,400,700|Ubuntu+Mono" rel="stylesheet" type="text/css"> <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 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"> <link href="styles.css" rel="stylesheet" type="text/css">
<style> <style>
@@ -18,13 +18,12 @@
max-width: 500px; max-width: 500px;
margin-bottom: 40px; margin-bottom: 40px;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Card group--> <!-- Card group-->
<div class="demo"> <div class="demo"><div class="cardGroup">
<div class="cardGroup">
<div class="card cardGroup__card"> <div class="card cardGroup__card">
<div class="card__description cardGroup__cardDescription"> <div class="card__description cardGroup__cardDescription">
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div> <div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
@@ -47,29 +46,26 @@
<div class="card__price">$6,000.00</div> <div class="card__price">$6,000.00</div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Card--> <!-- Card-->
<div class="demo"> <div class="demo"><div class="card card--fixedWidth">
<div class="card card--fixedWidth">
<div class="card__description"> <div class="card__description">
<div class="icon fa fa-flask card__descriptionIcon"></div> <div class="icon fa fa-flask card__descriptionIcon"></div>
<div class="card__descriptionText">Science potion</div> <div class="card__descriptionText">Science potion</div>
</div> </div>
<div class="card__price">Costs $5</div> <div class="card__price">Costs $5</div>
</div> </div>
</div>
</div>
<!-- Centered icon--> <!-- Centered icon-->
<div class="demo"> <div class="demo"><div class="centeredIcon">
<div class="centeredIcon">
<div class="icon fa fa-phone"></div> <div class="icon fa fa-phone"></div>
</div> </div>
</div>
</div>
<!-- Centered prompt--> <!-- Centered prompt-->
<div class="demo"> <div class="demo"><div class="centeredPrompt">
<div class="centeredPrompt">
<div class="centeredPrompt__item centeredPromptIcon"> <div class="centeredPrompt__item centeredPromptIcon">
<div class="icon fa fa-smile-o"></div> <div class="icon fa fa-smile-o"></div>
</div> </div>
@@ -77,11 +73,10 @@
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div> <div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div>
<div class="centeredPrompt__item button">Begin tour</div> <div class="centeredPrompt__item button">Begin tour</div>
</div> </div>
</div>
</div>
<!-- Feature list--> <!-- Feature list-->
<div class="demo"> <div class="demo"><div class="featureListItem">
<div class="featureListItem">
<div class="featureListItem__icon"> <div class="featureListItem__icon">
<div class="icon fa fa-calendar"></div> <div class="icon fa fa-calendar"></div>
</div> </div>
@@ -99,11 +94,10 @@
</div> </div>
<div class="featureListItem__description">You can get notified by email or SMS.</div> <div class="featureListItem__description">You can get notified by email or SMS.</div>
</div> </div>
</div>
</div>
<!-- Form footer--> <!-- Form footer-->
<div class="demo"> <div class="demo"><div class="formFooter">
<div class="formFooter">
<!-- This section gets pushed to the left side--> <!-- This section gets pushed to the left side-->
<div class="formFooter__section"> <div class="formFooter__section">
<div class="formFooter__item formFooterFeedback"> <div class="formFooter__item formFooterFeedback">
@@ -116,11 +110,10 @@
<div class="formFooter__item button">Save</div> <div class="formFooter__item button">Save</div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Side bar--> <!-- Side bar-->
<div class="demo"> <div class="demo"><div class="sideBar">
<div class="sideBar">
<!-- This section gets pushed to the top--> <!-- This section gets pushed to the top-->
<div class="sideBar__section"> <div class="sideBar__section">
<div class="sideBar__item is-side-bar-item-selected">Inbox</div> <div class="sideBar__item is-side-bar-item-selected">Inbox</div>
@@ -132,11 +125,10 @@
<div class="sideBar__item">Legal</div> <div class="sideBar__item">Legal</div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Site header--> <!-- Site header-->
<div class="demo"> <div class="demo"><div class="siteHeader">
<div class="siteHeader">
<!-- This section gets pushed to the left side--> <!-- This section gets pushed to the left side-->
<div class="siteHeader__section"> <div class="siteHeader__section">
<div class="siteHeader__item siteHeaderLogo"> <div class="siteHeader__item siteHeaderLogo">
@@ -151,26 +143,24 @@
<div class="siteHeader__item siteHeaderButton">Settings</div> <div class="siteHeader__item siteHeaderButton">Settings</div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Stepper input--> <!-- Stepper input-->
<div class="demo"> <div class="demo"><div class="stepperInput">
<div class="stepperInput">
<button class="button button--addOnLeft">-</button> <button class="button button--addOnLeft">-</button>
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/> <input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
<button class="button button--addOnRight">+</button> <button class="button button--addOnRight">+</button>
</div> </div>
</div>
</div>
<!-- Tabs--> <!-- Tabs-->
<div class="demo"> <div class="demo"><div class="tabs">
<div class="tabs">
<div class="tab is-tab-selected">Tab 1</div> <div class="tab is-tab-selected">Tab 1</div>
<div class="tab">Tab 2</div> <div class="tab">Tab 2</div>
<div class="tab">Tab 3</div> <div class="tab">Tab 3</div>
<div class="tab">Tab 4</div> <div class="tab">Tab 4</div>
</div> </div>
</div>
</div>
</body> </body>
</html> </html>

241
dist/styles.css vendored
View File

@@ -1,3 +1,7 @@
/*=====================================================
contents of: styles/stepper-input.css
=====================================================*/
.stepperInput { .stepperInput {
/** /**
* Setting display to flex makes this container lay * Setting display to flex makes this container lay
@@ -8,13 +12,15 @@
*/ */
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; } display: flex;
}
.stepperInput__input { .stepperInput__input {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
width: 60px; width: 60px;
text-align: center; } text-align: center;
}
.button { .button {
cursor: pointer; cursor: pointer;
@@ -23,22 +29,28 @@
background-color: #4EBBE4; background-color: #4EBBE4;
font-size: 12px; font-size: 12px;
border: 1px solid #16A2D7; border: 1px solid #16A2D7;
border-radius: 4px; } border-radius: 4px;
}
.button--addOnLeft { .button--addOnLeft {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; } border-bottom-right-radius: 0;
}
.button--addOnRight { .button--addOnRight {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; } border-bottom-left-radius: 0;
}
.input { .input {
border: 1px solid #D7DBDD; border: 1px solid #D7DBDD;
padding: 0 10px; padding: 0 10px;
border-radius: 0; border-radius: 0;
box-shadow: none; } box-shadow: none;
}
/*=====================================================
contents of: styles/tabs.css
=====================================================*/
.tabs { .tabs {
/** /**
* Setting display to flex makes this container lay * Setting display to flex makes this container lay
@@ -48,17 +60,25 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
border-bottom: 1px solid #D7DBDD; }
border-bottom: 1px solid #D7DBDD;
}
.tab { .tab {
cursor: pointer; cursor: pointer;
padding: 5px 30px; padding: 5px 30px;
color: #16A2D7; color: #16A2D7;
font-size: 12px; font-size: 12px;
border-bottom: 2px solid transparent; } border-bottom: 2px solid transparent;
.tab.is-tab-selected { }
border-bottom-color: #4EBBE4; }
.tab.is-tab-selected {
border-bottom-color: #4EBBE4;
}
/*=====================================================
contents of: styles/site-header.css
=====================================================*/
.siteHeader { .siteHeader {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -67,6 +87,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* 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
@@ -75,8 +96,10 @@
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
padding: 10px; padding: 10px;
background-color: #56727C; } background-color: #56727C;
}
.siteHeader__section { .siteHeader__section {
/** /**
@@ -86,6 +109,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* Align the children in the center, along * Align the children in the center, along
* the main axis. By default the children will * the main axis. By default the children will
@@ -93,27 +117,38 @@
*/ */
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; } align-items: center;
}
.siteHeader__item { .siteHeader__item {
padding: 5px 15px; padding: 5px 15px;
font-size: 12px; } font-size: 12px;
}
.siteHeader__item + .siteHeader__item { .siteHeader__item + .siteHeader__item {
margin-left: 5px; } margin-left: 5px;
}
.siteHeader__item.is-site-header-item-selected { .siteHeader__item.is-site-header-item-selected {
color: #FFFFFF; color: #FFFFFF;
background-color: #415F69; background-color: #415F69;
border-radius: 4px; } border-radius: 4px;
}
.siteHeaderLogo { .siteHeaderLogo {
font-size: 20px; font-size: 20px;
line-height: 0; line-height: 0;
color: white; } color: white;
}
.siteHeaderButton { .siteHeaderButton {
cursor: pointer; cursor: pointer;
color: #D9E9EF; } color: #D9E9EF;
}
/*=====================================================
contents of: styles/form-footer.css
=====================================================*/
.formFooter { .formFooter {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -122,6 +157,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* 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.
@@ -129,6 +165,7 @@
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: 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
@@ -137,8 +174,10 @@
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #D7DBDD; border-top: 1px solid #D7DBDD;
padding: 10px; } padding: 10px;
}
.formFooter__section { .formFooter__section {
/** /**
@@ -147,45 +186,49 @@
display: -webkit-flex; 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; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; } align-items: center;
}
.formFooter__item + .formFooter__item { .formFooter__item + .formFooter__item {
margin-left: 5px; } margin-left: 5px;
}
.formFooterFeedback { .formFooterFeedback {
color: #86969C; color: #86969C;
font-size: 12px; font-size: 12px;
line-height: 0; } line-height: 0;
}
.formFooterSpinner { .formFooterSpinner {
-webkit-animation: formFooterSpinner 1s infinite steps(8, end); -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 { @-webkit-keyframes formFooterSpinner {
0% { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
-webkit-transform: rotate(0deg); 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
transform: rotate(0deg); } }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes formFooterSpinner { @keyframes formFooterSpinner {
0% { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
-webkit-transform: rotate(0deg); 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
transform: rotate(0deg); } }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.button--clear { .button--clear {
color: #16A2D7; color: #16A2D7;
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #FFFFFF; } border: 1px solid #FFFFFF;
}
/*=====================================================
contents of: styles/side-bar.css
=====================================================*/
.sideBar { .sideBar {
/** /**
* This container orders items according to flexbox * This container orders items according to flexbox
@@ -195,6 +238,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* ...sets the main axis to be vertical instead of * ...sets the main axis to be vertical instead of
* horizontal, so now the children are laid out * horizontal, so now the children are laid out
@@ -203,6 +247,7 @@
-webkit-flex-direction: column; -webkit-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
/** /**
* It will also put as much space as possible * It will also put as much space as possible
* between its children, with the children at either end * between its children, with the children at either end
@@ -211,21 +256,29 @@
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
height: 300px; height: 300px;
width: 150px; width: 150px;
border-right: 1px solid #D7DBDD; border-right: 1px solid #D7DBDD;
background-color: #FCFDFD; background-color: #FCFDFD;
padding: 10px; } padding: 10px;
}
.sideBar__item { .sideBar__item {
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
color: #16A2D7; color: #16A2D7;
font-size: 12px; } font-size: 12px;
}
.sideBar__item.is-side-bar-item-selected { .sideBar__item.is-side-bar-item-selected {
background-color: #EEF3F5; background-color: #EEF3F5;
border-radius: 4px; } border-radius: 4px;
}
/*=====================================================
contents of: styles/centered-prompt.css
=====================================================*/
.centeredPrompt { .centeredPrompt {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -234,6 +287,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* Rotate the main axis so that the children * Rotate the main axis so that the children
* are laid out vertically, the same as in the * are laid out vertically, the same as in the
@@ -242,6 +296,7 @@
-webkit-flex-direction: column; -webkit-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
/** /**
* 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
@@ -251,6 +306,7 @@
-webkit-align-items: 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 * Instead of pushing the children apart, as in
* previous examples, we will group them together * previous examples, we will group them together
@@ -259,31 +315,41 @@
-webkit-justify-content: center; -webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
min-height: 300px; min-height: 300px;
padding: 10px; } padding: 10px;
}
.centeredPrompt__item + .centeredPrompt__item { .centeredPrompt__item + .centeredPrompt__item {
margin-top: 5px; } margin-top: 5px;
}
.centeredPromptIcon { .centeredPromptIcon {
font-size: 60px; font-size: 60px;
line-height: 0; } line-height: 0;
}
.centeredPromptLabel { .centeredPromptLabel {
color: #86969C; color: #86969C;
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
text-align: center; } text-align: center;
}
.centeredPromptDetails { .centeredPromptDetails {
color: #86969C; color: #86969C;
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center; } text-align: center;
}
.icon { .icon {
color: #BCD2DA; } color: #BCD2DA;
}
/*=====================================================
contents of: styles/centered-icon.css
=====================================================*/
.centeredIcon { .centeredIcon {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -292,6 +358,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* As in the above "Centered prmopt" example, * As in the above "Centered prmopt" example,
* we'll rotate the main axis so that the children * we'll rotate the main axis so that the children
@@ -300,6 +367,7 @@
-webkit-flex-direction: column; -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 * And just like in that example, align the children
* in the center, along the main axis. * in the center, along the main axis.
@@ -307,6 +375,7 @@
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: 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.
@@ -314,13 +383,21 @@
-webkit-justify-content: center; -webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
border: 1px solid #D7DBDD; border: 1px solid #D7DBDD;
font-size: 40px; font-size: 40px;
width: 90px; width: 90px;
height: 90px; height: 90px;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05); } box-shadow:
0 2px 1px rgba(0, 0, 0, 0.05),
0 2px 3px rgba(0, 0, 0, 0.05),
0 4px 8px rgba(0, 0, 0, 0.05);
}
/*=====================================================
contents of: styles/feature-list.css
=====================================================*/
.featureListItem { .featureListItem {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -329,6 +406,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* 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.
@@ -336,10 +414,14 @@
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
max-width: 400px; max-width: 400px;
padding: 10px; } padding: 10px;
}
.featureListItem + .featureListItem { .featureListItem + .featureListItem {
border-top: 1px solid #D7DBDD; } border-top: 1px solid #D7DBDD;
}
.featureListItem--reverse { .featureListItem--reverse {
/** /**
@@ -350,20 +432,27 @@
*/ */
-webkit-flex-direction: row-reverse; -webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse; -ms-flex-direction: row-reverse;
flex-direction: row-reverse; } flex-direction: row-reverse;
}
.featureListItem__icon, .featureListItem__icon,
.featureListItem__description { .featureListItem__description {
padding: 5px 15px; } padding: 5px 15px;
}
.featureListItem__icon { .featureListItem__icon {
font-size: 50px; font-size: 50px;
line-height: 0; } line-height: 0;
}
.featureListItem__description { .featureListItem__description {
color: #86969C; color: #86969C;
font-size: 12px; } font-size: 12px;
}
/*=====================================================
contents of: styles/card.css
=====================================================*/
.card { .card {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -372,6 +461,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* Rotate the main axis so that the children * Rotate the main axis so that the children
* are laid out vertically. * are laid out vertically.
@@ -379,9 +469,11 @@
-webkit-flex-direction: column; -webkit-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
border: 1px solid #CAD0D2; border: 1px solid #CAD0D2;
border-radius: 4px; border-radius: 4px;
overflow: hidden; } overflow: hidden;
}
.card__description { .card__description {
/** /**
@@ -391,6 +483,7 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/** /**
* We're going to lay out this element's children * We're going to lay out this element's children
* just like in the "Centered prompt" example. * just like in the "Centered prompt" example.
@@ -400,6 +493,7 @@
-webkit-flex-direction: column; -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" example,
* we'll align the children in the center, along * we'll align the children in the center, along
@@ -408,6 +502,7 @@
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
/** /**
* And just like in the "Centered prompt", we'll * 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
@@ -416,16 +511,20 @@
-webkit-justify-content: center; -webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
padding: 15px; }
padding: 15px;
}
.card__descriptionIcon { .card__descriptionIcon {
font-size: 32px; font-size: 32px;
margin-bottom: 10px; } margin-bottom: 10px;
}
.card__descriptionText { .card__descriptionText {
color: #57727C; color: #57727C;
font-size: 12px; font-size: 12px;
text-align: center; } text-align: center;
}
.card__price { .card__price {
text-align: center; text-align: center;
@@ -434,11 +533,18 @@
font-weight: 700; font-weight: 700;
padding: 5px 15px; padding: 5px 15px;
border-top: 1px solid #D7DBDD; border-top: 1px solid #D7DBDD;
background-color: #EEF3F5; } background-color: #EEF3F5;
}
.card--fixedWidth { .card--fixedWidth {
max-width: 120px; } max-width: 120px;
}
/*=====================================================
contents of: index.css
=====================================================*/
/*=====================================================
contents of: styles/card-group.css
=====================================================*/
.cardGroup { .cardGroup {
/** /**
* Lay out the children of this container with * Lay out the children of this container with
@@ -447,9 +553,11 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
border: 1px solid #CAD0D2; border: 1px solid #CAD0D2;
border-radius: 4px; border-radius: 4px;
overflow: hidden; } overflow: hidden;
}
.cardGroup__card { .cardGroup__card {
/** /**
@@ -481,10 +589,14 @@
-webkit-flex: 1 1 0; -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;
}
.cardGroup__card + .cardGroup__card { .cardGroup__card + .cardGroup__card {
border-left: 1px solid #D7DBDD; } border-left: 1px solid #D7DBDD;
}
.cardGroup__cardDescription { .cardGroup__cardDescription {
/** /**
@@ -495,6 +607,7 @@
*/ */
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto; } flex: 1 1 auto;
}
/*# sourceMappingURL=styles.css.map */

7
package.json
View File

@@ -10,9 +10,14 @@
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "6.2.3", "autoprefixer": "6.2.3",
"css-concat": "0.0.4",
"jade": "1.11.0",
"postcss-cli": "2.3.3" "postcss-cli": "2.3.3"
}, },
"scripts": { "scripts": {
"build": "sass src/index.scss dist/styles.css && node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css && cp src/index.html dist/index.html" "build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
"compileCss": "node_modules/.bin/css-concat src/index.css dist/styles.css",
"autoPrefixCss": "node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css",
"compileHtml": "node_modules/.bin/jade src/index.jade -P -o dist"
} }
} }

23
src/examples/card-group.html Normal file
View File

@@ -0,0 +1,23 @@
<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>

7
src/examples/card.html Normal file
View File

@@ -0,0 +1,7 @@
<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>

3
src/examples/centered-icon.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="centeredIcon">
<div class="icon fa fa-phone"></div>
</div>

8
src/examples/centered-prompt.html Normal file
View File

@@ -0,0 +1,8 @@
<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&rsquo;s take a look around.</div>
<div class="centeredPrompt__item button">Begin tour</div>
</div>

18
src/examples/feature-list.html Normal file
View File

@@ -0,0 +1,18 @@
<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&rsquo;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>

13
src/examples/form-footer.html Normal file
View File

@@ -0,0 +1,13 @@
<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>&nbsp;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>

12
src/examples/side-bar.html Normal file
View File

@@ -0,0 +1,12 @@
<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>

15
src/examples/site-header.html Normal file
View File

@@ -0,0 +1,15 @@
<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>

5
src/examples/stepper-input.html Normal file
View File

@@ -0,0 +1,5 @@
<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>

6
src/examples/tabs.html Normal file
View File

@@ -0,0 +1,6 @@
<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>

11
src/index.css Normal file
View File

@@ -0,0 +1,11 @@
@import url("./styles/stepper-input.css");
@import url("./styles/tabs.css");
@import url("./styles/site-header.css");
@import url("./styles/form-footer.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/card.css");
@import url("./styles/card-group.css");

85
src/index.jade Normal file
View File

@@ -0,0 +1,85 @@
doctype html
html(lang='en')
head
title Flexbox Patterns Demo Page
meta(
name="viewport"
content="width=device-width, initial-scale=1"
)
//- Fonts
link(
href="http://fonts.googleapis.com/css?family=Lato:400"
rel="stylesheet"
type="text/css"
)
//- Font aweosome icons
link(
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
)
//- 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;
}
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
.demo
include ./examples/stepper-input.html
// Tabs
.demo
include ./examples/tabs.html

11
src/index.scss
View File

@@ -1,11 +0,0 @@
@import "styles/stepper-input";
@import "styles/tabs";
@import "styles/site-header";
@import "styles/form-footer";
@import "styles/side-bar";
@import "styles/centered-prompt";
@import "styles/centered-icon";
@import "styles/feature-list";
@import "styles/card";
@import "styles/card-group";

6
src/styles/card-group.scss → src/styles/card-group.css
View File

@@ -41,10 +41,10 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
& + & {
border-left: 1px solid #D7DBDD;
} }
.cardGroup__card + .cardGroup__card {
border-left: 1px solid #D7DBDD;
} }
.cardGroup__cardDescription { .cardGroup__cardDescription {

0
src/styles/card.scss → src/styles/card.css
View File

6
src/styles/centered-icon.scss → src/styles/centered-icon.css
View File

@@ -30,7 +30,7 @@
height: 90px; height: 90px;
border-radius: 100%; border-radius: 100%;
box-shadow: box-shadow:
0 2px 1px rgba(#000000, 0.05), 0 2px 1px rgba(0, 0, 0, 0.05),
0 2px 3px rgba(#000000, 0.05), 0 2px 3px rgba(0, 0, 0, 0.05),
0 4px 8px rgba(#000000, 0.05); 0 4px 8px rgba(0, 0, 0, 0.05);
} }

4
src/styles/centered-prompt.scss → src/styles/centered-prompt.css
View File

@@ -31,11 +31,9 @@
padding: 10px; padding: 10px;
} }
.centeredPrompt__item { .centeredPrompt__item + .centeredPrompt__item {
& + & {
margin-top: 5px; margin-top: 5px;
} }
}
.centeredPromptIcon { .centeredPromptIcon {
font-size: 60px; font-size: 60px;

6
src/styles/feature-list.scss → src/styles/feature-list.css
View File

@@ -13,10 +13,10 @@
max-width: 400px; max-width: 400px;
padding: 10px; padding: 10px;
& + & {
border-top: 1px solid #D7DBDD;
} }
.featureListItem + .featureListItem {
border-top: 1px solid #D7DBDD;
} }
.featureListItem--reverse { .featureListItem--reverse {

4
src/styles/form-footer.scss → src/styles/form-footer.css
View File

@@ -34,11 +34,9 @@
align-items: center; align-items: center;
} }
.formFooter__item { .formFooter__item + .formFooter__item {
& + & {
margin-left: 5px; margin-left: 5px;
} }
}
.formFooterFeedback { .formFooterFeedback {
color: #86969C; color: #86969C;

4
src/styles/side-bar.scss → src/styles/side-bar.css
View File

@@ -32,9 +32,9 @@
padding: 5px 10px; padding: 5px 10px;
color: #16A2D7; color: #16A2D7;
font-size: 12px; font-size: 12px;
}
&.is-side-bar-item-selected { .sideBar__item.is-side-bar-item-selected {
background-color: #EEF3F5; background-color: #EEF3F5;
border-radius: 4px; border-radius: 4px;
} }
}

6
src/styles/site-header.scss → src/styles/site-header.css
View File

@@ -34,17 +34,17 @@
.siteHeader__item { .siteHeader__item {
padding: 5px 15px; padding: 5px 15px;
font-size: 12px; font-size: 12px;
}
& + & { .siteHeader__item + .siteHeader__item {
margin-left: 5px; margin-left: 5px;
} }
&.is-site-header-item-selected { .siteHeader__item.is-site-header-item-selected {
color: #FFFFFF; color: #FFFFFF;
background-color: #415F69; background-color: #415F69;
border-radius: 4px; border-radius: 4px;
} }
}
.siteHeaderLogo { .siteHeaderLogo {
font-size: 20px; font-size: 20px;

0
src/styles/stepper-input.scss → src/styles/stepper-input.css
View File

4
src/styles/tabs.scss → src/styles/tabs.css
View File

@@ -15,8 +15,8 @@
color: #16A2D7; color: #16A2D7;
font-size: 12px; font-size: 12px;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
}
&.is-tab-selected { .tab.is-tab-selected {
border-bottom-color: #4EBBE4; border-bottom-color: #4EBBE4;
} }
}