mai 0.0.2 → 0.0.3

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    YzllZGQ3ZTAzY2UxZjFjYjExZWY2MTkzYzZlMGVlYzE0MmIwY2RiMw==
+    NGM3MGQyMjA2MzA5OWQyNWYyOGVhZDhhYzM0NTI3OGM4NzAxMTZjMA==
   data.tar.gz: !binary |-
-    NTM3Y2RmZDk4NzM4MmQ1YzI2ODFlN2ZiODBlMGYxN2QyZWU5MjMwYg==
+    MTc1ODc1MjgxMzMwMTEwNGE3YWIzZWVhYzFiNGFlNjNiNWQ1NTQ4Zg==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    MjVmYzAwNzM0ZDljNzMyODZlODkyY2M0MzAyNTgyY2ZiMThmNDY4Yjg2YzI2
-    MDYyMjM0ZWNiZjk1Yjg5MTM5N2Q0MDYyODg0YzNjNDBlMzMyOTFmYjFiODY1
-    N2I3MGRiZmIxNWM2MDI2MDU4ZjQwMTM1YTA5ZjA3MDRmYWFlYjQ=
+    NjRjZTY1YTg1YjI4NzAwYWZjOTA3OWQ4ZWJiNjVlM2FlMWM0MDVjOGQ0ZTQ4
+    YjE0MDBkMGRhZGI0ZWI0NmNjODY3MDA4MmNhZDY5MTA1NzhhYTQ2YWMxYjRl
+    YzViYTFjNTdiZjI3NWQ5Y2RiNmIwNzg1OWFiOTdjNjhkZGZhMDg=
   data.tar.gz: !binary |-
-    N2EyOWRiODczZjJhMTQ2ODg1NDg1Nzg0OTlmODg4NDA1MGJjMjk2ZTQ0M2Uw
-    MzZkYzVmNTM5N2MxYTAyYWU3MmYzY2UyOTI3OGFjYTJhNGJmMDJlZDgwYTNl
-    NjFmNDU0MmRlNzg5NDRhNTE1MmQ3ODBiM2QwOTVkNjQwMzU2MWQ=
+    ZjBiZWIyZWUwODRiOTRmZDhkYTE3MWEzZWQ1ZTJlMTk5N2NjMTQ5Njc5ODU0
+    NTBiY2Y0MGMzZWZlZDllYTM2M2RhYzJmNDVjODdjODc1Mzg5MDI3NDU5ZTFl
+    OWQzMTdhMTBmNTIzNDllMGVkMTg2ZTE4OTczZTUwZDBhYzNjNzY=

data/README.md

@@ -5,6 +5,43 @@ Mai is a baseline CSS framework written in SASS. Its main purpose is to provide
 a responsive grid (which is currently a nearly-copy-paste of Foundation 3's grid) and some sane typographical defaults
 at its core, while all other functionality will be made available as optional plugins/widgets.
 
+In development (read: unusable)
+=====================
+
 It is currently in its **design** phase and therefore considered **unusable**. We have used its past iterations
-internally for numerous projects in the past but are in the process of restructuring it to be more modular and
-extensible to make it somewhat compatible with either Foundation or Bootstrap (tbd).
+internally for numerous projects but are in the process of restructuring it to be more modular and
+extensible to make it somewhat compatible with either Foundation or Bootstrap (tbd).
+
+You've been warned.
+
+Installation
+=====================
+
+Mai is available as a Compass plugin.
+
+Grab it with:
+
+    gem install mai
+
+Require it by adding the respective line to your Compass config (`config.rb` or whatever you use):
+
+	require 'mai'
+
+And install it as a Compass plugin (at the command line):
+
+	compass install mai
+
+
+This will yield a `master.sass` file in your configured sass_dir with an example and some documentation on how to import
+Mai and its modules. An `index.html` file referencing the built `master.css` file (ie. with a preview of what the example
+`master.sass` generates) will also be generated in your project's root directory.
+
+Design principles
+=====================
+
+- Mobile first;
+- End-user first, designer second (1kb of additional data per request, stretched over thousands/millions of requests is
+a lot compared to forcing the designer to spend a few extra seconds to import only what's really needed);
+- Provide the kitchen sink but hide it in a maze so that it's available only when absolutely required;
+- Make it flexible, easy to configure and easy to override. When an !important is required within your final stylesheet
+in order to override Mai, it means we suck;

data/lib/mai/version.rb

@@ -1,3 +1,3 @@
 module Mai
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/sass/_mai.sass

@@ -1,6 +1,5 @@
 
 @charset "UTF-8"
 
-@import config
-@import utils
-@import modules
+@import mai/config
+@import mai/utils

data/sass/mai/_base.sass

@@ -0,0 +1,3 @@
+
+@import base/base
+@import base/helpers

data/sass/mai/_config.sass

@@ -0,0 +1,5 @@
+
+@import config/global
+@import config/base
+@import config/grid
+@import config/media

data/sass/mai/_media.sass

@@ -0,0 +1,2 @@
+
+@import media/print

data/sass/mai/_modules.sass

@@ -0,0 +1,2 @@
+
+@import modules/grid

data/sass/mai/_utils.sass

@@ -0,0 +1,10 @@
+
+@import utils/global
+@import utils/context
+@import utils/media
+@import utils/mobile
+@import utils/ui
+
+/* Do this import if you've got the 'rgbapng' gem installed and want to be able to create rgba backgrounds with
+   fallbacks for browsers which don't support rgba:
+// @import utils/rgba

data/sass/{modules/_type.sass → mai/base/_base.sass}

@@ -1,22 +1,12 @@
 
 /* Requires
-/* - Configs: global, type
+/* - Configs: global, base
 
-
-/* Mixins
+/* Placeholders
   ----------------------------------------------------------------------------------------------------------------------
 
-// Lists
-@mixin m-type-list-inline
-  margin: 0 auto $m-type-p-margin-bottom auto
-  margin-#{$m-global-float-base}: $m-global-margin-size
-  margin-#{$m-global-float-opposite}: 0
-  padding: 0
-  list-style: none
-  overflow: hidden
-  li
-    margin-#{$m-global-float-base}: $m-global-margin-size
-    display: inline
+%lead
+  font-size: $m-type-lead-font-size
 
 
 /* Reset
@@ -37,10 +27,14 @@ html
 body
   margin: 0
   padding: 0
-  color: $m-type-base-font-color
-  font-family: $m-type-base-font-family
-  font-size: $m-type-base-font-size
-  line-height: $m-type-base-line-height
+  background: $m-body-background-color
+  color: $m-body-font-color
+  font-family: $m-body-font-family
+  font-size: $m-body-font-size
+  line-height: $m-body-line-height
+
+html, body
+  height: 100%
 
 article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
   display: block
@@ -56,27 +50,35 @@ audio:not([controls])
   height: 0
 
 p
-  line-height: $m-type-p-line-height
   margin-bottom: $m-type-p-margin-bottom
+  line-height: $m-type-p-line-height
+  &.lead
+    @extend %lead
 
 aside
   font-size: $m-type-aside-font-size
+  margin-bottom: $m-type-aside-margin-bottom
 
 blockquote
   margin: 0 0 $m-type-p-margin-bottom
   padding: $m-type-blockquote-padding
   border-#{$m-global-float-base}: $m-type-blockquote-border
-  color: $m-type-blockquote-font-color
   p:last-child
     margin-bottom: 0
   cite
+    display: block
     font-size: $m-type-blockquote-cite-font-size
+    font-style: $m-type-blockquote-cite-font-style
     color: $m-type-blockquote-cite-font-color
     &:before
       content: "\2014 \0020"
     a
       color: $m-type-blockquote-cite-a-color
 
+blockquote, blockquote p
+  line-height: $m-type-p-line-height
+  color: $m-type-blockquote-font-color
+
 em, i, dfn
   font-style: italic
 
@@ -177,9 +179,9 @@ a
 
 ul, ol, dl
   margin-bottom: $m-type-list-margin-bottom
+  line-height: $m-type-list-line-height
 
 ul, ol
-  line-height: $m-type-list-line-height
   margin-#{$m-global-float-base}: $m-type-list-margin-side
   li
     ul, ol
@@ -212,4 +214,66 @@ dl
 
 img
   display: inline-block
-  vertical-align: middle
+  vertical-align: middle
+
+/* Forms
+  ----------------------------------------------------------------------------------------------------------------------
+
+fieldset
+  border: $m-ui-border-default
+  margin: 0 2px
+  padding: 0.35em 0.625em 0.75em
+
+legend
+  border: 0
+  padding: 0
+
+button, input, select, textarea
+  font-family: inherit
+  font-size: 100%
+  margin: 0
+
+button, input
+  line-height: normal
+
+button, select
+  text-transform: none
+
+button, html input[type="button"], input[type="reset"], input[type="submit"]
+  -webkit-appearance: button
+  cursor: pointer
+
+button[disabled], html input[disabled]
+  cursor: default
+
+input[type="checkbox"], input[type="radio"]
+  box-sizing: border-box
+  padding: 0
+
+input[type="search"]
+  -webkit-appearance: textfield
+  +box-sizing
+
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
+  -webkit-appearance: none
+
+button::-moz-focus-inner, input::-moz-focus-inner
+  border: 0
+  padding: 0
+
+textarea
+  overflow: auto
+  vertical-align: top
+  height: auto
+  min-height: 50px
+
+select
+  width: 100%
+
+
+/* Tables
+  ----------------------------------------------------------------------------------------------------------------------
+
+table
+  border-collapse: collapse
+  border-spacing: 0

data/sass/mai/base/_helpers.sass

@@ -0,0 +1,17 @@
+
+/* Helpers
+  ----------------------------------------------------------------------------------------------------------------------
+
+.left
+  float: left
+
+.right
+  float: right
+
+.hide
+  display: none
+
+// Note: Not within mai/media/print to ensure this class works properly even if media/print is not inlined but loaded
+// as a separate stylesheet with a different meta media attribute.
+.print-only
+  display: none !important

data/sass/mai/config/_base.sass

@@ -0,0 +1,143 @@
+
+@import global
+
+/* BASE USER INTERFACE
+
+/*----------------------------------------------------------------------------------------------------------------------
+  Borders
+  ----------------------------------------------------------------------------------------------------------------------
+  Base variables
+
+$m-ui-border-size-default:    1px   !default
+$m-ui-border-style-default:   solid !default
+$m-ui-border-color-default:   #eee  !default
+$m-ui-border-default:         $m-ui-border-size-default $m-ui-border-style-default $m-ui-border-color-default !default
+
+// Radius
+$m-ui-border-radius-small:    5px !default
+$m-ui-border-radius-medium:   2*$m-ui-border-radius-small !default
+$m-ui-border-radius-big:      2*$m-ui-border-radius-medium !default
+
+/* Mixins
+  ----------------------------------------------------------------------------------------------------------------------
+
+// Borders
+=m-ui-border-default
+  border: $m-ui-border-default
+
+=m-ui-border-radius($size: 'small')
+  @if $size == 'big'
+    +border-radius($m-ui-border-radius-big)
+  @else if $size == 'medium'
+    +border-radius($m-ui-border-radius-medium)
+  @else
+    +border-radius($m-ui-border-radius-small)
+
+
+
+/*----------------------------------------------------------------------------------------------------------------------
+  Type
+  ----------------------------------------------------------------------------------------------------------------------
+  Base variables
+
+$m-body-font-size:             100% !default
+$m-body-font-family:           sans-serif !default
+$m-body-font-color:            $m-color-foreground !default
+$m-body-background-color:      $m-color-background !default
+$m-body-line-height:           150% !default
+
+
+/* Colors
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-text-color-blur:            $m-color-blur !default
+$m-type-text-color-blur-more:       $m-color-blur-more !default
+
+$m-type-text-color-highlight:       $m-color-highlight !default
+$m-type-text-color-highlight-less:  $m-color-highlight-less !default
+
+
+/* Links
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-a-color-base:               $m-type-text-color-highlight !default
+$m-type-a-color-hover:              $m-type-text-color-highlight-less !default
+$m-type-a-text-decoration:          none !default
+
+
+/* Headers
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-h-line-height:              150% !default
+$m-type-h-margin:                   0 0 .4em !default
+
+$m-type-h1-font-size:               em(34px) !default
+$m-type-h2-font-size:               em(28px) !default
+$m-type-h3-font-size:               em(24px) !default
+$m-type-h4-font-size:               em(20px) !default
+$m-type-h5-font-size:               em(18px) !default
+$m-type-h6-font-size:               em(16px) !default
+
+
+/* Paragraphs
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-p-line-height:              180% !default
+$m-type-p-margin-bottom:            em(20px) !default
+
+
+/* Lists
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-list-margin-side:           $m-global-margin-size * 2 !default
+$m-type-list-margin-bottom:         $m-type-p-margin-bottom !default
+$m-type-list-line-height:           $m-type-p-line-height !default
+
+
+/* Placeholders
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-lead-font-size:             em(22px) !default
+
+
+/* Minor elements
+  ----------------------------------------------------------------------------------------------------------------------
+
+// <small>
+$m-type-small-font-size:            60% !default
+
+// <small> in headers
+$m-type-h-small-font-color:         $m-type-text-color-blur-more !default
+
+// <aside>
+$m-type-aside-margin-bottom:        $m-type-p-margin-bottom !default
+$m-type-aside-font-size:            em(14px) !default
+
+// <hr>
+$m-type-hr-border:                  $m-ui-border-default !default
+$m-type-hr-margin:                  $m-global-margin-size 0 !default
+
+// <blockquote> and <cite> within <blockquote>
+$m-type-blockquote-font-color:                $m-type-text-color-blur !default
+$m-type-blockquote-padding:                   $m-global-margin-size / 2 $m-global-margin-size !default
+$m-type-blockquote-border:                    3px $m-ui-border-style-default $m-ui-border-color-default !default
+$m-type-blockquote-cite-font-size:            em(14px) !default
+$m-type-blockquote-cite-font-style:           normal !default
+$m-type-blockquote-cite-font-color:           $m-type-text-color-blur-more !default
+$m-type-blockquote-cite-a-color:              $m-type-blockquote-cite-font-color !default
+
+
+/* Mixins
+  ----------------------------------------------------------------------------------------------------------------------
+
+// Lists
+@mixin m-type-list-inline
+  margin: 0 auto $m-type-p-margin-bottom auto
+  margin-#{$m-global-float-base}: $m-global-margin-size
+  margin-#{$m-global-float-opposite}: 0
+  padding: 0
+  list-style: none
+  overflow: hidden
+  li
+    margin-#{$m-global-float-base}: $m-global-margin-size
+    display: inline

data/sass/mai/config/_colors.sass

@@ -0,0 +1,17 @@
+
+/* Default colors
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-color-foreground:      #222 !default
+$m-color-background:      white !default
+
+$m-color-blur:            lighten($m-color-foreground, 30%) !default
+$m-color-blur-less:       darken($m-color-blur, 15%) !default
+$m-color-blur-more:       lighten($m-color-blur, 15%) !default
+
+$m-color-highlight:       #00a9cb !default
+$m-color-highlight-less:  darken($m-color-highlight, 20%) !default
+$m-color-highlight-more:  lighten($m-color-highlight, 10%) !default
+
+$m-color-alert:           #c60f13 !default
+$m-color-success:         #5da423 !default