+
+
diff --git a/peach-patterns/mobile_first b/peach-patterns/mobile_first
new file mode 100644
index 0000000..1f78ffe
--- /dev/null
+++ b/peach-patterns/mobile_first
@@ -0,0 +1,82 @@
+list of attributes to be removed from `peachcloud.css` for mobile
+
+[ tested on Galaxy S5, iPhone 5 ]
+
+@media only screen and (min-width: 350px)
+main {
+ align-items: center;
+}
+
+main {
+ width
+}
+
+card {
+ background-color
+ border-radius
+ /* needed on network_list: maybe set on list-container instead */
+ width: var(--max-width-5);
+ box-shadow
+ margin-top
+ margin-bottom
+}
+
+/* for network_add: may or may not be necessary */
+card-container {
+ padding
+}
+
+list-container {
+ padding
+}
+
+/* network_add: inputs and buttons look nice with this */
+card-container {
+ width: var(--max-width-5);
+}
+
+/* network_add: inputs and buttons look nice with this */
+button {
+ width: 70%;
+ min-width
+ max-width
+ padding
+}
+
+/* needed for desktop (to place bottom nav at bottom of window) */
+html {
+ height: 100%; /* wrecks bottom nav placement on my phone */
+}
+
+/* ADD THIS */
+input {
+ width: 80%;
+}
+-----
+
+testing with peach-web on laptop:
+
+network_card | looks good
+network_list | looks good
+network_add | too small & buttons (best without card-container class)
+network_detail | buttons different sizes
+
+look at the .input attributes
+ - we need to have consistency between button & input (esp. widths)
+
+network_detail
+ - sometimes the background colour is white on my phone
+
+-----
+
+breakpoints:
+
+600px, 900px, 1200px, 1800px
+
+"if you are designing your layout with a mobile-first approach, then use min-width breakpoints and work your way up"
+
+```
+@media only screen (min-width: 600px) {
+ ...
+}
+```
diff --git a/peach-patterns/wifi_alerts.html b/peach-patterns/wifi_alerts.html
new file mode 100644
index 0000000..8b5bffa
--- /dev/null
+++ b/peach-patterns/wifi_alerts.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+ peach-patterns
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+