Remove SCSS dependency and convert all .scss files into .css.

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.

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; }
+    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; }
+
+  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: 2px solid transparent;
+  }
 
+  .tab.is-tab-selected {
+    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,8 +96,10 @@
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
+
   padding: 10px;
-  background-color: #56727C; }
+  background-color: #56727C;
+}
 
   .siteHeader__section {
     /**
@@ -86,6 +109,7 @@
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+
     /**
      * Align the children in the center, along
      * the main axis. By default the children will
@@ -93,27 +117,38 @@
      */
     -webkit-align-items: center;
         -ms-flex-align: center;
-          align-items: center; }
+            align-items: center;
+  }
 
     .siteHeader__item {
       padding: 5px 15px;
-  font-size: 12px; }
+      font-size: 12px;
+    }
+
     .siteHeader__item + .siteHeader__item {
-    margin-left: 5px; }
+      margin-left: 5px;
+    }
+
     .siteHeader__item.is-site-header-item-selected {
       color: #FFFFFF;
       background-color: #415F69;
-    border-radius: 4px; }
+      border-radius: 4px;
+    }
 
     .siteHeaderLogo {
       font-size: 20px;
       line-height: 0;
-  color: white; }
+      color: white;
+    }
 
     .siteHeaderButton {
       cursor: pointer;
-  color: #D9E9EF; }
+      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,6 +165,7 @@
   -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
@@ -137,8 +174,10 @@
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
+
   border-top: 1px solid #D7DBDD;
-  padding: 10px; }
+  padding: 10px;
+}
 
   .formFooter__section {
     /**
@@ -147,45 +186,49 @@
     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; }
+            align-items: center;
+  }
 
     .formFooter__item + .formFooter__item {
-  margin-left: 5px; }
+      margin-left: 5px;
+    }
 
     .formFooterFeedback {
       color: #86969C;
       font-size: 12px;
-  line-height: 0; }
+      line-height: 0;
+    }
 
     .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); } }
+  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; }
+    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; }
+    margin-top: 5px;
+  }
 
     .centeredPromptIcon {
       font-size: 60px;
-  line-height: 0; }
+      line-height: 0;
+    }
 
     .centeredPromptLabel {
       color: #86969C;
       font-size: 30px;
       font-weight: 700;
-  text-align: center; }
+      text-align: center;
+    }
 
     .centeredPromptDetails {
       color: #86969C;
       font-size: 16px;
       margin-bottom: 10px;
-  text-align: center; }
+      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; }
+  padding: 10px;
+}
+
 .featureListItem + .featureListItem {
-    border-top: 1px solid #D7DBDD; }
+  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; }
+    padding: 5px 15px;
+  }
 
   .featureListItem__icon {
     font-size: 50px;
-  line-height: 0; }
+    line-height: 0;
+  }
 
   .featureListItem__description {
     color: #86969C;
-  font-size: 12px; }
+    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,9 +469,11 @@
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+
   border: 1px solid #CAD0D2;
   border-radius: 4px;
-  overflow: hidden; }
+  overflow: hidden;
+}
 
   .card__description {
     /**
@@ -391,6 +483,7 @@
     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.
@@ -400,6 +493,7 @@
     -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
@@ -408,6 +502,7 @@
     -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
@@ -416,16 +511,20 @@
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
-  padding: 15px; }
+
+    padding: 15px;
+  }
 
     .card__descriptionIcon {
       font-size: 32px;
-  margin-bottom: 10px; }
+      margin-bottom: 10px;
+    }
 
     .card__descriptionText {
       color: #57727C;
       font-size: 12px;
-  text-align: center; }
+      text-align: center;
+    }
 
   .card__price {
     text-align: center;
@@ -434,11 +533,18 @@
     font-weight: 700;
     padding: 5px 15px;
     border-top: 1px solid #D7DBDD;
-  background-color: #EEF3F5; }
+    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,9 +553,11 @@
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+
   border: 1px solid #CAD0D2;
   border-radius: 4px;
-  overflow: hidden; }
+  overflow: hidden;
+}
 
   .cardGroup__card {
     /**
@@ -481,10 +589,14 @@
     -webkit-flex: 1 1 0;
         -ms-flex: 1 1 0;
             flex: 1 1 0;
+
     border: none;
-  border-radius: 0; }
+    border-radius: 0;
+  }
+
   .cardGroup__card + .cardGroup__card {
-    border-left: 1px solid #D7DBDD; }
+    border-left: 1px solid #D7DBDD;
+  }
 
   .cardGroup__cardDescription {
     /**
@@ -495,6 +607,7 @@
      */
     -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
-          flex: 1 1 auto; }
+            flex: 1 1 auto;
+  }
+
 
-/*# sourceMappingURL=styles.css.map */

package.json

@@ -10,13 +10,14 @@
   },
   "devDependencies": {
     "autoprefixer": "6.2.3",
+    "css-concat": "0.0.4",
     "jade": "1.11.0",
     "postcss-cli": "2.3.3"
   },
   "scripts": {
     "build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
-    "compileCss": "sass src/index.scss dist/styles.css",
+    "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"
+    "compileHtml": "node_modules/.bin/jade src/index.jade -P -o dist"
   }
 }

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");

src/index.scss

@@ -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";

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 {

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);
+    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);
 }

src/styles/centered-prompt.css

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

src/styles/feature-list.css

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

src/styles/form-footer.css

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

src/styles/side-bar.css

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

src/styles/site-header.css

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

src/styles/tabs.css

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