└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | # Functions
  2 | 
  3 | # Mixins
  4 | 
  5 | # Base
  6 | 
  7 | * settings
  8 | * root
  9 | * document
 10 | * links
 11 | * lists
 12 | * media
 13 | * typography
 14 | 
 15 | # Objects
 16 | 
 17 | * margins
 18 | * media
 19 | * block
 20 | * flag
 21 | * grid
 22 | * list bare
 23 | * list inline
 24 | * list stacked
 25 | * list overflow
 26 | 
 27 | ## objects.media
 28 | 
 29 | ### Components
 30 | 
 31 | * Image
 32 | * Body
 33 | 
 34 | ### Modifications
 35 | 
 36 | * Image align horizontal
 37 | * Spacing between elements
 38 | * Compontent is nestable
 39 | 
 40 | ### Styles
 41 | ```css
 42 | .o-media {
 43 | 	display: block;
 44 | }
 45 | 
 46 | .o-media__body {
 47 | 	display: block;
 48 | 	overflow: hidden;
 49 | }
 50 | 
 51 | .u-image--left > .o-media__image {
 52 | 	float: left;
 53 | }
 54 | 
 55 | .u-image--right > .o-media__image {
 56 | 	float: right;
 57 | }
 58 | 
 59 | .u-image--left.u-spacing--base > .o-media__image {
 60 | 	margin-right: $base-spacing;
 61 | }
 62 | 
 63 | .u-image--left.u-spacing--half > .o-media__image {
 64 | 	margin-right: $base-spacing--half;
 65 | }
 66 | 
 67 | .u-image--left.u-spacing--quarter > .o-media__image {
 68 | 	margin-right: $base-spacing--quarter;
 69 | }
 70 | 
 71 | .u-image--left.u-spacing--double > .o-media__image {
 72 | 	margin-right: $base-spacing--double;
 73 | }
 74 | 
 75 | .u-image--left.u-spacing--quadruple > .o-media__image {
 76 | 	margin-right: $base-spacing--quadruple;
 77 | }
 78 | 
 79 | .u-image--right.u-spacing--base > .o-media__image {
 80 | 	margin-left: $base-spacing;
 81 | }
 82 | 
 83 | .u-image--right.u-spacing--half > .o-media__image {
 84 | 	margin-left: $base-spacing--half;
 85 | }
 86 | 
 87 | .u-image--right.u-spacing--quarter > .o-media__image {
 88 | 	margin-left: $base-spacing--quarter;
 89 | }
 90 | 
 91 | .u-image--right.u-spacing--double > .o-media__image {
 92 | 	margin-left: $base-spacing--double;
 93 | }
 94 | 
 95 | .u-image--right.u-spacing--quadruple > .o-media__image {
 96 | 	margin-left: $base-spacing--quadruple;
 97 | }
 98 | ```
 99 | ### Markup
100 | ```html
101 | <div class="o-media [ u-clearfix ] [ u-image--left u-image--right ] [ u-spacing--base u-spacing--half u-spacing--quarter u-spacing--double u-spacing--quadruple ]">
102 | 	<div class="o-media__image"></div>
103 | 	<div class="o-media__body"></div>
104 | </div>
105 | ```
106 | 
107 | ## objects.block
108 | 
109 | ### Components
110 | 
111 | * Header
112 | * Image
113 | * Body
114 | * Footer
115 | 
116 | ### Modifications
117 | 
118 | * Text align
119 | * All components are optional and interchangable
120 | * Image and body can have multiple instances
121 | * Spacing between elements
122 | 
123 | ## objects.flag
124 | 
125 | ### Components
126 | 
127 | * Image
128 | * Body
129 | 
130 | ### Modifications
131 | 
132 | * Image align horizontal
133 | * Body align vertical
134 | * Spacing between elements
135 | * Compontent is nestable
136 | 


--------------------------------------------------------------------------------