mai 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
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)