mai 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. data/README.md +1 -1
  2. data/lib/mai/version.rb +1 -1
  3. data/sass/mai/_base.sass +21 -0
  4. data/sass/mai/_config.sass +23 -2
  5. data/sass/mai/base/_base.sass +23 -13
  6. data/sass/mai/base/_helpers.sass +19 -6
  7. data/sass/mai/config/_base.sass +11 -5
  8. data/sass/mai/config/_colors.sass +42 -11
  9. data/sass/mai/config/_global.sass +13 -15
  10. data/sass/mai/config/_media.sass +49 -13
  11. data/sass/mai/config/modules/_grid.sass +181 -0
  12. data/sass/mai/modules/_grid.sass +12 -3
  13. data/sass/mai/modules/_transitions.sass +29 -0
  14. data/sass/mai/modules/_ui.sass +21 -0
  15. data/sass/mai/modules/grid/_base.sass +23 -143
  16. data/sass/mai/modules/grid/_block.sass +3 -0
  17. data/sass/mai/modules/grid/_media.sass +2 -1
  18. data/sass/mai/modules/grid/media/_base.sass +14 -88
  19. data/sass/mai/modules/grid/media/_block.sass +9 -0
  20. data/sass/mai/modules/transitions/_base.sass +38 -0
  21. data/sass/mai/modules/transitions/_bounce.sass +38 -0
  22. data/sass/mai/modules/transitions/_fade.sass +143 -0
  23. data/sass/mai/modules/transitions/_flash.sass +25 -0
  24. data/sass/mai/modules/transitions/_flip.sass +117 -0
  25. data/sass/mai/modules/transitions/_pulse.sass +44 -0
  26. data/sass/mai/modules/transitions/_scale.sass +61 -0
  27. data/sass/mai/modules/transitions/_shake.sass +38 -0
  28. data/sass/mai/modules/transitions/_slide.sass +82 -0
  29. data/sass/mai/modules/transitions/_tada.sass +52 -0
  30. data/sass/mai/themes/_pinky.sass +10 -0
  31. data/sass/mai/themes/pinky/_colors.sass +0 -1
  32. data/sass/mai/utils/_context.sass +44 -12
  33. data/sass/mai/utils/_global.sass +9 -5
  34. data/sass/mai/utils/_media.sass +33 -17
  35. data/sass/mai/utils/_mobile.sass +8 -4
  36. data/sass/mai/utils/_rgba.sass +37 -8
  37. data/sass/mai/utils/_ui.sass +11 -26
  38. metadata +25 -7
  39. checksums.yaml +0 -15
  40. data/sass/mai/config/_grid.sass +0 -17
  41. data/sass/mai/modules/grid/_functions.sass +0 -11
data/README.md CHANGED
@@ -1,4 +1,4 @@
1
- Mai
1
+ Mai [![Gem Version](https://badge.fury.io/rb/mai.svg)](http://badge.fury.io/rb/mai)
2
2
  =====================
3
3
 
4
4
  Mai is a baseline CSS framework written in SASS. Its main purpose is to provide simplistic cross-browser normalization,
@@ -1,3 +1,3 @@
1
1
  module Mai
2
- VERSION = "0.0.3"
2
+ VERSION = "0.0.5"
3
3
  end
@@ -1,3 +1,24 @@
1
+ /*
2
+ * Base
3
+ *
4
+ * The Base package provides normalization across browsers along with some helper classes to make dealing with common
5
+ * tasks easier. It is a strict requirement for all other specific modules to work coherently and is therefore not
6
+ * contained in the 'modules' directory.
7
+ *
8
+ * @package Mai/Base
9
+ * @copyright 2013-2014 Muyo
10
+ * @link http://github.com/muyo/mai
11
+ * ------------------------------------------------------------------------------------------------------------------- /
12
+
13
+ /* External dependencies
14
+ ----------------------------------------------------------------------------------------------------------------------
15
+
16
+ @import config
17
+ @import utils
18
+
19
+
20
+ /* Package files
21
+ ----------------------------------------------------------------------------------------------------------------------
1
22
 
2
23
  @import base/base
3
24
  @import base/helpers
@@ -1,5 +1,26 @@
1
+ /*
2
+ * Config
3
+ *
4
+ * Provides configuration variables, functions and mixins used throughout all modules in Mai. In itself it does not
5
+ * generate any CSS and - since all variables/functions/mixins are prefixed - is safe to be included in your project
6
+ * as a whole and it is in fact recommended to do so.
7
+ *
8
+ * The imports are organized in an order so that all dependencies are met.
9
+ *
10
+ * @package Mai/Config
11
+ * @copyright 2013-2014 Muyo
12
+ * @link http://github.com/muyo/mai
13
+ * ------------------------------------------------------------------------------------------------------------------- /
14
+
15
+ /* Package files
16
+ ----------------------------------------------------------------------------------------------------------------------
1
17
 
2
18
  @import config/global
19
+ @import config/colors
3
20
  @import config/base
4
- @import config/grid
5
- @import config/media
21
+ @import config/media
22
+
23
+ /* Module configuration
24
+ ----------------------------------------------------------------------------------------------------------------------
25
+
26
+ @import config/modules/grid
@@ -1,12 +1,17 @@
1
-
2
- /* Requires
3
- /* - Configs: global, base
4
-
5
- /* Placeholders
1
+ /*
2
+ * Base
3
+ *
4
+ * @package Mai/Base
5
+ * @copyright 2013-2014 Muyo
6
+ * @link http://github.com/muyo/mai
7
+ * ------------------------------------------------------------------------------------------------------------------- /
8
+
9
+ /* Box-sizing (border-box)
6
10
  ----------------------------------------------------------------------------------------------------------------------
11
+ Breaks IE compat below IE8. You'll need a box-sizing polyfill to get Mai to work in those.
7
12
 
8
- %lead
9
- font-size: $m-type-lead-font-size
13
+ *, *:before, *:after
14
+ +box-sizing
10
15
 
11
16
 
12
17
  /* Reset
@@ -52,8 +57,6 @@ audio:not([controls])
52
57
  p
53
58
  margin-bottom: $m-type-p-margin-bottom
54
59
  line-height: $m-type-p-line-height
55
- &.lead
56
- @extend %lead
57
60
 
58
61
  aside
59
62
  font-size: $m-type-aside-font-size
@@ -239,11 +242,11 @@ button, input
239
242
  button, select
240
243
  text-transform: none
241
244
 
242
- button, html input[type="button"], input[type="reset"], input[type="submit"]
245
+ button, input[type="button"], input[type="reset"], input[type="submit"]
243
246
  -webkit-appearance: button
244
247
  cursor: pointer
245
248
 
246
- button[disabled], html input[disabled]
249
+ button[disabled], input[disabled]
247
250
  cursor: default
248
251
 
249
252
  input[type="checkbox"], input[type="radio"]
@@ -262,14 +265,21 @@ button::-moz-focus-inner, input::-moz-focus-inner
262
265
  padding: 0
263
266
 
264
267
  textarea
268
+ height: auto
269
+ min-height: 6em
265
270
  overflow: auto
266
271
  vertical-align: top
267
- height: auto
268
- min-height: 50px
272
+ line-height: 1.4em
273
+ resize: vertical
269
274
 
270
275
  select
271
276
  width: 100%
272
277
 
278
+ label
279
+ cursor: pointer
280
+ font-size: .9em
281
+ font-weight: bold
282
+
273
283
 
274
284
  /* Tables
275
285
  ----------------------------------------------------------------------------------------------------------------------
@@ -1,15 +1,28 @@
1
+ /*
2
+ * Helpers
3
+ *
4
+ * @package Mai/Base
5
+ * @copyright 2013-2014 Muyo
6
+ * @link http://github.com/muyo/mai
7
+ * ------------------------------------------------------------------------------------------------------------------- /
1
8
 
2
- /* Helpers
3
- ----------------------------------------------------------------------------------------------------------------------
9
+ .hidden
10
+ display: none
4
11
 
5
- .left
12
+ .float-left
6
13
  float: left
7
14
 
8
- .right
15
+ .float-right
9
16
  float: right
10
17
 
11
- .hide
12
- display: none
18
+ .text-right
19
+ text-align: $m-global-float-opposite
20
+
21
+ .text-left
22
+ text-align: $m-global-float-base
23
+
24
+ .text-justify
25
+ text-align: justify
13
26
 
14
27
  // Note: Not within mai/media/print to ensure this class works properly even if media/print is not inlined but loaded
15
28
  // as a separate stylesheet with a different meta media attribute.
@@ -1,7 +1,12 @@
1
-
2
- @import global
3
-
4
- /* BASE USER INTERFACE
1
+ /*
2
+ * Base
3
+ *
4
+ * Basic settings for the UI, including typography, borders etc.
5
+ *
6
+ * @package Mai/Config
7
+ * @copyright 2013-2014 Muyo
8
+ * @link http://github.com/muyo/mai
9
+ * ------------------------------------------------------------------------------------------------------------------- /
5
10
 
6
11
  /*----------------------------------------------------------------------------------------------------------------------
7
12
  Borders
@@ -21,7 +26,6 @@ $m-ui-border-radius-big: 2*$m-ui-border-radius-medium !default
21
26
  /* Mixins
22
27
  ----------------------------------------------------------------------------------------------------------------------
23
28
 
24
- // Borders
25
29
  =m-ui-border-default
26
30
  border: $m-ui-border-default
27
31
 
@@ -62,6 +66,8 @@ $m-type-text-color-highlight-less: $m-color-highlight-less !default
62
66
 
63
67
  $m-type-a-color-base: $m-type-text-color-highlight !default
64
68
  $m-type-a-color-hover: $m-type-text-color-highlight-less !default
69
+ $m-type-a-color-reverse: $m-type-a-color-hover
70
+ $m-type-a-color-reverse-hover: $m-type-a-color-base
65
71
  $m-type-a-text-decoration: none !default
66
72
 
67
73
 
@@ -1,17 +1,48 @@
1
+ /*
2
+ * Colors
3
+ *
4
+ * Contains variables and functions used to create a base color palette.
5
+ *
6
+ * @package Mai/Config
7
+ * @copyright 2013-2014 Muyo
8
+ * @link http://github.com/muyo/mai
9
+ * ------------------------------------------------------------------------------------------------------------------- /
1
10
 
2
- /* Default colors
11
+ /* Base colors
3
12
  ----------------------------------------------------------------------------------------------------------------------
4
13
 
5
- $m-color-foreground: #222 !default
6
- $m-color-background: white !default
14
+ $m-color-foreground: #222 !default
15
+ $m-color-background: white !default
7
16
 
8
- $m-color-blur: lighten($m-color-foreground, 30%) !default
9
- $m-color-blur-less: darken($m-color-blur, 15%) !default
10
- $m-color-blur-more: lighten($m-color-blur, 15%) !default
17
+ $m-color-blur: lighten($m-color-foreground, 30%) !default
18
+ $m-color-blur-less: darken($m-color-blur, 15%) !default
19
+ $m-color-blur-more: lighten($m-color-blur, 15%) !default
11
20
 
12
- $m-color-highlight: #00a9cb !default
13
- $m-color-highlight-less: darken($m-color-highlight, 20%) !default
14
- $m-color-highlight-more: lighten($m-color-highlight, 10%) !default
21
+ $m-color-highlight: #00a9cb !default
22
+ $m-color-highlight-less: darken($m-color-highlight, 20%) !default
23
+ $m-color-highlight-more: lighten($m-color-highlight, 10%) !default
15
24
 
16
- $m-color-alert: #c60f13 !default
17
- $m-color-success: #5da423 !default
25
+ $m-color-success: #96c557 !default
26
+ $m-color-success-background: #dfe8b6 !default
27
+ $m-color-success-foreground: #61826b !default
28
+ $m-color-info: #029ee3 !default
29
+ $m-color-info-foreground: #029ee3 !default
30
+ $m-color-info-background: #f3f8fc !default
31
+ $m-color-warning: #ffcc94 !default
32
+ $m-color-warning-foreground: #ffaf00 !default
33
+ $m-color-warning-background: #fcefcf !default
34
+ $m-color-alert: #c60f13 !default
35
+ $m-color-alert-foreground: #c60f13 !default
36
+ $m-color-alert-background: #eddddd !default
37
+ $m-color-alert-border: #c27976 !default
38
+
39
+
40
+ /* Social colors
41
+ ----------------------------------------------------------------------------------------------------------------------
42
+
43
+ $m-color-social-facebook: #3f5c9a !default
44
+ $m-color-social-twitter: #00acee !default
45
+ $m-color-social-google-plus: #dd4b39 !default
46
+ $m-color-social-youtube: #e60100 !default
47
+ $m-color-social-linkedin: #0077b5 !default
48
+ $m-color-social-rss: #ffaf00 !default
@@ -1,13 +1,17 @@
1
-
2
- /* Global configuration
3
- ----------------------------------------------------------------------------------------------------------------------
4
- Contains variables and functions helpful in keeping all modules consistent.
5
-
1
+ /*
2
+ * Global
3
+ *
4
+ * Contains variables and functions helpful in keeping all modules consistent.
5
+ *
6
+ * @package Mai/Config
7
+ * @copyright 2013-2014 Muyo
8
+ * @link http://github.com/muyo/mai
9
+ * ------------------------------------------------------------------------------------------------------------------- /
6
10
 
7
11
  /* Pixels to (r)em
8
12
  ----------------------------------------------------------------------------------------------------------------------
9
13
 
10
- $m-global-em: 16px !default
14
+ $m-global-em: 16px !default
11
15
 
12
16
  @function em($pxWidth)
13
17
  @return $pxWidth / $m-global-em * 1em
@@ -16,23 +20,17 @@ $m-global-em: 16px !default
16
20
  @return $pxWidth / $m-global-em * 1rem
17
21
 
18
22
 
19
- /* Colors
20
- ----------------------------------------------------------------------------------------------------------------------
21
-
22
- @import colors
23
-
24
-
25
23
  /* Margins / padding / gutter
26
24
  ----------------------------------------------------------------------------------------------------------------------
27
25
 
28
- $m-global-margin-size: em(15px)
26
+ $m-global-margin-size: em(15px)
29
27
 
30
28
 
31
29
  /* Text direction
32
30
  ----------------------------------------------------------------------------------------------------------------------
33
31
 
34
- $m-global-direction: ltr !default
35
- $m-global-float-base: left !default
32
+ $m-global-direction: ltr !default
33
+ $m-global-float-base: left !default
36
34
  $m-global-float-opposite: right !default
37
35
 
38
36
  @if $m-global-direction == ltr
@@ -1,22 +1,58 @@
1
+ /*
2
+ * Media
3
+ *
4
+ * Contains variables and functions related to media queries.
5
+ *
6
+ * @package Mai/Config
7
+ * @copyright 2013-2014 Muyo
8
+ * @link http://github.com/muyo/mai
9
+ * ------------------------------------------------------------------------------------------------------------------- /
1
10
 
2
- /* Screen sizes
11
+ /* Functions
3
12
  ----------------------------------------------------------------------------------------------------------------------
4
13
 
5
- $m-media-screen-size-small: 768px !default
6
- $m-media-screen-size-medium: 1279px !default
7
- $m-media-screen-size-large: 1441px !default
8
- $m-media-screen-size-xlarge: 1921px !default
14
+ @function lower-bound($range)
15
+ @if length($range) <= 0
16
+ @return 0
17
+ @return nth($range,1)
9
18
 
10
- /* Media query strings
19
+ @function upper-bound($range)
20
+ @if length($range) < 2
21
+ @return 999999999999
22
+ @return nth($range, 2)
23
+
24
+
25
+ /* Size ranges
11
26
  ----------------------------------------------------------------------------------------------------------------------
12
27
 
13
- $m-media-query-screen: "only screen" !default
14
- $m-media-query-small: "only screen and (min-width: #{$m-media-screen-size-small})" !default
15
- $m-media-query-medium: "only screen and (min-width: #{$m-media-screen-size-medium})" !default
16
- $m-media-query-large: "only screen and (min-width: #{$m-media-screen-size-large})" !default
17
- $m-media-query-xlarge: "only screen and (min-width: #{$m-media-screen-size-xlarge})" !default
28
+ $m-media-range-s: (0, 767px) !default
29
+ $m-media-range-m: (768px, 1279px) !default
30
+ $m-media-range-l: (1280px, 1439px) !default
31
+ $m-media-range-xl: (1440px, 1919px) !default
32
+ $m-media-range-xxl: (1920px, 5120px) !default
33
+
34
+
35
+ /* Media query strings
36
+ ----------------------------------------------------------------------------------------------------------------------
18
37
 
38
+ $m-media-query-screen: "only screen" !default
19
39
  $m-media-query-and-landscape: "and (orientation: landscape)" !default
20
40
  $m-media-query-and-portrait: "and (orientation: portrait)" !default
21
- $m-media-query-landscape: "only screen #{$m-media-query-and-landscape}" !default
22
- $m-media-query-portrait: "only screen #{$m-media-query-and-portrait}" !default
41
+
42
+ $m-media-query-landscape: "#{$m-media-query-screen} #{$m-media-query-and-landscape}" !default
43
+ $m-media-query-portrait: "#{$m-media-query-screen} #{$m-media-query-and-portrait}" !default
44
+
45
+ $m-media-query-s-up: $m-media-query-screen !default
46
+ $m-media-query-s-only: "#{$m-media-query-screen} and (max-width: #{upper-bound($m-media-range-s)})" !default
47
+
48
+ $m-media-query-m-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-m)})" !default
49
+ $m-media-query-m-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-m)}) and (max-width:#{upper-bound($m-media-range-m)})" !default
50
+
51
+ $m-media-query-l-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-l)})" !default
52
+ $m-media-query-l-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-l)}) and (max-width:#{upper-bound($m-media-range-l)})" !default
53
+
54
+ $m-media-query-xl-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xl)})" !default
55
+ $m-media-query-xl-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xl)}) and (max-width:#{upper-bound($m-media-range-xl)})" !default
56
+
57
+ $m-media-query-xxl-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xxl)})" !default
58
+ $m-media-query-xxl-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xxl)}) and (max-width:#{upper-bound($m-media-range-xxl)})" !default
@@ -0,0 +1,181 @@
1
+ /*
2
+ * Grid
3
+ *
4
+ * Based on Foundation 5 (https://github.com/zurb/foundation/blob/master/scss/foundation/components/_grid.scss)
5
+ *
6
+ * @package Mai/Config/Modules
7
+ * @copyright 2013-2014 Muyo
8
+ * @link http://github.com/muyo/mai
9
+ * ------------------------------------------------------------------------------------------------------------------- /
10
+
11
+ /* Base settings
12
+ ----------------------------------------------------------------------------------------------------------------------
13
+
14
+ $m-grid-width: 960px !default
15
+ $m-grid-gutter-single: $m-global-margin-size !default
16
+ $m-grid-gutter: $m-grid-gutter-single * 2 !default
17
+ $m-grid-columns: 12 !default
18
+ $m-grid-column-float-base: $m-global-float-base !default
19
+ $m-grid-column-float-opposite: $m-global-float-opposite !default
20
+
21
+ $m-block-grid-columns: 12 !default
22
+ $m-block-grid-spacing: $m-global-margin-size !default
23
+
24
+
25
+
26
+ /* Media query strings
27
+ ----------------------------------------------------------------------------------------------------------------------
28
+
29
+ $m-media-query-breakpoint: $m-media-query-s-up !default
30
+
31
+
32
+ /* Functions
33
+ ----------------------------------------------------------------------------------------------------------------------
34
+
35
+ @function m-grid-columns-width($current, $total)
36
+ @return percentage(($current / $total))
37
+
38
+
39
+ /* Mixins
40
+ ----------------------------------------------------------------------------------------------------------------------
41
+
42
+
43
+ // For creating container, nested, and collapsed rows.
44
+ =m-grid-row($behavior: false)
45
+ @if $behavior == nest
46
+ width: auto
47
+ margin-#{$m-grid-column-float-base}: -($m-grid-gutter-single)
48
+ margin-#{$m-grid-column-float-opposite}: -($m-grid-gutter-single)
49
+ margin-top: 0
50
+ margin-bottom: 0
51
+ max-width: none
52
+ @else if $behavior == collapse
53
+ width: 100%
54
+ margin: 0
55
+ max-width: $m-grid-width
56
+ @else if $behavior == nest-collapse
57
+ width: auto
58
+ margin: 0
59
+ max-width: none
60
+ @else
61
+ width: 100%
62
+ margin-#{$m-grid-column-float-base}: auto
63
+ margin-#{$m-grid-column-float-opposite}: auto
64
+ margin-top: 0
65
+ margin-bottom: 0
66
+ max-width: $m-grid-width
67
+ +clearfix()
68
+
69
+ // For creating columns - @include these inside a media query to control small vs. large grid layouts
70
+ =m-grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true)
71
+
72
+ position: relative
73
+
74
+ // If collapsed, get rid of gutter padding
75
+ @if $collapse
76
+ padding-left: 0
77
+ padding-right: 0
78
+ // Gutter padding whenever a column isn't set to collapse
79
+ // (use $collapse:null to do nothing)
80
+ @else if $collapse == false
81
+ padding-left: $m-grid-gutter-single
82
+ padding-right: $m-grid-gutter-single
83
+ // If a column number is given, calculate width
84
+ @if $columns
85
+ width: m-grid-columns-width($columns, $m-grid-columns)
86
+ // If last column, float naturally instead of to the right
87
+ @if $last-column
88
+ float: $m-grid-column-float-opposite
89
+
90
+ // If offset, calculate appropriate margins
91
+ @if $offset
92
+ margin-#{$m-grid-column-float-base}: m-grid-columns-width($offset, $m-grid-columns)
93
+ // Source Ordering, adds left/right depending on which you use.
94
+ @if $push
95
+ #{$m-grid-column-float-base}: m-grid-columns-width($push, $m-grid-columns)
96
+ #{$m-grid-column-float-opposite}: auto
97
+ @if $pull
98
+ #{$m-grid-column-float-opposite}: m-grid-columns-width($pull, $m-grid-columns)
99
+ #{$m-grid-column-float-base}: auto
100
+
101
+ // If centered, get rid of float and add appropriate margins
102
+ @if $center
103
+ margin-#{$m-grid-column-float-base}: auto
104
+ margin-#{$m-grid-column-float-opposite}: auto
105
+ float: none !important
106
+
107
+ @if $float
108
+ @if $float == left or $float == true
109
+ float: $m-grid-column-float-base
110
+ @else if $float == right
111
+ float: $m-grid-column-float-opposite
112
+ @else
113
+ float: none
114
+
115
+ // Create presentational classes for grid
116
+ =m-grid-html-classes($size)
117
+
118
+ @for $i from 1 through $m-grid-columns - 1
119
+ .#{$size}-push#{-$i}
120
+ +m-grid-column($push: $i, $collapse: null, $float: false)
121
+ .#{$size}-pull#{-$i}
122
+ +m-grid-column($pull: $i, $collapse: null, $float: false)
123
+
124
+ .columns
125
+ +m-grid-column($columns: false)
126
+
127
+ @for $i from 1 through $m-grid-columns
128
+ .#{$size}#{-$i}
129
+ +m-grid-column($columns: $i,$collapse: null, $float: false)
130
+
131
+ @for $i from 0 through $m-grid-columns - 2
132
+ .#{$size}-offset-#{$i}
133
+ +m-grid-column($offset: $i, $collapse: null, $float: false)
134
+
135
+ [class="columns"] + [class="columns"]:last-child
136
+ float: $m-grid-column-float-base
137
+ [class="columns"] + [class="columns"].end
138
+ float: $m-grid-column-float-opposite
139
+
140
+ .columns.#{$size}-centered
141
+ +m-grid-column($center: true, $collapse: null, $float: false)
142
+
143
+ .columns.#{$size}-uncentered
144
+ margin-#{$m-grid-column-float-base}: 0
145
+ margin-#{$m-grid-column-float-opposite}: 0
146
+ float: $m-grid-column-float-base !important
147
+
148
+ .columns.#{$size}-uncentered.opposite
149
+ float: $m-grid-column-float-opposite !important
150
+
151
+
152
+ =m-block-grid($per-row: false, $spacing: $m-block-grid-spacing, $base-style: true)
153
+
154
+ @if $base-style
155
+ display: block
156
+ padding: 0
157
+ margin: 0 0 0 (-$spacing/2)
158
+ +cf
159
+
160
+ &>li
161
+ display: inline
162
+ height: auto
163
+ float: $m-grid-column-float-base
164
+ padding: 0 ($spacing/2) $spacing
165
+
166
+ @if $per-row
167
+ &>li
168
+ width: 100%/$per-row
169
+ padding: 0 ($spacing/2) $spacing
170
+ list-style: none
171
+
172
+ &:nth-of-type(n)
173
+ clear: none
174
+ &:nth-of-type(#{$per-row}n+1)
175
+ clear: both
176
+
177
+ // Generate presentational markup for block grid.
178
+ =m-block-grid-html-classes($size)
179
+ @for $i from 1 through $m-block-grid-columns
180
+ .#{$size}-block-grid-#{($i)}
181
+ +m-block-grid($i, $m-block-grid-spacing, false)