mai 0.0.3 → 0.0.5

data/README.md

@@ -1,4 +1,4 @@
-Mai
+Mai [![Gem Version](https://badge.fury.io/rb/mai.svg)](http://badge.fury.io/rb/mai)
 =====================
 
 Mai is a baseline CSS framework written in SASS. Its main purpose is to provide simplistic cross-browser normalization,

data/lib/mai/version.rb

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

data/sass/mai/_base.sass

@@ -1,3 +1,24 @@
+/*
+ * Base
+ *
+ * The Base package provides normalization across browsers along with some helper classes to make dealing with common
+ * tasks easier. It is a strict requirement for all other specific modules to work coherently and is therefore not
+ * contained in the 'modules' directory.
+ *
+ * @package     Mai/Base
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
+
+/* External dependencies
+  ----------------------------------------------------------------------------------------------------------------------
+
+@import config
+@import utils
+
+
+/* Package files
+  ----------------------------------------------------------------------------------------------------------------------
 
 @import base/base
 @import base/helpers

data/sass/mai/_config.sass

@@ -1,5 +1,26 @@
+/*
+ * Config
+ *
+ * Provides configuration variables, functions and mixins used throughout all modules in Mai. In itself it does not
+ * generate any CSS and - since all variables/functions/mixins are prefixed - is safe to be included in your project
+ * as a whole and it is in fact recommended to do so.
+ *
+ * The imports are organized in an order so that all dependencies are met.
+ *
+ * @package     Mai/Config
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
+
+/* Package files
+  ----------------------------------------------------------------------------------------------------------------------
 
 @import config/global
+@import config/colors
 @import config/base
-@import config/grid
-@import config/media
+@import config/media
+
+/* Module configuration
+  ----------------------------------------------------------------------------------------------------------------------
+
+@import config/modules/grid

data/sass/mai/base/_base.sass

@@ -1,12 +1,17 @@
-
-/* Requires
-/* - Configs: global, base
-
-/* Placeholders
+/*
+ * Base
+ *
+ * @package     Mai/Base
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
+
+/* Box-sizing (border-box)
   ----------------------------------------------------------------------------------------------------------------------
+  Breaks IE compat below IE8. You'll need a box-sizing polyfill to get Mai to work in those.
 
-%lead
-  font-size: $m-type-lead-font-size
+*, *:before, *:after
+  +box-sizing
 
 
 /* Reset
@@ -52,8 +57,6 @@ audio:not([controls])
 p
   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
@@ -239,11 +242,11 @@ button, input
 button, select
   text-transform: none
 
-button, html input[type="button"], input[type="reset"], input[type="submit"]
+button, input[type="button"], input[type="reset"], input[type="submit"]
   -webkit-appearance: button
   cursor: pointer
 
-button[disabled], html input[disabled]
+button[disabled], input[disabled]
   cursor: default
 
 input[type="checkbox"], input[type="radio"]
@@ -262,14 +265,21 @@ button::-moz-focus-inner, input::-moz-focus-inner
   padding: 0
 
 textarea
+  height: auto
+  min-height: 6em
   overflow: auto
   vertical-align: top
-  height: auto
-  min-height: 50px
+  line-height: 1.4em
+  resize: vertical
 
 select
   width: 100%
 
+label
+  cursor: pointer
+  font-size: .9em
+  font-weight: bold
+
 
 /* Tables
   ----------------------------------------------------------------------------------------------------------------------

data/sass/mai/base/_helpers.sass

@@ -1,15 +1,28 @@
+/*
+ * Helpers
+ *
+ * @package     Mai/Base
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
 
-/* Helpers
-  ----------------------------------------------------------------------------------------------------------------------
+.hidden
+  display: none
 
-.left
+.float-left
   float: left
 
-.right
+.float-right
   float: right
 
-.hide
-  display: none
+.text-right
+  text-align: $m-global-float-opposite
+
+.text-left
+  text-align: $m-global-float-base
+
+.text-justify
+  text-align: justify
 
 // 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.

data/sass/mai/config/_base.sass

@@ -1,7 +1,12 @@
-
-@import global
-
-/* BASE USER INTERFACE
+/*
+ * Base
+ *
+ * Basic settings for the UI, including typography, borders etc.
+ *
+ * @package     Mai/Config
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
 
 /*----------------------------------------------------------------------------------------------------------------------
   Borders
@@ -21,7 +26,6 @@ $m-ui-border-radius-big:      2*$m-ui-border-radius-medium !default
 /* Mixins
   ----------------------------------------------------------------------------------------------------------------------
 
-// Borders
 =m-ui-border-default
   border: $m-ui-border-default
 
@@ -62,6 +66,8 @@ $m-type-text-color-highlight-less:  $m-color-highlight-less !default
 
 $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-color-reverse:            $m-type-a-color-hover
+$m-type-a-color-reverse-hover:      $m-type-a-color-base
 $m-type-a-text-decoration:          none !default
 
 

data/sass/mai/config/_colors.sass

@@ -1,17 +1,48 @@
+/*
+ * Colors
+ *
+ * Contains variables and functions used to create a base color palette.
+ *
+ * @package     Mai/Config
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
 
-/* Default colors
+/* Base colors
   ----------------------------------------------------------------------------------------------------------------------
 
-$m-color-foreground:      #222 !default
-$m-color-background:      white !default
+$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-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-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
+$m-color-success:             #96c557 !default
+$m-color-success-background:  #dfe8b6 !default
+$m-color-success-foreground:  #61826b !default
+$m-color-info:                #029ee3 !default
+$m-color-info-foreground:     #029ee3 !default
+$m-color-info-background:     #f3f8fc !default
+$m-color-warning:             #ffcc94 !default
+$m-color-warning-foreground:  #ffaf00 !default
+$m-color-warning-background:  #fcefcf !default
+$m-color-alert:               #c60f13 !default
+$m-color-alert-foreground:    #c60f13 !default
+$m-color-alert-background:    #eddddd !default
+$m-color-alert-border:        #c27976 !default
+
+
+/* Social colors
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-color-social-facebook:     #3f5c9a !default
+$m-color-social-twitter:      #00acee !default
+$m-color-social-google-plus:  #dd4b39 !default
+$m-color-social-youtube:      #e60100 !default
+$m-color-social-linkedin:     #0077b5 !default
+$m-color-social-rss:          #ffaf00 !default

data/sass/mai/config/_global.sass

@@ -1,13 +1,17 @@
-
-/* Global configuration
-  ----------------------------------------------------------------------------------------------------------------------
-  Contains variables and functions helpful in keeping all modules consistent.
-
+/*
+ * Global
+ *
+ * Contains variables and functions helpful in keeping all modules consistent.
+ *
+ * @package     Mai/Config
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
 
 /* Pixels to (r)em
   ----------------------------------------------------------------------------------------------------------------------
 
-$m-global-em: 16px !default
+$m-global-em:           16px !default
 
 @function em($pxWidth)
   @return $pxWidth / $m-global-em * 1em
@@ -16,23 +20,17 @@ $m-global-em: 16px !default
   @return $pxWidth / $m-global-em * 1rem
 
 
-/* Colors
-  ----------------------------------------------------------------------------------------------------------------------
-
-@import colors
-
-
 /* Margins / padding / gutter
   ----------------------------------------------------------------------------------------------------------------------
 
-$m-global-margin-size: em(15px)
+$m-global-margin-size:    em(15px)
 
 
 /* Text direction
   ----------------------------------------------------------------------------------------------------------------------
 
-$m-global-direction: ltr !default
-$m-global-float-base: left !default
+$m-global-direction:      ltr !default
+$m-global-float-base:     left !default
 $m-global-float-opposite: right !default
 
 @if $m-global-direction == ltr

data/sass/mai/config/_media.sass

@@ -1,22 +1,58 @@
+/*
+ * Media
+ *
+ * Contains variables and functions related to media queries.
+ *
+ * @package     Mai/Config
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
 
-/* Screen sizes
+/* Functions
   ----------------------------------------------------------------------------------------------------------------------
 
-$m-media-screen-size-small: 768px !default
-$m-media-screen-size-medium: 1279px !default
-$m-media-screen-size-large: 1441px !default
-$m-media-screen-size-xlarge: 1921px !default
+@function lower-bound($range)
+  @if length($range) <= 0
+    @return 0
+  @return nth($range,1)
 
-/* Media query strings
+@function upper-bound($range)
+  @if length($range) < 2
+    @return 999999999999
+  @return nth($range, 2)
+
+
+/* Size ranges
   ----------------------------------------------------------------------------------------------------------------------
 
-$m-media-query-screen: "only screen" !default
-$m-media-query-small: "only screen and (min-width: #{$m-media-screen-size-small})" !default
-$m-media-query-medium: "only screen and (min-width: #{$m-media-screen-size-medium})" !default
-$m-media-query-large: "only screen and (min-width: #{$m-media-screen-size-large})" !default
-$m-media-query-xlarge: "only screen and (min-width: #{$m-media-screen-size-xlarge})" !default
+$m-media-range-s:   (0, 767px) !default
+$m-media-range-m:   (768px, 1279px) !default
+$m-media-range-l:   (1280px, 1439px) !default
+$m-media-range-xl:  (1440px, 1919px) !default
+$m-media-range-xxl: (1920px, 5120px) !default
+
+
+/* Media query strings
+  ----------------------------------------------------------------------------------------------------------------------
 
+$m-media-query-screen:   "only screen" !default
 $m-media-query-and-landscape: "and (orientation: landscape)" !default
 $m-media-query-and-portrait: "and (orientation: portrait)" !default
-$m-media-query-landscape: "only screen #{$m-media-query-and-landscape}" !default
-$m-media-query-portrait: "only screen #{$m-media-query-and-portrait}" !default
+
+$m-media-query-landscape: "#{$m-media-query-screen} #{$m-media-query-and-landscape}" !default
+$m-media-query-portrait: "#{$m-media-query-screen} #{$m-media-query-and-portrait}" !default
+
+$m-media-query-s-up:     $m-media-query-screen !default
+$m-media-query-s-only:   "#{$m-media-query-screen} and (max-width: #{upper-bound($m-media-range-s)})" !default
+
+$m-media-query-m-up:     "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-m)})" !default
+$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
+
+$m-media-query-l-up:     "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-l)})" !default
+$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
+
+$m-media-query-xl-up:    "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xl)})" !default
+$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
+
+$m-media-query-xxl-up:   "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xxl)})" !default
+$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

data/sass/mai/config/modules/_grid.sass

@@ -0,0 +1,181 @@
+/*
+ * Grid
+ *
+ * Based on Foundation 5 (https://github.com/zurb/foundation/blob/master/scss/foundation/components/_grid.scss)
+ *
+ * @package     Mai/Config/Modules
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
+
+/* Base settings
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-grid-width:                  960px !default
+$m-grid-gutter-single:          $m-global-margin-size !default
+$m-grid-gutter:                 $m-grid-gutter-single * 2 !default
+$m-grid-columns:                12 !default
+$m-grid-column-float-base:      $m-global-float-base !default
+$m-grid-column-float-opposite:  $m-global-float-opposite !default
+
+$m-block-grid-columns:          12 !default
+$m-block-grid-spacing:          $m-global-margin-size !default
+
+
+
+/* Media query strings
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-media-query-breakpoint: $m-media-query-s-up !default
+
+
+/* Functions
+  ----------------------------------------------------------------------------------------------------------------------
+
+@function m-grid-columns-width($current, $total)
+  @return percentage(($current / $total))
+
+
+/* Mixins
+  ----------------------------------------------------------------------------------------------------------------------
+
+
+// For creating container, nested, and collapsed rows.
+=m-grid-row($behavior: false)
+  @if $behavior == nest
+    width: auto
+    margin-#{$m-grid-column-float-base}: -($m-grid-gutter-single)
+    margin-#{$m-grid-column-float-opposite}: -($m-grid-gutter-single)
+    margin-top: 0
+    margin-bottom: 0
+    max-width: none
+  @else if $behavior == collapse
+    width: 100%
+    margin: 0
+    max-width: $m-grid-width
+  @else if $behavior == nest-collapse
+    width: auto
+    margin: 0
+    max-width: none
+  @else
+    width: 100%
+    margin-#{$m-grid-column-float-base}: auto
+    margin-#{$m-grid-column-float-opposite}: auto
+    margin-top: 0
+    margin-bottom: 0
+    max-width: $m-grid-width
+  +clearfix()
+
+// For creating columns - @include these inside a media query to control small vs. large grid layouts
+=m-grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true)
+
+  position: relative
+
+  // If collapsed, get rid of gutter padding
+  @if $collapse
+    padding-left: 0
+    padding-right: 0
+    // Gutter padding whenever a column isn't set to collapse
+    // (use $collapse:null to do nothing)
+  @else if $collapse == false
+    padding-left: $m-grid-gutter-single
+    padding-right: $m-grid-gutter-single
+  // If a column number is given, calculate width
+  @if $columns
+    width: m-grid-columns-width($columns, $m-grid-columns)
+    // If last column, float naturally instead of to the right
+    @if $last-column
+      float: $m-grid-column-float-opposite
+
+  // If offset, calculate appropriate margins
+  @if $offset
+    margin-#{$m-grid-column-float-base}: m-grid-columns-width($offset, $m-grid-columns)
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push
+    #{$m-grid-column-float-base}: m-grid-columns-width($push, $m-grid-columns)
+    #{$m-grid-column-float-opposite}: auto
+  @if $pull
+    #{$m-grid-column-float-opposite}: m-grid-columns-width($pull, $m-grid-columns)
+    #{$m-grid-column-float-base}: auto
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center
+    margin-#{$m-grid-column-float-base}: auto
+    margin-#{$m-grid-column-float-opposite}: auto
+    float: none !important
+
+  @if $float
+    @if $float == left or $float == true
+      float: $m-grid-column-float-base
+    @else if $float == right
+      float: $m-grid-column-float-opposite
+    @else
+      float: none
+
+// Create presentational classes for grid
+=m-grid-html-classes($size)
+
+  @for $i from 1 through $m-grid-columns - 1
+    .#{$size}-push#{-$i}
+      +m-grid-column($push: $i, $collapse: null, $float: false)
+    .#{$size}-pull#{-$i}
+      +m-grid-column($pull: $i, $collapse: null, $float: false)
+
+  .columns
+    +m-grid-column($columns: false)
+
+  @for $i from 1 through $m-grid-columns
+    .#{$size}#{-$i}
+      +m-grid-column($columns: $i,$collapse: null, $float: false)
+
+  @for $i from 0 through $m-grid-columns - 2
+    .#{$size}-offset-#{$i}
+      +m-grid-column($offset: $i, $collapse: null, $float: false)
+
+  [class="columns"] + [class="columns"]:last-child
+    float: $m-grid-column-float-base
+  [class="columns"] + [class="columns"].end
+    float: $m-grid-column-float-opposite
+
+  .columns.#{$size}-centered
+    +m-grid-column($center: true, $collapse: null, $float: false)
+
+  .columns.#{$size}-uncentered
+    margin-#{$m-grid-column-float-base}: 0
+    margin-#{$m-grid-column-float-opposite}: 0
+    float: $m-grid-column-float-base !important
+
+  .columns.#{$size}-uncentered.opposite
+    float: $m-grid-column-float-opposite !important
+
+
+=m-block-grid($per-row: false, $spacing: $m-block-grid-spacing, $base-style: true)
+
+  @if $base-style
+    display: block
+    padding: 0
+    margin: 0 0 0 (-$spacing/2)
+    +cf
+
+    &>li
+      display: inline
+      height: auto
+      float: $m-grid-column-float-base
+      padding: 0 ($spacing/2) $spacing
+
+  @if $per-row
+    &>li
+      width: 100%/$per-row
+      padding: 0 ($spacing/2) $spacing
+      list-style: none
+
+    &:nth-of-type(n)
+      clear: none
+      &:nth-of-type(#{$per-row}n+1)
+        clear: both
+
+// Generate presentational markup for block grid.
+=m-block-grid-html-classes($size)
+  @for $i from 1 through $m-block-grid-columns
+    .#{$size}-block-grid-#{($i)}
+      +m-block-grid($i, $m-block-grid-spacing, false)