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

Merge pull request #10 from cjcenizal/feature/wrapping-patterns

Browse Source 
Add wrapping patterns.
This commit is contained in:
CJ Cenizal 2016-12-18 12:42:18 -08:00 committed by GitHub
commit a1b5188de0
27 changed files with 663 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/images/dog_1.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
dist/images/dog_2.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
dist/images/dog_3.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
dist/images/dog_4.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
dist/images/dog_5.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

214
dist/index.html vendored
View File

@ -22,77 +22,39 @@
</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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- Centered icon-->
<div class="demo"><div class="centeredIcon">
<div class="icon fa fa-phone"></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>
<!-- Centered prompt-->
<div class="demo"><div class="centeredPrompt">
<div class="centeredPrompt__item centeredPromptIcon">
<div class="icon fa fa-smile-o"></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>
<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>
</div>
<!-- Feature list-->
<div class="demo"><div class="featureListItem">
<div class="featureListItem__icon">
<div class="icon fa fa-calendar"></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 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>
</div>
@ -128,39 +90,115 @@
</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>
<!-- Centered prompt-->
<div class="demo"><div class="centeredPrompt">
<div class="centeredPrompt__item centeredPromptIcon">
<div class="icon fa fa-smile-o"></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 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>
</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&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>
</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-->
<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>
<!-- 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>
<!-- Photo-->
<div class="demo"><div class="photo photo1 photo--large">
Sup, dog
</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>
<!-- Gallery-->
<div class="demo"><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>
</div>
<!-- Mosaic-->
<div class="demo"><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>
</div>

372
dist/styles.css vendored
View File

@ -1,3 +1,6 @@
* {
box-sizing: border-box;
}
/*=====================================================
contents of: styles/stepper-input.css
@ -10,7 +13,6 @@
* This has a similar effect to setting the children
* to have display: inline-block.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@ -57,7 +59,6 @@
* out its children using flexbox, the exact same
* as in the above "Stepper input" example.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -84,7 +85,6 @@
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -93,9 +93,8 @@
* between its children, with the children at either
* end laying flush against the container's edges.
*/
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px;
background-color: #56727C;
@ -106,7 +105,6 @@
* Lay out the children of this container with
* flexbox.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -115,9 +113,8 @@
* the main axis. By default the children will
* align along their top edges.
*/
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
}
.siteHeader__item {
@ -154,26 +151,23 @@
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/**
* Make the container put as much space as possible
* between its children, with the children at either
* end laying flush against the container's edges.
*/
-ms-flex-pack: justify;
justify-content: space-between;
/**
* 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
* between its children, with the children at either
* end laying flush against the container's edges.
*/
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
border-top: 1px solid #D7DBDD;
padding: 10px;
@ -183,16 +177,14 @@
/**
* This container orders items horizontally.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/**
* It aligns them vertically in the center.
*/
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
}
.formFooter__item + .formFooter__item {
@ -206,18 +198,12 @@
}
.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 {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.button--clear {
@ -235,7 +221,6 @@
* rules. By default, this would arrange its children
* horizontally. However, the next property...
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -244,18 +229,16 @@
* horizontal, so now the children are laid out
* vertically, from top to bottom.
*/
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/**
* It will also put as much space as possible
* between its children, with the children at either end
* laying flush against the container's edges.
*/
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
height: 300px;
width: 150px;
@ -284,7 +267,6 @@
* Lay out the children of this container with
* flexbox.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -293,9 +275,16 @@
* are laid out vertically, the same as in the
* above "Side bar" example.
*/
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-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
@ -303,18 +292,8 @@
* "column" this has a similar effect as setting
* text-align: center.
*/
-webkit-align-items: center;
-ms-flex-align: 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;
-ms-flex-align: center;
align-items: center;
min-height: 300px;
padding: 10px;
@ -355,7 +334,6 @@
* Lay out the children of this container with
* flexbox.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -364,25 +342,23 @@
* we'll rotate the main axis so that the children
* are ordered vertically.
*/
-webkit-flex-direction: column;
-ms-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;
-ms-flex-direction: column;
flex-direction: column;
/**
* Same thing here as before: group the children
* together in the center of their container.
*/
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: 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;
font-size: 40px;
@ -403,7 +379,6 @@
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -411,9 +386,8 @@
* 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;
-ms-flex-align: center;
align-items: center;
max-width: 400px;
padding: 10px;
@ -430,9 +404,8 @@
* reverse order of how they appear in the
* markup.
*/
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.featureListItem__icon,
@ -458,7 +431,6 @@
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -466,9 +438,8 @@
* Rotate the main axis so that the children
* are laid out vertically.
*/
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border: 1px solid #CAD0D2;
border-radius: 4px;
@ -480,7 +451,6 @@
* Lay out the children of this container with
* flexbox.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -490,27 +460,24 @@
* First we'll rotate the main axis so that the
* children are laid out vertically.
*/
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/**
* Just like in the "Centered prompt" example,
* 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
* Just like in the "Centered prompt", we'll
* group the children in the center of their
* container.
*/
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
/**
* 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;
}
@ -552,7 +519,6 @@
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -594,9 +560,8 @@
* find more info at:
* github.com/philipwalton/flexbugs.
*/
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
border: none;
border-radius: 0;
@ -613,9 +578,198 @@
* flex-basis is auto, so now the size of its content
* will affect how large it is.
*/
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-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
View File

@ -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
View File

@ -1,6 +1,6 @@
{
"name": "flexbox-patterns",
"version": "0.1.3",
"version": "0.2.0",
"description": "Patterns for using flexbox CSS to build awesome UI components",
"repository": "cjcenizal/flexbox-patterns",
"author": {
@ -11,13 +11,15 @@
"devDependencies": {
"autoprefixer": "6.2.3",
"css-concat": "0.0.4",
"cpx": "1.3.1",
"jade": "1.11.0",
"postcss-cli": "2.3.3"
},
"scripts": {
"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"
"build": "npm run copyImages && npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
"copyImages": "cpx \"src/images/**/*\" dist/images",
"compileCss": "css-concat src/index.css dist/styles.css",
"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
View 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
View 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
View File

@ -0,0 +1,3 @@
<div class="photo photo1 photo--large">
Sup, dog
</div>

BIN
src/images/dog_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/images/dog_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/images/dog_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/images/dog_4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/images/dog_5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

6
src/index.css
View File

@ -1,3 +1,6 @@
* {
box-sizing: border-box;
}
@import url("./styles/stepper-input.css");
@import url("./styles/tabs.css");
@ -9,3 +12,6 @@
@import url("./styles/feature-list.css");
@import url("./styles/card.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
View File

@ -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&rsquo;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&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>
</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>&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>
</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>

52
src/index.jade
View File

@ -44,25 +44,17 @@ html(lang='en')
body
// Card group
// Stepper input
.demo
include ./examples/card-group.html
include ./examples/stepper-input.html
// Card
// Tabs
.demo
include ./examples/card.html
include ./examples/tabs.html
// Centered icon
// Site header
.demo
include ./examples/centered-icon.html
// Centered prompt
.demo
include ./examples/centered-prompt.html
// Feature list
.demo
include ./examples/feature-list.html
include ./examples/site-header.html
// Form footer
.demo
@ -72,14 +64,34 @@ html(lang='en')
.demo
include ./examples/side-bar.html
// Site header
// Centered prompt
.demo
include ./examples/site-header.html
include ./examples/centered-prompt.html
// Stepper input
// Centered icon
.demo
include ./examples/stepper-input.html
include ./examples/centered-icon.html
// Tabs
// Feature list
.demo
include ./examples/tabs.html
include ./examples/feature-list.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

16
src/styles/card.css
View File

@ -32,19 +32,19 @@
flex-direction: column;
/**
* Just like in the "Centered prompt" example,
* we'll align the children in the center, along
* the main axis.
*/
align-items: center;
/**
* And just like in the "Centered prompt", we'll
* Just like in the "Centered prompt", we'll
* group the children in the center of their
* container.
*/
justify-content: center;
/**
* 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;
}

13
src/styles/centered-icon.css
View File

@ -12,18 +12,19 @@
*/
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
* together in the center of their container.
*/
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;
font-size: 40px;
width: 90px;

14
src/styles/centered-prompt.css
View File

@ -12,6 +12,13 @@
*/
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
* the main axis. Because the direction is
@ -20,13 +27,6 @@
*/
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;
padding: 10px;
}

12
src/styles/form-footer.css
View File

@ -6,18 +6,18 @@
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
* between its children, with the children at either
* end laying flush against the container's edges.
*/
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;
padding: 10px;
}

54
src/styles/gallery.css Normal file
View 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
View 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
View 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');
}