diff --git a/README.md b/README.md index 7034570..dc39d53 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 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). 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 for making your CSS cross-browser compatible. -This project also requires you have [SASS](http://sass-lang.com/) installed -(`sudo gem install sass`). - ## Commands `npm run build` -I've chosen to write the styles with SCSS since it's widely adopted and I've -found that it makes me more productive. This command will compile the SCSS into -CSS and add various vendor-prefixed properties. Open up `dist/index.html` -to see a demo page of the various flexbox patterns in the browser. +This command will concatenate the source CSS files into a single CSS file, and +then use PostCSS to add various vendor-prefixed properties. Open up +`dist/index.html` to see a demo page of the various flexbox patterns in the +browser. diff --git a/dist/index.html b/dist/index.html index d387c44..5bb0c37 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,7 +3,7 @@ Flexbox Patterns Demo Page - + + +
+
+
+
+
Trial
+
+
Free!
+
+
+
+
+
Basic tier
(most popular)
+
+
$10.00
+
+
+
+
+
Advanced tier
(only for enterprise-level professionals)
+
+
$6,000.00
+
+
- -
-
-
-
-
-
Trial
-
-
Free!
-
-
-
-
-
Basic tier
(most popular)
-
-
$10.00
-
-
-
-
-
Advanced tier
(only for enterprise-level professionals)
-
-
$6,000.00
-
+
+ +
+
+
+
Science potion
+
+
Costs $5
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
Welcome to the app!
+
Thanks for signing up. Let’s take a look around.
+
Begin tour
+
+ +
+ +
+
+
+
+
The calendar feature makes scheduling a snap.
+
+
+
+
+
+
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
+
+
+
+
+
+
You can get notified by email or SMS.
+
+ +
+ +
+ +
+
+  Saving...
- - -
-
-
-
-
Science potion
-
-
Costs $5
-
+ +
+
Reset
+
Save
+
- -
-
-
+ +
+ +
+
Inbox
+
Contacts
+
Account
- - -
-
-
-
-
-
Welcome to the app!
-
Thanks for signing up. Let’s take a look around.
-
Begin tour
-
+ +
+
Legal
+
- -
-
-
-
-
-
The calendar feature makes scheduling a snap.
-
-
-
-
-
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
-
-
-
-
-
-
You can get notified by email or SMS.
+ +
+ +
+ +
Inbox
+
Sent
+
Trash
- - -
-
- -
-
-  Saving... -
-
- -
-
Reset
-
Save
-
-
+ +
+
Settings
+
- -
-
- -
-
Inbox
-
Contacts
-
Account
-
- -
-
Legal
-
-
+ +
+ + + +
- -
-
- -
- -
Inbox
-
Sent
-
Trash
-
- -
-
Settings
-
-
+ +
+
Tab 1
+
Tab 2
+
Tab 3
+
Tab 4
+
- -
-
- - -
-
- - -
-
-
Tab 1
-
Tab 2
-
Tab 3
-
Tab 4
-
-
- - + \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css index 4fc754f..b00da20 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1,3 +1,7 @@ + +/*===================================================== + contents of: styles/stepper-input.css + =====================================================*/ .stepperInput { /** * Setting display to flex makes this container lay @@ -8,13 +12,15 @@ */ display: -webkit-flex; display: -ms-flexbox; - display: flex; } + display: flex; +} -.stepperInput__input { - border-left: 0; - border-right: 0; - width: 60px; - text-align: center; } + .stepperInput__input { + border-left: 0; + border-right: 0; + width: 60px; + text-align: center; + } .button { cursor: pointer; @@ -23,22 +29,28 @@ background-color: #4EBBE4; font-size: 12px; border: 1px solid #16A2D7; - border-radius: 4px; } + border-radius: 4px; +} .button--addOnLeft { border-top-right-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; +} .button--addOnRight { border-top-left-radius: 0; - border-bottom-left-radius: 0; } + border-bottom-left-radius: 0; +} .input { border: 1px solid #D7DBDD; padding: 0 10px; border-radius: 0; - box-shadow: none; } - + box-shadow: none; +} +/*===================================================== + contents of: styles/tabs.css + =====================================================*/ .tabs { /** * Setting display to flex makes this container lay @@ -48,17 +60,25 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; - border-bottom: 1px solid #D7DBDD; } -.tab { - cursor: pointer; - padding: 5px 30px; - color: #16A2D7; - font-size: 12px; - border-bottom: 2px solid transparent; } + border-bottom: 1px solid #D7DBDD; +} + + .tab { + cursor: pointer; + padding: 5px 30px; + color: #16A2D7; + font-size: 12px; + border-bottom: 2px solid transparent; + } + .tab.is-tab-selected { - border-bottom-color: #4EBBE4; } + border-bottom-color: #4EBBE4; + } +/*===================================================== + contents of: styles/site-header.css + =====================================================*/ .siteHeader { /** * Lay out the children of this container with @@ -67,6 +87,7 @@ 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 @@ -75,45 +96,59 @@ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; + padding: 10px; - background-color: #56727C; } + background-color: #56727C; +} -.siteHeader__section { - /** - * Lay out the children of this container with - * flexbox. - */ - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /** - * Align the children in the center, along - * the main axis. By default the children will - * align along their top edges. - */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } + .siteHeader__section { + /** + * Lay out the children of this container with + * flexbox. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -.siteHeader__item { - padding: 5px 15px; - font-size: 12px; } - .siteHeader__item + .siteHeader__item { - margin-left: 5px; } - .siteHeader__item.is-site-header-item-selected { - color: #FFFFFF; - background-color: #415F69; - border-radius: 4px; } + /** + * Align the children in the center, along + * the main axis. By default the children will + * align along their top edges. + */ + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } -.siteHeaderLogo { - font-size: 20px; - line-height: 0; - color: white; } + .siteHeader__item { + padding: 5px 15px; + font-size: 12px; + } -.siteHeaderButton { - cursor: pointer; - color: #D9E9EF; } + .siteHeader__item + .siteHeader__item { + margin-left: 5px; + } + .siteHeader__item.is-site-header-item-selected { + color: #FFFFFF; + background-color: #415F69; + border-radius: 4px; + } + + .siteHeaderLogo { + font-size: 20px; + line-height: 0; + color: white; + } + + .siteHeaderButton { + cursor: pointer; + color: #D9E9EF; + } + +/*===================================================== + contents of: styles/form-footer.css + =====================================================*/ .formFooter { /** * Lay out the children of this container with @@ -122,6 +157,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Align the children in the center, along * the main axis, which is horizontal in this case. @@ -129,63 +165,70 @@ -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. - */ + + /** + * 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; + border-top: 1px solid #D7DBDD; - padding: 10px; } + padding: 10px; +} -.formFooter__section { - /** - * 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; } + .formFooter__section { + /** + * This container orders items horizontally. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -.formFooter__item + .formFooter__item { - margin-left: 5px; } + /** + * It aligns them vertically in the center. + */ + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } -.formFooterFeedback { - color: #86969C; - font-size: 12px; - line-height: 0; } + .formFooter__item + .formFooter__item { + margin-left: 5px; + } -.formFooterSpinner { - -webkit-animation: formFooterSpinner 1s infinite steps(8, end); - animation: formFooterSpinner 1s infinite steps(8, end); } + .formFooterFeedback { + color: #86969C; + font-size: 12px; + line-height: 0; + } + + .formFooterSpinner { + -webkit-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); } } + 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% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } +} + .button--clear { color: #16A2D7; background-color: #FFFFFF; - border: 1px solid #FFFFFF; } + border: 1px solid #FFFFFF; +} +/*===================================================== + contents of: styles/side-bar.css + =====================================================*/ .sideBar { /** * This container orders items according to flexbox @@ -195,6 +238,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * ...sets the main axis to be vertical instead of * horizontal, so now the children are laid out @@ -203,6 +247,7 @@ -webkit-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 @@ -211,21 +256,29 @@ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; + height: 300px; width: 150px; border-right: 1px solid #D7DBDD; background-color: #FCFDFD; - padding: 10px; } + padding: 10px; +} + + .sideBar__item { + cursor: pointer; + padding: 5px 10px; + color: #16A2D7; + font-size: 12px; + } -.sideBar__item { - cursor: pointer; - padding: 5px 10px; - color: #16A2D7; - font-size: 12px; } .sideBar__item.is-side-bar-item-selected { background-color: #EEF3F5; - border-radius: 4px; } + border-radius: 4px; + } +/*===================================================== + contents of: styles/centered-prompt.css + =====================================================*/ .centeredPrompt { /** * Lay out the children of this container with @@ -234,6 +287,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Rotate the main axis so that the children * are laid out vertically, the same as in the @@ -242,6 +296,7 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + /** * Align the children in the center, along * the main axis. Because the direction is @@ -251,6 +306,7 @@ -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 @@ -259,31 +315,41 @@ -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + min-height: 300px; - padding: 10px; } + padding: 10px; +} -.centeredPrompt__item + .centeredPrompt__item { - margin-top: 5px; } + .centeredPrompt__item + .centeredPrompt__item { + margin-top: 5px; + } -.centeredPromptIcon { - font-size: 60px; - line-height: 0; } + .centeredPromptIcon { + font-size: 60px; + line-height: 0; + } -.centeredPromptLabel { - color: #86969C; - font-size: 30px; - font-weight: 700; - text-align: center; } + .centeredPromptLabel { + color: #86969C; + font-size: 30px; + font-weight: 700; + text-align: center; + } -.centeredPromptDetails { - color: #86969C; - font-size: 16px; - margin-bottom: 10px; - text-align: center; } + .centeredPromptDetails { + color: #86969C; + font-size: 16px; + margin-bottom: 10px; + text-align: center; + } .icon { - color: #BCD2DA; } + color: #BCD2DA; +} +/*===================================================== + contents of: styles/centered-icon.css + =====================================================*/ .centeredIcon { /** * Lay out the children of this container with @@ -292,6 +358,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * As in the above "Centered prmopt" example, * we'll rotate the main axis so that the children @@ -300,6 +367,7 @@ -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. @@ -307,6 +375,7 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; + /** * Same thing here as before: group the children * together in the center of their container. @@ -314,13 +383,21 @@ -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + border: 1px solid #D7DBDD; font-size: 40px; width: 90px; height: 90px; 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 { /** * Lay out the children of this container with @@ -329,6 +406,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Align the children in the center, along * the main axis, which is horizontal in this case. @@ -336,10 +414,14 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; + max-width: 400px; - padding: 10px; } - .featureListItem + .featureListItem { - border-top: 1px solid #D7DBDD; } + padding: 10px; +} + +.featureListItem + .featureListItem { + border-top: 1px solid #D7DBDD; +} .featureListItem--reverse { /** @@ -350,20 +432,27 @@ */ -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } + flex-direction: row-reverse; +} -.featureListItem__icon, -.featureListItem__description { - padding: 5px 15px; } + .featureListItem__icon, + .featureListItem__description { + padding: 5px 15px; + } -.featureListItem__icon { - font-size: 50px; - line-height: 0; } + .featureListItem__icon { + font-size: 50px; + line-height: 0; + } -.featureListItem__description { - color: #86969C; - font-size: 12px; } + .featureListItem__description { + color: #86969C; + font-size: 12px; + } +/*===================================================== + contents of: styles/card.css + =====================================================*/ .card { /** * Lay out the children of this container with @@ -372,6 +461,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Rotate the main axis so that the children * are laid out vertically. @@ -379,66 +469,82 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + border: 1px solid #CAD0D2; border-radius: 4px; - overflow: hidden; } + overflow: hidden; +} -.card__description { - /** - * Lay out the children of this container with - * flexbox. - */ - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /** - * We're going to lay out this element's children - * just like in the "Centered prompt" example. - * 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; - /** - * 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 - * group the children in the center of their - * container. - */ - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - padding: 15px; } + .card__description { + /** + * Lay out the children of this container with + * flexbox. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -.card__descriptionIcon { - font-size: 32px; - margin-bottom: 10px; } + /** + * We're going to lay out this element's children + * just like in the "Centered prompt" example. + * 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; -.card__descriptionText { - color: #57727C; - font-size: 12px; - text-align: center; } + /** + * 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; -.card__price { - text-align: center; - color: #57727C; - font-size: 12px; - font-weight: 700; - padding: 5px 15px; - border-top: 1px solid #D7DBDD; - background-color: #EEF3F5; } + /** + * And 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; + + padding: 15px; + } + + .card__descriptionIcon { + font-size: 32px; + margin-bottom: 10px; + } + + .card__descriptionText { + color: #57727C; + font-size: 12px; + text-align: center; + } + + .card__price { + text-align: center; + color: #57727C; + font-size: 12px; + font-weight: 700; + padding: 5px 15px; + border-top: 1px solid #D7DBDD; + background-color: #EEF3F5; + } .card--fixedWidth { - max-width: 120px; } - + max-width: 120px; +} +/*===================================================== + contents of: index.css + =====================================================*/ +/*===================================================== + contents of: styles/card-group.css + =====================================================*/ .cardGroup { /** * Lay out the children of this container with @@ -447,54 +553,61 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + border: 1px solid #CAD0D2; border-radius: 4px; - overflow: hidden; } + overflow: hidden; +} + + .cardGroup__card { + /** + * The flex property is a short-hand for setting + * the flex-shrink, flex-grow, and flex-basis + * properties. These properties control how the + * element resizes to fill its container. + * + * We'll also set flex-grow to 1 so that it + * will expand to fill its container. (The + * default value is 1.) + * + * We'll set flex-shrink to 1 so that the element + * will shrink as its container gets smaller. + * (The default value is 0.) + * + * 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 and siblings, but + * they will all have the same size, even if they + * have different amounts of content. + */ + -webkit-flex: 1 1 0; + -ms-flex: 1 1 0; + flex: 1 1 0; + + border: none; + border-radius: 0; + } -.cardGroup__card { - /** - * The flex property is a short-hand for setting - * the flex-shrink, flex-grow, and flex-basis - * properties. These properties control how the - * element resizes to fill its container. - * - * We'll also set flex-grow to 1 so that it - * will expand to fill its container. (The - * default value is 1.) - * - * We'll set flex-shrink to 1 so that the element - * will shrink as its container gets smaller. - * (The default value is 0.) - * - * 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 and siblings, but - * they will all have the same size, even if they - * have different amounts of content. - */ - -webkit-flex: 1 1 0; - -ms-flex: 1 1 0; - flex: 1 1 0; - border: none; - border-radius: 0; } .cardGroup__card + .cardGroup__card { - border-left: 1px solid #D7DBDD; } + border-left: 1px solid #D7DBDD; + } + + .cardGroup__cardDescription { + /** + * We're doing almost the exact same thing here as + * we did above. The difference is that its + * 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; + } -.cardGroup__cardDescription { - /** - * We're doing almost the exact same thing here as - * we did above. The difference is that its - * 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; } -/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/package.json b/package.json index bf2d650..893eed5 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,14 @@ }, "devDependencies": { "autoprefixer": "6.2.3", + "css-concat": "0.0.4", + "jade": "1.11.0", "postcss-cli": "2.3.3" }, "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" } } diff --git a/src/examples/card-group.html b/src/examples/card-group.html new file mode 100644 index 0000000..cea107c --- /dev/null +++ b/src/examples/card-group.html @@ -0,0 +1,23 @@ +
+
+
+
+
Trial
+
+
Free!
+
+
+
+
+
Basic tier
(most popular)
+
+
$10.00
+
+
+
+
+
Advanced tier
(only for enterprise-level professionals)
+
+
$6,000.00
+
+
diff --git a/src/examples/card.html b/src/examples/card.html new file mode 100644 index 0000000..910e46f --- /dev/null +++ b/src/examples/card.html @@ -0,0 +1,7 @@ +
+
+
+
Science potion
+
+
Costs $5
+
diff --git a/src/examples/centered-icon.html b/src/examples/centered-icon.html new file mode 100644 index 0000000..f38b01e --- /dev/null +++ b/src/examples/centered-icon.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/src/examples/centered-prompt.html b/src/examples/centered-prompt.html new file mode 100644 index 0000000..961de3c --- /dev/null +++ b/src/examples/centered-prompt.html @@ -0,0 +1,8 @@ +
+
+
+
+
Welcome to the app!
+
Thanks for signing up. Let’s take a look around.
+
Begin tour
+
diff --git a/src/examples/feature-list.html b/src/examples/feature-list.html new file mode 100644 index 0000000..2546603 --- /dev/null +++ b/src/examples/feature-list.html @@ -0,0 +1,18 @@ +
+
+
+
+
The calendar feature makes scheduling a snap.
+
+
+
+
+
+
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
+
+
+
+
+
+
You can get notified by email or SMS.
+
diff --git a/src/examples/form-footer.html b/src/examples/form-footer.html new file mode 100644 index 0000000..6786220 --- /dev/null +++ b/src/examples/form-footer.html @@ -0,0 +1,13 @@ +
+ +
+
+  Saving... +
+
+ +
+
Reset
+
Save
+
+
diff --git a/src/examples/side-bar.html b/src/examples/side-bar.html new file mode 100644 index 0000000..39b9bdb --- /dev/null +++ b/src/examples/side-bar.html @@ -0,0 +1,12 @@ +
+ +
+
Inbox
+
Contacts
+
Account
+
+ +
+
Legal
+
+
diff --git a/src/examples/site-header.html b/src/examples/site-header.html new file mode 100644 index 0000000..df7575b --- /dev/null +++ b/src/examples/site-header.html @@ -0,0 +1,15 @@ +
+ +
+ +
Inbox
+
Sent
+
Trash
+
+ +
+
Settings
+
+
diff --git a/src/examples/stepper-input.html b/src/examples/stepper-input.html new file mode 100644 index 0000000..56bbf1a --- /dev/null +++ b/src/examples/stepper-input.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/src/examples/tabs.html b/src/examples/tabs.html new file mode 100644 index 0000000..08ef746 --- /dev/null +++ b/src/examples/tabs.html @@ -0,0 +1,6 @@ +
+
Tab 1
+
Tab 2
+
Tab 3
+
Tab 4
+
diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..76db4ab --- /dev/null +++ b/src/index.css @@ -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"); diff --git a/src/index.jade b/src/index.jade new file mode 100644 index 0000000..171c830 --- /dev/null +++ b/src/index.jade @@ -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 diff --git a/src/index.scss b/src/index.scss deleted file mode 100644 index f6ac3a4..0000000 --- a/src/index.scss +++ /dev/null @@ -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"; diff --git a/src/styles/card-group.scss b/src/styles/card-group.css similarity index 95% rename from src/styles/card-group.scss rename to src/styles/card-group.css index fa8b901..45eabf0 100644 --- a/src/styles/card-group.scss +++ b/src/styles/card-group.css @@ -41,10 +41,10 @@ border: none; border-radius: 0; + } - & + & { - border-left: 1px solid #D7DBDD; - } + .cardGroup__card + .cardGroup__card { + border-left: 1px solid #D7DBDD; } .cardGroup__cardDescription { diff --git a/src/styles/card.scss b/src/styles/card.css similarity index 100% rename from src/styles/card.scss rename to src/styles/card.css diff --git a/src/styles/centered-icon.scss b/src/styles/centered-icon.css similarity index 86% rename from src/styles/centered-icon.scss rename to src/styles/centered-icon.css index 165b422..fe22e1d 100644 --- a/src/styles/centered-icon.scss +++ b/src/styles/centered-icon.css @@ -30,7 +30,7 @@ height: 90px; border-radius: 100%; box-shadow: - 0 2px 1px rgba(#000000, 0.05), - 0 2px 3px rgba(#000000, 0.05), - 0 4px 8px rgba(#000000, 0.05); -} \ No newline at end of file + 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); +} diff --git a/src/styles/centered-prompt.scss b/src/styles/centered-prompt.css similarity index 93% rename from src/styles/centered-prompt.scss rename to src/styles/centered-prompt.css index b3f3127..02349e9 100644 --- a/src/styles/centered-prompt.scss +++ b/src/styles/centered-prompt.css @@ -31,10 +31,8 @@ padding: 10px; } - .centeredPrompt__item { - & + & { - margin-top: 5px; - } + .centeredPrompt__item + .centeredPrompt__item { + margin-top: 5px; } .centeredPromptIcon { @@ -58,4 +56,4 @@ .icon { color: #BCD2DA; -} \ No newline at end of file +} diff --git a/src/styles/feature-list.scss b/src/styles/feature-list.css similarity index 88% rename from src/styles/feature-list.scss rename to src/styles/feature-list.css index 7060bf2..fc8cec7 100644 --- a/src/styles/feature-list.scss +++ b/src/styles/feature-list.css @@ -4,7 +4,7 @@ * flexbox, which is horizontal by default. */ display: flex; - + /** * Align the children in the center, along * the main axis, which is horizontal in this case. @@ -13,10 +13,10 @@ max-width: 400px; padding: 10px; - - & + & { - border-top: 1px solid #D7DBDD; - } +} + +.featureListItem + .featureListItem { + border-top: 1px solid #D7DBDD; } .featureListItem--reverse { @@ -29,7 +29,7 @@ flex-direction: row-reverse; } - .featureListItem__icon, + .featureListItem__icon, .featureListItem__description { padding: 5px 15px; } @@ -42,4 +42,4 @@ .featureListItem__description { color: #86969C; font-size: 12px; - } \ No newline at end of file + } diff --git a/src/styles/form-footer.scss b/src/styles/form-footer.css similarity index 88% rename from src/styles/form-footer.scss rename to src/styles/form-footer.css index 4c89fdc..f203dcc 100644 --- a/src/styles/form-footer.scss +++ b/src/styles/form-footer.css @@ -27,17 +27,15 @@ * This container orders items horizontally. */ display: flex; - + /** * It aligns them vertically in the center. */ align-items: center; } - .formFooter__item { - & + & { - margin-left: 5px; - } + .formFooter__item + .formFooter__item { + margin-left: 5px; } .formFooterFeedback { @@ -47,7 +45,7 @@ } .formFooterSpinner { - animation: formFooterSpinner 1s infinite steps(8, end); + animation: formFooterSpinner 1s infinite steps(8, end); } @keyframes formFooterSpinner { @@ -59,4 +57,4 @@ color: #16A2D7; background-color: #FFFFFF; border: 1px solid #FFFFFF; -} \ No newline at end of file +} diff --git a/src/styles/side-bar.scss b/src/styles/side-bar.css similarity index 88% rename from src/styles/side-bar.scss rename to src/styles/side-bar.css index 0bf9ecb..a4103a1 100644 --- a/src/styles/side-bar.scss +++ b/src/styles/side-bar.css @@ -32,9 +32,9 @@ padding: 5px 10px; color: #16A2D7; font-size: 12px; + } - &.is-side-bar-item-selected { - background-color: #EEF3F5; - border-radius: 4px; - } - } \ No newline at end of file + .sideBar__item.is-side-bar-item-selected { + background-color: #EEF3F5; + border-radius: 4px; + } diff --git a/src/styles/site-header.scss b/src/styles/site-header.css similarity index 81% rename from src/styles/site-header.scss rename to src/styles/site-header.css index 0248652..e12827b 100644 --- a/src/styles/site-header.scss +++ b/src/styles/site-header.css @@ -34,16 +34,16 @@ .siteHeader__item { padding: 5px 15px; font-size: 12px; + } - & + & { - margin-left: 5px; - } + .siteHeader__item + .siteHeader__item { + margin-left: 5px; + } - &.is-site-header-item-selected { - color: #FFFFFF; - background-color: #415F69; - border-radius: 4px; - } + .siteHeader__item.is-site-header-item-selected { + color: #FFFFFF; + background-color: #415F69; + border-radius: 4px; } .siteHeaderLogo { @@ -55,4 +55,4 @@ .siteHeaderButton { cursor: pointer; color: #D9E9EF; - } \ No newline at end of file + } diff --git a/src/styles/stepper-input.scss b/src/styles/stepper-input.css similarity index 100% rename from src/styles/stepper-input.scss rename to src/styles/stepper-input.css diff --git a/src/styles/tabs.scss b/src/styles/tabs.css similarity index 83% rename from src/styles/tabs.scss rename to src/styles/tabs.css index b1150e7..ec27601 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.css @@ -15,8 +15,8 @@ color: #16A2D7; font-size: 12px; border-bottom: 2px solid transparent; - - &.is-tab-selected { - border-bottom-color: #4EBBE4; - } + } + + .tab.is-tab-selected { + border-bottom-color: #4EBBE4; }