mai 0.0.2 → 0.0.3

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 (48) hide show
  1. checksums.yaml +8 -8
  2. data/README.md +39 -2
  3. data/lib/mai/version.rb +1 -1
  4. data/sass/_mai.sass +2 -3
  5. data/sass/mai/_base.sass +3 -0
  6. data/sass/mai/_config.sass +5 -0
  7. data/sass/mai/_media.sass +2 -0
  8. data/sass/mai/_modules.sass +2 -0
  9. data/sass/mai/_utils.sass +10 -0
  10. data/sass/{modules/_type.sass → mai/base/_base.sass} +86 -22
  11. data/sass/mai/base/_helpers.sass +17 -0
  12. data/sass/mai/config/_base.sass +143 -0
  13. data/sass/mai/config/_colors.sass +17 -0
  14. data/sass/{config → mai/config}/_global.sass +1 -7
  15. data/sass/{config → mai/config}/_grid.sass +1 -1
  16. data/sass/{config → mai/config}/_media.sass +0 -0
  17. data/sass/{modules → mai}/media/_print.sass +4 -7
  18. data/sass/mai/modules/_grid.sass +6 -0
  19. data/sass/{modules → mai/modules}/grid/_base.sass +6 -9
  20. data/sass/{modules → mai/modules}/grid/_functions.sass +0 -0
  21. data/sass/mai/modules/grid/_media.sass +2 -0
  22. data/sass/{modules → mai/modules}/grid/media/_base.sass +2 -1
  23. data/sass/mai/themes/_pinky.sass +2 -0
  24. data/sass/mai/themes/pinky/_colors.sass +5 -0
  25. data/sass/{utils → mai/utils}/_context.sass +1 -2
  26. data/sass/mai/utils/_global.sass +10 -0
  27. data/sass/{utils → mai/utils}/_media.sass +5 -2
  28. data/sass/mai/utils/_mobile.sass +10 -0
  29. data/sass/mai/utils/_rgba.sass +18 -0
  30. data/sass/{utils → mai/utils}/_ui.sass +9 -0
  31. data/templates/project/index.html +142 -0
  32. data/templates/project/manifest.rb +3 -0
  33. data/templates/project/sass/master.sass +47 -2
  34. metadata +29 -27
  35. data/sass/_config.sass +0 -6
  36. data/sass/_modules.sass +0 -6
  37. data/sass/_utils.sass +0 -2
  38. data/sass/config/_type.sass +0 -84
  39. data/sass/config/_ui.sass +0 -30
  40. data/sass/modules/_grid.sass +0 -6
  41. data/sass/modules/_helpers.sass +0 -18
  42. data/sass/modules/_media.sass +0 -2
  43. data/sass/modules/_ui.sass +0 -8
  44. data/sass/modules/grid/_media.sass +0 -142
  45. data/sass/modules/ui/_forms.sass +0 -51
  46. data/sass/modules/ui/_tables.sass +0 -4
  47. data/sass/utils/_global.sass +0 -8
  48. data/sass/utils/_rgba.sass +0 -20
@@ -1,6 +0,0 @@
1
-
2
- @import config/global
3
- @import config/grid
4
- @import config/media
5
- @import config/type
6
- @import config/ui
@@ -1,6 +0,0 @@
1
-
2
- @import modules/helpers
3
- @import modules/grid
4
- @import modules/media
5
- @import modules/type
6
- @import modules/ui
@@ -1,2 +0,0 @@
1
-
2
- @import utils/global
@@ -1,84 +0,0 @@
1
-
2
- @import "global", "grid", "ui"
3
-
4
- /* Base variables
5
- ----------------------------------------------------------------------------------------------------------------------
6
-
7
- $m-type-base-font-size: 100% !default
8
- $m-type-base-font-family: sans-serif !default
9
- $m-type-base-font-color: black !default
10
- $m-type-base-line-height: 150% !default
11
-
12
- /* Colors
13
- ----------------------------------------------------------------------------------------------------------------------
14
-
15
- $m-type-text-color-blur: lighten($m-type-base-font-color, 40%) !default
16
- $m-type-text-color-blur-more: lighten($m-type-text-color-blur, 20%) !default
17
-
18
- $m-type-text-color-highlight: $m-global-color-blue !default
19
- $m-type-text-color-highlight-less: $m-global-color-blue-dark !default
20
-
21
- $m-type-text-color-alert: #cc0000 !default
22
- $m-type-text-color-success: #a6cc13 !default
23
-
24
- /* Links
25
- ----------------------------------------------------------------------------------------------------------------------
26
-
27
- $m-type-a-color-base: $m-type-text-color-highlight !default
28
- $m-type-a-color-hover: $m-type-text-color-highlight-less !default
29
- $m-type-a-text-decoration: none !default
30
-
31
-
32
- /* Headers
33
- ----------------------------------------------------------------------------------------------------------------------
34
-
35
- $m-type-h-line-height: 150% !default
36
- $m-type-h-margin: 0 0 .4em !default
37
-
38
- $m-type-h1-font-size: em(34px) !default
39
- $m-type-h2-font-size: em(28px) !default
40
- $m-type-h3-font-size: em(24px) !default
41
- $m-type-h4-font-size: em(20px) !default
42
- $m-type-h5-font-size: em(18px) !default
43
- $m-type-h6-font-size: em(16px) !default
44
-
45
-
46
- /* Paragraphs
47
- ----------------------------------------------------------------------------------------------------------------------
48
-
49
- $m-type-p-line-height: 180% !default
50
- $m-type-p-margin-bottom: em(20px) !default
51
-
52
-
53
- /* List
54
- ----------------------------------------------------------------------------------------------------------------------
55
-
56
- $m-type-list-margin-side: $m-global-margin-size * 2 !default
57
- $m-type-list-margin-bottom: $m-type-p-margin-bottom !default
58
- $m-type-list-line-height: $m-type-p-line-height !default
59
-
60
-
61
- /* Minor elements
62
- ----------------------------------------------------------------------------------------------------------------------
63
-
64
- // <small>
65
- $m-type-small-font-size: 60% !default
66
-
67
- // <small> in headers
68
- $m-type-h-small-font-color: $m-type-text-color-blur-more !default
69
-
70
- // <aside>
71
- $m-type-aside-font-size: em(14px) !default
72
- $m-type-aside-line-height: $m-type-base-line-height !default
73
-
74
- // <hr>
75
- $m-type-hr-border: $m-ui-border-default !default
76
- $m-type-hr-margin: $m-global-margin-size 0 !default
77
-
78
- // <blockquote> and <cite> within <blockquote>
79
- $m-type-blockquote-font-color: $m-type-text-color-blur !default
80
- $m-type-blockquote-padding: $m-global-margin-size / 2 $m-global-margin-size !default
81
- $m-type-blockquote-border: $m-ui-border-default !default
82
- $m-type-blockquote-cite-font-size: em(14px) !default
83
- $m-type-blockquote-cite-font-color: $m-type-text-color-blur-more !default
84
- $m-type-blockquote-cite-a-color: $m-type-blockquote-cite-font-color !default
@@ -1,30 +0,0 @@
1
-
2
- /* Borders
3
- -------------------------------------------------------------------------------------------------------------------
4
- Base variables
5
-
6
- $m-ui-border-size-default: 1px !default
7
- $m-ui-border-style-default: solid !default
8
- $m-ui-border-color-default: #ddd !default
9
- $m-ui-border-default: $m-ui-border-size-default $m-ui-border-style-default $m-ui-border-color-default !default
10
-
11
- // Radius
12
- $m-ui-border-radius-small: 5px !default
13
- $m-ui-border-radius-medium: 2*$m-ui-border-radius-small !default
14
- $m-ui-border-radius-big: 2*$m-ui-border-radius-medium !default
15
-
16
- /* Mixins
17
- -------------------------------------------------------------------------------------------------------------------
18
-
19
- // Borders
20
- =m-ui-border-default
21
- border: $m-ui-border-default
22
-
23
- =m-ui-border-radius($size: 'small')
24
- @if $size == 'big'
25
- +border-radius($m-ui-border-radius-big)
26
- @else if $size == 'medium'
27
- +border-radius($m-ui-border-radius-medium)
28
- @else
29
- +border-radius($m-ui-border-radius-small)
30
-
@@ -1,6 +0,0 @@
1
-
2
- /* Requires
3
- /* - Configs: global, grid
4
-
5
- @import "grid/_base"
6
- @import "grid/_media"
@@ -1,18 +0,0 @@
1
-
2
- .left
3
- float: left
4
-
5
- .right
6
- float: right
7
-
8
- .text-left
9
- text-align: left
10
-
11
- .text-right
12
- text-align: right
13
-
14
- .text-center
15
- text-align: center
16
-
17
- .hide
18
- display: none
@@ -1,2 +0,0 @@
1
-
2
- @import 'media/_print'
@@ -1,8 +0,0 @@
1
-
2
- /* Requires
3
- /* - Configs: ui
4
-
5
- /* Submodules
6
-
7
- @import "ui/_forms"
8
- @import "ui/_tables"
@@ -1,142 +0,0 @@
1
- @media only screen and (max-width: $m-grid-breakpoint - 1)
2
- .left, .right
3
- float: none
4
- body
5
- -webkit-text-size-adjust: none
6
- -ms-text-size-adjust: none
7
- width: 100%
8
- min-width: 0
9
- margin-left: 0
10
- margin-right: 0
11
- padding-left: 0
12
- padding-right: 0
13
- .row
14
- width: auto
15
- min-width: 320px
16
- margin-left: 0
17
- margin-right: 0
18
- .column, .columns
19
- width: auto !important
20
- float: none
21
- .column:last-child, .columns:last-child
22
- float: none
23
- [class*="column"] + [class*="column"]:last-child
24
- float: none
25
- .column:before, .columns:before, .column:after, .columns:after
26
- content: ""
27
- display: table
28
- .column:after, .columns:after
29
- clear: both
30
- .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten
31
- margin-left: 0 !important
32
- .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten
33
- left: auto
34
- .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten
35
- right: auto
36
- /* Mobile 4-column Grid
37
- .row .mobile-one
38
- width: 25% !important
39
- float: left
40
- padding: 0 15px
41
- .row .mobile-one:last-child
42
- float: right
43
- .row .mobile-one.end
44
- float: left
45
- .row.collapse .mobile-one
46
- padding: 0
47
- .row .mobile-two
48
- width: 50% !important
49
- float: left
50
- padding: 0 15px
51
- .row .mobile-two:last-child
52
- float: right
53
- .row .mobile-two.end
54
- float: left
55
- .row.collapse .mobile-two
56
- padding: 0
57
- .row .mobile-three
58
- width: 75% !important
59
- float: left
60
- padding: 0 15px
61
- .row .mobile-three:last-child
62
- float: right
63
- .row .mobile-three.end
64
- float: left
65
- .row.collapse .mobile-three
66
- padding: 0
67
- .row .mobile-four
68
- width: 100% !important
69
- float: left
70
- padding: 0 15px
71
- .row .mobile-four:last-child
72
- float: right
73
- .row .mobile-four.end
74
- float: left
75
- .row.collapse .mobile-four
76
- padding: 0
77
- .push-one-mobile
78
- left: 25%
79
- .pull-one-mobile
80
- right: 25%
81
- .push-two-mobile
82
- left: 50%
83
- .pull-two-mobile
84
- right: 50%
85
- .push-three-mobile
86
- left: 75%
87
- .pull-three-mobile
88
- right: 75%
89
- /* Block Grids ---
90
- /*
91
- .block-grid.mobile > li
92
- float: none
93
- width: 100%
94
- margin-left: 0
95
- .block-grid > li
96
- clear: none !important
97
- .block-grid.mobile-one-up > li
98
- width: 100%
99
- .block-grid.mobile-two-up > li
100
- width: 50%
101
- .block-grid.mobile-two-up > li:nth-child(2n+1)
102
- clear: both
103
- .block-grid.mobile-three-up > li
104
- width: 33.33333%
105
- .block-grid.mobile-three-up > li:nth-child(3n+1)
106
- clear: both
107
- .block-grid.mobile-four-up > li
108
- width: 25%
109
- .block-grid.mobile-four-up > li:nth-child(4n+1)
110
- clear: both
111
- .block-grid.mobile-five-up > li
112
- width: 20%
113
- .block-grid.mobile-five-up > li:nth-child(5n+1)
114
- clear: both
115
- .block-grid.mobile-six-up > li
116
- width: 16.66667%
117
- .block-grid.mobile-six-up > li:nth-child(6n+1)
118
- clear: both
119
- .block-grid.mobile-seven-up > li
120
- width: 14.28571%
121
- .block-grid.mobile-seven-up > li:nth-child(7n+1)
122
- clear: both
123
- .block-grid.mobile-eight-up > li
124
- width: 12.5%
125
- .block-grid.mobile-eight-up > li:nth-child(8n+1)
126
- clear: both
127
- .block-grid.mobile-nine-up > li
128
- width: 11.11111%
129
- .block-grid.mobile-nine-up > li:nth-child(9n+1)
130
- clear: both
131
- .block-grid.mobile-ten-up > li
132
- width: 10%
133
- .block-grid.mobile-ten-up > li:nth-child(10n+1)
134
- clear: both
135
- .block-grid.mobile-eleven-up > li
136
- width: 9.09091%
137
- .block-grid.mobile-eleven-up > li:nth-child(11n+1)
138
- clear: both
139
- .block-grid.mobile-twelve-up > li
140
- width: 8.33333%
141
- .block-grid.mobile-twelve-up > li:nth-child(12n+1)
142
- clear: both
@@ -1,51 +0,0 @@
1
-
2
- fieldset
3
- border: 1px solid #c0c0c0
4
- margin: 0 2px
5
- padding: 0.35em 0.625em 0.75em
6
-
7
- legend
8
- border: 0
9
- padding: 0
10
-
11
- button, input, select, textarea
12
- font-family: inherit
13
- font-size: 100%
14
- margin: 0
15
-
16
- button, input
17
- line-height: normal
18
-
19
- button, select
20
- text-transform: none
21
-
22
- button, html input[type="button"], input[type="reset"], input[type="submit"]
23
- -webkit-appearance: button
24
- cursor: pointer
25
-
26
- button[disabled], html input[disabled]
27
- cursor: default
28
-
29
- input[type="checkbox"], input[type="radio"]
30
- box-sizing: border-box
31
- padding: 0
32
-
33
- input[type="search"]
34
- -webkit-appearance: textfield
35
- +box-sizing
36
-
37
- input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
38
- -webkit-appearance: none
39
-
40
- button::-moz-focus-inner, input::-moz-focus-inner
41
- border: 0
42
- padding: 0
43
-
44
- textarea
45
- overflow: auto
46
- vertical-align: top
47
- height: auto
48
- min-height: 50px
49
-
50
- select
51
- width: 100%
@@ -1,4 +0,0 @@
1
-
2
- table
3
- border-collapse: collapse
4
- border-spacing: 0
@@ -1,8 +0,0 @@
1
-
2
-
3
- /* Globally available mixins that are generic enough to be easily used outside of Mai.
4
-
5
- =box-sizing($type: border-box)
6
- -moz-box-sizing: $type
7
- -webkit-box-sizing: $type
8
- box-sizing: $type
@@ -1,20 +0,0 @@
1
-
2
- /* Requires
3
- /* - Gems: rgbapng
4
-
5
- @import 'rgbapng'
6
-
7
-
8
- /* Utils | RGBA | Config
9
- ------------------------------------------------- */
10
-
11
- $path-in-img-rgba-png: 'png' !default
12
- $rgbapng_path: $path-in-img-rgba-png !default
13
-
14
- /* Utils | RGBA | Mixins
15
- ------------------------------------------------- */
16
-
17
- =bg-rgba-fallback($color, $opacity: $bg-opacity-base)
18
- background: $color
19
- background: image-url((png_pixelate(rgba($color, $opacity), $path-in-img-rgba-png)))
20
- background: rgba($color, $opacity)