Added objects.scss and urls.md

leevigraham · Oct 25, 2013 · 451cc05 · 451cc05
1 parent ebe9a2c
commit 451cc05
Show file tree

Hide file tree

Showing 2 changed files with 350 additions and 0 deletions.
diff --git a/objects.scss b/objects.scss
@@ -0,0 +1,282 @@
+/**
+ * Variables
+ */
+
+// Colours. Example green:
+$green-lightest:        #89B100;
+$green-lighter:         #d4df48;
+$green-light:           #bfd03f;
+$green:                 #a9c036;
+$green-dark:            #94b02d;
+$green-darker:          #768d24;
+$green-darkest:         #596a1b;
+$green-quiet:           mix($green, white , 10);
+$green-quiet-border:    $green;
+
+// Spacing
+$spacing-xxsmall:   2px;
+$spacing-xsmall:    4px;
+$spacing-small:     8px;
+$spacing-medium:    16px;
+$spacing-large:     32px;
+$spacing-xlarge:    64px;
+$spacing-xxlarge:   128px;
+
+$lineHeight-xsmall: 1;
+$lineHeight-small:  1.25;
+$lineHeight-medium: 1.5;
+$lineHeight-large:  1.75;
+$lineHeight-xlarge: 2;
+
+// Font Sizes
+$fontSize-xxsmall:  9px;
+$fontSize-xsmall:   10px;
+$fontSize-small:    13px;
+$fontSize-medium:   16px;
+$fontSize-large:    20px;
+$fontSize-xlarge:   24px;
+$fontSize-xxlarge:  32px;
+
+// breakpoints
+$bp-phone:          480px;
+$bp-tablet:         768px;
+$bp-desktop:        1024px;
+$bp-desktop-large:  1440px;
+
+// Unit - Combine with GridCell or other elements.
+// Combined with media queries pseudo
+@mixin FractionalWidths($fractions, $suffix: "", $prefix: "unit-") {
+    @each $fraction in $fractions {
+        @for $i from 1 through $fraction {
+            .#{$prefix}#{$i}of#{$fraction}#{$suffix} {
+                width: percentage($i / $fraction);
+            }
+            .#{$prefix}pull#{$i}of#{$fraction}#{$suffix} {
+                right: percentage($i / $fraction);
+            }
+            .#{$prefix}push#{$i}of#{$fraction}#{$suffix} {
+                left: percentage($i / $fraction);
+            }
+        }
+    }
+}
+
+div[class*="unit-"] {
+  box-sizing: border-box;
+  background: #999;
+  border:1px solid #333;
+  float: left;
+  padding: 10px;
+  height: 20px
+}
+
+@include FractionalWidths(12);
+
+@media all and (min-width: 768px) {
+  div[class*="unit-"] {
+    background: #777;
+  }
+  @include FractionalWidths($fractions: 4, $prefix: "unit-", $suffix:"\@medium");
+}
+
+@media all and (min-width: 1024px) {
+  div[class*="unit-"] {
+    background: #555;
+  }
+  @include FractionalWidths($fractions: 4, $prefix: "unit-", $suffix:"\@large");
+}
+
+// Padding
+.padding-xsmall{}
+.padding-small{}
+.padding-medium{}
+.padding-large{}
+.padding-xlarge{}
+
+.pullLeft{}
+.pullRight{}
+
+// Global
+.is-loading{}
+.is-hidden{}
+.is-collapsed{}
+.is-expanded{}
+.is-fullscreen{}
+
+// JS hooks
+.js-canCollapse{}
+.js-canExapnd{}
+.js-canFullScreen{}
+
+.js-collapseTrigger{}
+.js-expandTrigger{}
+.js-fullscreenTrigger{}
+
+// NavItem
+.is-current{}
+
+// Form, ControlGroup, Control
+.is-valid{}
+.is-invalid{}
+.is-readonly{}
+.is-disabled{}
+
+// Control
+.is-focused{}
+.is-hovered{}
+.is-active{}
+
+// Modules
+.Alert{}
+.Alert--info{}
+.Alert--success{}
+.Alert--warning{}
+.Alert--danger{}
+.Alert-dismissTrigger{}
+
+.Avatar{}
+
+.Badge{}
+.Badge--info{}
+.Badge--success{}
+.Badge--warning{}
+.Badge--danger{}
+
+.ButtonGroup{}
+
+.Button{}
+.Button--block{}
+.Button--info{}
+.Button--success{}
+.Button--warning{}
+.Button--link{}
+
+.Card{}
+.Card-front{}
+.Card-back{}
+.Card-header{}
+.Card-body{}
+.Card-footer{}
+
+.Cart{}
+.Cart-itemCount{}
+.Cart-itemTotal{}
+.Cart-itemCollection{}
+.Cart-header{}
+.Cart-body{}
+.Cart-footer{}
+
+.Figure{}
+.Figure-content{}
+.Figure-caption{}
+
+.Flyout{}
+
+.Form{}
+.Form-header{}
+.Form-body{}
+.Form-footer{}
+
+.ControlGroup{}
+.ControlGroup-label{}
+.ControlGroup-description{}
+.ControlGroup-controls{}
+
+.Control{}
+.Control-label{}
+.Control-description{}
+
+.ControlInput{}
+.ControlInput--text{}
+.ControlInput--email{}
+.ControlInput--textarea{}
+.ControlInput--select{}
+.ControlInput--selectMulti{}
+.ControlInput--checkbox{}
+.ControlInput--radio{}
+.ControlInput--search{}
+.ControlInput--date{}
+.ControlInput--time{}
+.ControlInput--comboBox{}
+
+.Grid{}
+.Grid--withGutters{}
+.GridCell{}
+
+.Icon{}
+
+.Label{}
+.Label--info{}
+.Label--success{}
+.Label--warning{}
+.Label--danger{}
+
+.Modal{}
+.Modal-header{}
+.Modal-title{}
+.Modal-body{}
+.Modal-footer{}
+
+.NavGroup{}
+.NavGroup--title{}
+
+.Nav{}
+.Nav--banner{}
+.Nav--column{}
+.Nav--breadcrumbs{}
+.Nav--keywords{}
+.Nav--tabs{}
+.Nav--pills{}
+
+.Nav-item{}
+
+.Page{}
+.Page-header{}
+.Page-title{}
+.Page-body{}
+.Page-footer{}
+
+.Panel{}
+.Panel-title{}
+.Panel-header{}
+.Panel-body{}
+.Panel-footer{}
+
+.ProgressBar{}
+.ProgressBar-meter{}
+.ProgressBar-meterLabel{}
+
+.Sheet{}
+.Sheet-header{}
+.Sheet-title{}
+.Sheet-body{}
+.Sheet-footer{}
+
+.Seperator{}
+
+.Thumbnail{}
+
+.Toolbar{}
+.Toolbar--primary{}
+
+.Table{}
+.Table--tight{}
+.Table--bordered{}
+.Table--striped{}
+.Table--data{}
+.Table--description{}
+.Table--summary{}
+
+.TableRow{}
+.TableRow--info{}
+.TableRow--success{}
+.TableRow--warning{}
+.TableRow--danger{}
+
+.TableCell{}
+.TableCell--info{}
+.TableCell--success{}
+.TableCell--warning{}
+.TableCell--danger{}
+
+.Tooltip{}
diff --git a/urls.md b/urls.md
@@ -0,0 +1,68 @@
+URLs
+====
+
+BREAD
+-----
+
+*BREAD* (Browse, Read, Edit, Add, Delete) is preferable to CRUD for browser based sites / apps. 
+
+* [B]rowse: GET         `/projects` or `/projects?where[id][]=1&where[id][]=2`
+* [R]ead:   GET         `/projects/1`
+* [E]dit:   PATCH|GET   `/projects/1/edit`
+* [A]dd:    POST|GET    `/projects/add`
+* [D]elete: REMOVE|GET  `/projects/1/delete`
+
+Notes:
+
+* Browse may return a subset of the entity properties and associations
+* Read may return all details of the entity properties and associations
+* Edit, Add and Delete may have GET endpoints for forms / confirmations
+
+URL Query Parameters
+--------------------
+
+Query parameters should be underscore.
+
+References:
+
+* http://www.w3.org/TR/WD-html40-970708/htmlweb.html
+
+### Pagination
+
+Use `?page=` & `?per_page=` for url pagination params. Example: `?page=2&per_page=10`
+
+References:
+
+* https://github.com/whiteoctober/Pagerfanta
+* http://developer.github.com/v3/#pagination
+
+### Partial Responses
+
+Use `?select=` for partial responses. Example: `?select[0]['entity']=Project&select[0]['props'][]=id&select[0]['props'][]=title`
+
+References:
+
+* https://developers.google.com/youtube/2.0/developers_guide_protocol_partial
+* http://docs.doctrine-project.org/en/latest/reference/partial-objects.html
+
+### Search Criteria
+
+Use `?where=` for query criteria. Example: `?where[titleLike]=Proj`
+
+#### Ranges
+
+Suffix ranges with `Range`
+
+Example: `?where[submittedAtRange][start]=2013-31-01&where[submittedAtRange][end]=2013-31-08&where[submittedAtRange][inclusive]=1`
+
+Ranges contain a sub array of paramaters:
+
+* `start`
+* `end`
+* `inclusive`
+
+### Result Ordering
+
+Use `?orderBy=` for sort / ordering. 
+
+Example: `?orderBy[0]['prop']=submittedAt&orderBy[0]['sort']=ASC`