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

Add wrapping patterns.
cjcenizal · Dec 18, 2016 · a1b5188 · a1b5188
2 parents 32b10cd + 8379097
commit a1b5188
Show file tree

Hide file tree

Showing 27 changed files with 648 additions and 417 deletions.
diff --git a/dist/images/dog_1.jpg b/dist/images/dog_1.jpg
diff --git a/dist/images/dog_2.jpg b/dist/images/dog_2.jpg
diff --git a/dist/images/dog_3.jpg b/dist/images/dog_3.jpg
diff --git a/dist/images/dog_4.jpg b/dist/images/dog_4.jpg
diff --git a/dist/images/dog_5.jpg b/dist/images/dog_5.jpg
diff --git a/dist/index.html b/dist/index.html
@@ -22,45 +22,71 @@
     </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>
+    <!-- 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>
-    <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>
+    <!-- Tabs-->
+    <div class="demo"><div class="tabs">
+  <div class="tab is-tab-selected">Tab 1</div>
+  <div class="tab">Tab 2</div>
+  <div class="tab">Tab 3</div>
+  <div class="tab">Tab 4</div>
+</div>
+
     </div>
-    <div 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>
+    <!-- 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="card__price">$6,000.00</div>
+    <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
+    <div class="siteHeader__item siteHeaderButton">Sent</div>
+    <div class="siteHeader__item siteHeaderButton">Trash</div>
+  </div>
+  <!-- This section gets pushed to the right side-->
+  <div class="siteHeader__section">
+    <div class="siteHeader__item siteHeaderButton">Settings</div>
+    <div class="siteHeader__item siteHeaderButton">Log out</div>
   </div>
 </div>
 
     </div>
-    <!-- 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>
+    <!-- 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 class="card__price">Costs $5</div>
 </div>
 
     </div>
-    <!-- Centered icon-->
-    <div class="demo"><div class="centeredIcon">
-  <div class="icon fa fa-phone"></div>
+    <!-- Side bar-->
+    <div class="demo"><div class="sideBar">
+  <!-- This section gets pushed to the top-->
+  <div class="sideBar__section">
+    <div class="sideBar__item is-side-bar-item-selected">Inbox</div>
+    <div class="sideBar__item">Contacts</div>
+    <div class="sideBar__item">Account</div>
+  </div>
+  <!-- This section gets pushed to the bottom-->
+  <div class="sideBar__section">
+    <div class="sideBar__item">Change theme</div>
+    <div class="sideBar__item">Legal</div>
+  </div>
 </div>
 
     </div>
@@ -74,6 +100,12 @@
   <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">
@@ -96,71 +128,77 @@
 </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>
+    <!-- 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>
-    <!-- Side bar-->
-    <div class="demo"><div class="sideBar">
-  <!-- This section gets pushed to the top-->
-  <div class="sideBar__section">
-    <div class="sideBar__item is-side-bar-item-selected">Inbox</div>
-    <div class="sideBar__item">Contacts</div>
-    <div class="sideBar__item">Account</div>
-  </div>
-  <!-- This section gets pushed to the bottom-->
-  <div class="sideBar__section">
-    <div class="sideBar__item">Change theme</div>
-    <div class="sideBar__item">Legal</div>
-  </div>
-</div>
-
+    <!-- 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>
-    <!-- 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 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="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 class="card__price">$10.00</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="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>