mai 0.0.2

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    YzllZGQ3ZTAzY2UxZjFjYjExZWY2MTkzYzZlMGVlYzE0MmIwY2RiMw==
+  data.tar.gz: !binary |-
+    NTM3Y2RmZDk4NzM4MmQ1YzI2ODFlN2ZiODBlMGYxN2QyZWU5MjMwYg==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    MjVmYzAwNzM0ZDljNzMyODZlODkyY2M0MzAyNTgyY2ZiMThmNDY4Yjg2YzI2
+    MDYyMjM0ZWNiZjk1Yjg5MTM5N2Q0MDYyODg0YzNjNDBlMzMyOTFmYjFiODY1
+    N2I3MGRiZmIxNWM2MDI2MDU4ZjQwMTM1YTA5ZjA3MDRmYWFlYjQ=
+  data.tar.gz: !binary |-
+    N2EyOWRiODczZjJhMTQ2ODg1NDg1Nzg0OTlmODg4NDA1MGJjMjk2ZTQ0M2Uw
+    MzZkYzVmNTM5N2MxYTAyYWU3MmYzY2UyOTI3OGFjYTJhNGJmMDJlZDgwYTNl
+    NjFmNDU0MmRlNzg5NDRhNTE1MmQ3ODBiM2QwOTVkNjQwMzU2MWQ=

data/.gitignore

@@ -0,0 +1,2 @@
+.idea
+*.gem

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.md

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Michał Chojnacki <m.chojnacki@muyo.pl>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,10 @@
+Mai
+=====================
+
+Mai is a baseline CSS framework written in SASS. Its main purpose is to provide simplistic cross-browser normalization,
+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.
+
+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).

data/lib/mai.rb

@@ -0,0 +1,9 @@
+root = File.join(File.dirname(__FILE__), "..")
+
+require "mai/version"
+require "compass"
+
+Compass::Frameworks.register("mai",
+  :stylesheets_directory => File.join(root,"sass"),
+  :templates_directory => File.join(root,"templates")
+)

data/lib/mai/version.rb

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

data/mai.gemspec

@@ -0,0 +1,19 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/mai/version', __FILE__)
+
+Gem::Specification.new do |gem|
+	gem.authors       = ["Muyo"]
+	gem.email         = ["mai@muyo.pl"]
+	gem.description   = %q{Mai CSS skeleton built on Compass}
+	gem.summary       = %q{Mai CSS skeleton built on Compass}
+	gem.homepage      = "https://github.com/muyo/mai"
+
+	gem.files         = `git ls-files`.split($\)
+	gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+	gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+	gem.name          = "mai"
+	gem.version       = Mai::VERSION
+	gem.license       = 'MIT'
+
+	gem.add_dependency "sass", [">= 3.2.3"]
+end

data/sass/_config.sass

@@ -0,0 +1,6 @@
+
+@import config/global
+@import config/grid
+@import config/media
+@import config/type
+@import config/ui

data/sass/_mai.sass

@@ -0,0 +1,6 @@
+
+@charset "UTF-8"
+
+@import config
+@import utils
+@import modules

data/sass/_modules.sass

@@ -0,0 +1,6 @@
+
+@import modules/helpers
+@import modules/grid
+@import modules/media
+@import modules/type
+@import modules/ui

data/sass/_utils.sass

@@ -0,0 +1,2 @@
+
+@import utils/global

data/sass/config/_global.sass

@@ -0,0 +1,49 @@
+
+/* Global configuration
+  ----------------------------------------------------------------------------------------------------------------------
+  Contains variables and functions helpful in keeping all modules consistent.
+
+
+/* Pixels to (r)em
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-global-em: 16px !default
+
+@function em($pxWidth)
+  @return $pxWidth / $m-global-em * 1em
+
+@function rem($pxWidth)
+  @return $pxWidth / $m-global-em * 1rem
+
+
+/* Colors
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-global-color-grey: #999 !default
+$m-global-color-grey-dark: #444 !default
+$m-global-color-grey-light: #eee !default
+
+$m-global-color-blue: #00a9cb !default
+$m-global-color-blue-light: lighten($m-global-color-blue, 10%) !default
+$m-global-color-blue-dark: darken($m-global-color-blue, 20%) !default
+
+
+/* Margins / padding / gutter
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-global-margin-size: em(15px)
+
+
+/* Text direction
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-global-direction: ltr !default
+$m-global-float-base: left !default
+$m-global-float-opposite: right !default
+
+@if $m-global-direction == ltr
+  $m-global-float-base: left
+  $m-global-float-opposite: right
+@else
+  $m-global-float-base: right
+  $m-global-float-opposite: left

data/sass/config/_grid.sass

@@ -0,0 +1,17 @@
+
+@import "global", "media"
+
+/* Base settings
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-grid-width: em(960px) !default
+$m-grid-breakpoint: em($m-media-screen-size-small - 1) !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: $m-global-float-base !default
+
+/* Media query strings
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-media-query-breakpoint: "only screen and (max-width: #{$m-grid-breakpoint})" !default

data/sass/config/_media.sass

@@ -0,0 +1,22 @@
+
+/* Screen sizes
+  ----------------------------------------------------------------------------------------------------------------------
+
+$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
+
+/* Media query strings
+  ----------------------------------------------------------------------------------------------------------------------
+
+$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-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

data/sass/config/_type.sass

@@ -0,0 +1,84 @@
+
+@import "global", "grid", "ui"
+
+/* Base variables
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-base-font-size:             100% !default
+$m-type-base-font-family:           sans-serif !default
+$m-type-base-font-color:            black !default
+$m-type-base-line-height:           150% !default
+
+/* Colors
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-type-text-color-blur:            lighten($m-type-base-font-color, 40%) !default
+$m-type-text-color-blur-more:       lighten($m-type-text-color-blur, 20%) !default
+
+$m-type-text-color-highlight:       $m-global-color-blue !default
+$m-type-text-color-highlight-less:  $m-global-color-blue-dark !default
+
+$m-type-text-color-alert:           #cc0000 !default
+$m-type-text-color-success:         #a6cc13 !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
+
+
+/* List
+  ----------------------------------------------------------------------------------------------------------------------
+
+$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
+
+
+/* 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-font-size:            em(14px) !default
+$m-type-aside-line-height:          $m-type-base-line-height !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:                    $m-ui-border-default !default
+$m-type-blockquote-cite-font-size:            em(14px) !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

data/sass/config/_ui.sass

@@ -0,0 +1,30 @@
+
+/* Borders
+  -------------------------------------------------------------------------------------------------------------------
+  Base variables
+
+$m-ui-border-size-default:    1px   !default
+$m-ui-border-style-default:   solid !default
+$m-ui-border-color-default:   #ddd  !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)
+

data/sass/modules/_grid.sass

@@ -0,0 +1,6 @@
+
+/* Requires
+/* - Configs: global, grid
+
+@import "grid/_base"
+@import "grid/_media"

data/sass/modules/_helpers.sass

@@ -0,0 +1,18 @@
+
+.left
+  float: left
+
+.right
+  float: right
+
+.text-left
+  text-align: left
+
+.text-right
+  text-align: right
+
+.text-center
+  text-align: center
+
+.hide
+  display: none

data/sass/modules/_media.sass

@@ -0,0 +1,2 @@
+
+@import 'media/_print'

data/sass/modules/_type.sass

@@ -0,0 +1,215 @@
+
+/* Requires
+/* - Configs: global, type
+
+
+/* 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
+
+
+/* Reset
+  ----------------------------------------------------------------------------------------------------------------------
+
+div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td
+  margin: 0
+  padding: 0
+  direction: $m-global-direction
+
+/* Base
+  ----------------------------------------------------------------------------------------------------------------------
+
+html
+  -ms-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%
+
+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
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
+  display: block
+
+audio, canvas, video
+  display: inline-block
+
+[hidden]
+  display: none
+
+audio:not([controls])
+  display: none
+  height: 0
+
+p
+  line-height: $m-type-p-line-height
+  margin-bottom: $m-type-p-margin-bottom
+
+aside
+  font-size: $m-type-aside-font-size
+
+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
+    font-size: $m-type-blockquote-cite-font-size
+    color: $m-type-blockquote-cite-font-color
+    &:before
+      content: "\2014 \0020"
+    a
+      color: $m-type-blockquote-cite-a-color
+
+em, i, dfn
+  font-style: italic
+
+strong, b
+  font-weight: bold
+
+small
+  font-size: $m-type-small-font-size
+
+code, kbd, pre, samp
+  font-family: Monaco, Consolas, "Lucida Console", monospace
+  font-size: .9em
+
+pre
+  white-space: pre-wrap
+
+q
+  quotes: "\201C" "\201D" "\2018" "\2019"
+
+sub, sup
+  font-size: 75%
+  line-height: 0
+  position: relative
+  vertical-align: baseline
+
+sup
+  top: -0.5em
+
+sub
+  bottom: -0.25em
+
+mark
+  background: #ff0
+  color: #000
+
+abbr, acronym
+  text-transform: uppercase
+  font-size: 90%
+  border-bottom: 1px dotted #ddd
+  cursor: help
+
+abbr
+  text-transform: none
+
+abbr[title]
+  border-bottom: 1px dotted
+
+hr
+  border: $m-type-hr-border
+  margin: $m-type-hr-margin
+  clear: both
+  height: 0
+  -moz-box-sizing: content-box
+  box-sizing: content-box
+
+svg:not(:root)
+  overflow: hidden
+
+figure
+  margin: 0
+
+/* Headers
+  ----------------------------------------------------------------------------------------------------------------------
+
+h1, h2, h3, h4, h5, h6
+  margin: $m-type-h-margin
+  line-height: $m-type-h-line-height
+  small
+    color: $m-type-h-small-font-color
+
+h1
+  font-size: $m-type-h1-font-size
+h2
+  font-size: $m-type-h2-font-size
+h3
+  font-size: $m-type-h3-font-size
+h4
+  font-size: $m-type-h4-font-size
+h5
+  font-size: $m-type-h5-font-size
+h6
+  font-size: $m-type-h6-font-size
+
+/* Links
+  ----------------------------------------------------------------------------------------------------------------------
+
+a
+  text-decoration: $m-type-a-text-decoration
+  color: $m-type-a-color-base
+  &:hover, &:focus
+    outline: none
+    color: $m-type-a-color-hover
+  img
+    border: none
+
+/* Lists
+  ----------------------------------------------------------------------------------------------------------------------
+
+ul, ol, dl
+  margin-bottom: $m-type-list-margin-bottom
+
+ul, ol
+  line-height: $m-type-list-line-height
+  margin-#{$m-global-float-base}: $m-type-list-margin-side
+  li
+    ul, ol
+      margin-bottom: 0
+
+ul
+  &.square, &.circle, &.disc
+    li ul
+      list-style: inherit
+  &.square
+    list-style-type: square
+  &.circle
+    list-style-type: circle
+  &.disc
+    list-style-type: disc
+  &.no-bullet
+    list-style: none
+  &.inline
+    +m-type-list-inline
+
+dl
+  dt
+    margin-bottom: .3em
+    font-weight: bold
+  dd
+    margin-bottom: em(12px)
+
+/* Images
+  ----------------------------------------------------------------------------------------------------------------------
+
+img
+  display: inline-block
+  vertical-align: middle