mai 0.0.2 → 0.0.3

data/sass/{config → mai/config}/_global.sass

@@ -19,13 +19,7 @@ $m-global-em: 16px !default
 /* 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
+@import colors
 
 
 /* Margins / padding / gutter

data/sass/{config → mai/config}/_grid.sass

@@ -1,5 +1,5 @@
 
-@import "global", "media"
+@import global, media
 
 /* Base settings
   ----------------------------------------------------------------------------------------------------------------------

data/sass/{modules → mai}/media/_print.sass

@@ -1,6 +1,7 @@
 
-.print-only
-  display: none !important
+// Note: The ".print-only" helper class is contained within mai/base/helpers as this print media stylesheet may either
+// be used inline your master stylesheet or in a separate file, whereas the helper class should be available and work
+// in all cases.
 
 @media print
   *
@@ -32,13 +33,9 @@
     widows: 3
   h2, h3
     page-break-after: avoid
-  .hide-on-print
-    display: none !important
   .print-only
     display: block !important
-  .hide-for-print
+  .hide-on-print
     display: none !important
-  .show-for-print
-    display: inherit !important
   @page
     margin: 0.5cm

data/sass/mai/modules/_grid.sass

@@ -0,0 +1,6 @@
+
+/* Requires
+/* - Configs: global, grid
+
+@import grid/base
+@import grid/media

data/sass/{modules → mai/modules}/grid/_base.sass

@@ -1,5 +1,5 @@
 
-@import "functions"
+@import functions
 
 *, *:before, *:after
   +box-sizing
@@ -20,6 +20,9 @@
     &.collapse
       margin: 0
 
+.row.as-column
+  padding: 0 $m-grid-gutter-single
+
 /* Columns
 
 .column, .columns
@@ -133,16 +136,10 @@
 .pull-ten
   right: 83.33333%
 
-/* Nicolas Gallagher's micro clearfix
+// Micro-clearfix
 .row
-  *zoom: 1
-
-.row:before, .row:after
-  content: " "
-  display: table
+  +cf()
 
-.row:after
-  clear: both
 
 // Grid Defaults to get images and embeds to work properly
 img, object, embed

data/sass/mai/modules/grid/_media.sass

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

data/sass/{modules → mai/modules}/grid/media/_base.sass

@@ -1,4 +1,5 @@
-@media only screen and (max-width: $grid-breakpoint - 1)
+
+@media #{$m-media-query-breakpoint}
   .left, .right
     float: none
   body

data/sass/mai/themes/_pinky.sass

@@ -0,0 +1,2 @@
+
+@import pinky/colors

data/sass/mai/themes/pinky/_colors.sass

@@ -0,0 +1,5 @@
+
+/* Pinky Theme colors
+  ----------------------------------------------------------------------------------------------------------------------
+
+$m-color-highlight:       #b4003b !default

data/sass/{utils → mai/utils}/_context.sass

@@ -18,7 +18,6 @@ $m-_context: null
   @if list-separator($m-context) == 'space'
     $m-context: $m-context, null
 
-  // Test if a jacket context and jacket value match.
   @each $item in $m-context
     @each $arg in $args
       @if index($arg, nth($item, 1))
@@ -43,5 +42,5 @@ $m-_context: null
     #{$selector-string}
       @content
 
-@function jacket-context($arg)
+@function mai-context($arg)
   @return if(index($m-_context, $arg), true, false)

data/sass/mai/utils/_global.sass

@@ -0,0 +1,10 @@
+
+/* Global mixins
+  ----------------------------------------------------------------------------------------------------------------------
+  Mixins that are generic enough to be easily used outside of Mai, even if prefixed with 'm-'.
+
+
+=box-sizing($type: border-box)
+  -moz-box-sizing: $type
+  -webkit-box-sizing: $type
+  box-sizing: $type

data/sass/{utils → mai/utils}/_media.sass

@@ -1,6 +1,9 @@
 
-/* Requires
-/* - Configs: media, grid
+/* Media query helper utilities
+  ----------------------------------------------------------------------------------------------------------------------
+  Requires
+    - Configs: media, grid
+
 
 =for($size, $type: 'screen')
   @if $size == 'breakpoint'

data/sass/mai/utils/_mobile.sass

@@ -0,0 +1,10 @@
+
+/* Utils for mobile browsers
+  ----------------------------------------------------------------------------------------------------------------------
+
+=kill-mobile-zoom
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: none
+
+=kill-tap-highlight
+  -webkit-tap-highlight-color: rgba(0,0,0,0)

data/sass/mai/utils/_rgba.sass

@@ -0,0 +1,18 @@
+
+@import rgbapng
+
+
+/* RGBA utilities
+  ----------------------------------------------------------------------------------------------------------------------
+  Requires
+    - Gems: rgbapng
+
+
+$path-in-img-rgba-png: 'png' !default
+$rgbapng_path: $path-in-img-rgba-png !default
+
+
+=bg-rgba-fallback($color, $opacity: $bg-opacity-base)
+  background: $color
+  background: image-url((png_pixelate(rgba($color, $opacity), $path-in-img-rgba-png)))
+  background: rgba($color, $opacity)

data/sass/{utils → mai/utils}/_ui.sass

@@ -1,4 +1,13 @@
 
+@import "media"
+
+
+/* UI utilities
+  ----------------------------------------------------------------------------------------------------------------------
+  Requires
+    - Utils: media
+
+
 =cf()
   *zoom: 1
   &:before, &:after

data/templates/project/index.html

@@ -0,0 +1,142 @@
+<% template = @template if defined?(@template) %><!DOCTYPE html>
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" <% if template[:options][:rtl] %>dir="rtl"<% end %>> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en" <% if template[:options][:rtl] %>dir="rtl"<% end %>> <!--<![endif]-->
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Mai v<%= template[:options][:version] %></title>
+	<link rel="stylesheet" href="<%= css_dir %>/master.css" />
+</head>
+<body>
+	<header class="row as-column">
+		<h1>Mai <small>Works for you, not the other way round.</small></h1>
+	</header>
+	<hr />
+	<div class="row">
+		<p class="twelve columns lead">A flexible and simple boilerplate for the responsive web, which gets out of your way when you don't need it and jumps back in when you scream for help. And it will hug you when you cry.</p>
+		<div class="eight columns">
+			<div class="row">
+				<div class="six columns">
+					<p>Instead of including a kitchen sink and constantly overriding the defaults, just focus <a href="#">on the job</a> and let Mai do its job in the areas you haven't covered.</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum vehicula odio, sit amet fermentum mi consectetur quis. Proin sollicitudin felis augue.</p>
+				</div>
+				<div class="six columns">
+					<blockquote>
+						Quoting an Awesome Guy to pretend Mai is equally awesome. And to test <abbr title="Hypertext Markup Language">HTML</abbr> abbreviations. Pellentesque vestibulum vehicula odio, sit amet fermentum mi consectetur quis. Proin sollicitudin felis augue. Sed ullamcorper est egestas est commodo dictum. Etiam vitae dolor ac felis feugiat tincidunt eu id arcu.
+						<cite title="The Awesome Guy">The Awesome Guy</cite>
+					</blockquote>
+				</div>
+			</div>
+			<div class="row">
+				<p class="twelve columns">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum vehicula odio, sit amet fermentum mi consectetur quis. Proin sollicitudin felis augue. Sed ullamcorper est egestas est commodo dictum. Etiam vitae dolor ac felis feugiat tincidunt eu id arcu. Donec quis lectus id mi rhoncus vehicula nec id metus. Nulla cursus feugiat lorem eu aliquet. Morbi hendrerit metus ac libero adipiscing id tincidunt nisi eleifend. Sed auctor mauris lacus, a molestie erat. Mauris sed tortor lectus. Maecenas ac mattis nisl. Nulla eget augue neque.
+				</p>
+			</div>
+		</div>
+		<div class="four columns">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum vehicula odio, sit amet fermentum mi consectetur quis. Proin sollicitudin felis augue. Sed ullamcorper est egestas est commodo dictum. Etiam vitae dolor ac felis feugiat tincidunt eu id arcu. Donec quis lectus id mi rhoncus vehicula nec id metus. Nulla cursus feugiat lorem eu aliquet.
+			</p>
+			<aside>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum vehicula odio, sit amet fermentum mi consectetur quis. Proin sollicitudin felis augue. Sed ullamcorper est egestas est commodo dictum. Etiam vitae dolor ac felis feugiat tincidunt eu id arcu. Donec quis lectus id mi rhoncus vehicula nec id metus. Nulla cursus feugiat lorem eu aliquet. Morbi hendrerit metus ac libero adipiscing id tincidunt nisi eleifend. Sed auctor mauris lacus, a molestie erat. Mauris sed tortor lectus. Maecenas ac mattis nisl. Nulla eget augue neque.</p>
+			</aside>
+		</div>
+	</div>
+	<hr />
+	<div class="row">
+		<div class="twelve columns">
+			<h2>Lists</h2>
+		</div>
+		<div class="four columns">
+			<h6>ul.disc</h6>
+			<ul class="disc">
+				<li>List item with a much longer description or more content.</li>
+				<li>List item</li>
+				<li>List item
+					<ul>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+					</ul>
+				</li>
+				<li>List item</li>
+				<li>List item</li>
+				<li>List item</li>
+			</ul>
+		</div>
+		<div class="four columns">
+			<h6>ul.circle</h6>
+			<ul class="circle">
+				<li>List item with a much longer description or more content.</li>
+				<li>List item</li>
+				<li>List item
+					<ul>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+					</ul>
+				</li>
+				<li>List item</li>
+				<li>List item</li>
+				<li>List item</li>
+			</ul>
+		</div>
+		<div class="four columns">
+			<h6>ul.square</h6>
+			<ul class="square">
+				<li>List item with a much longer description or more content.</li>
+				<li>List item</li>
+				<li>List item
+					<ul>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+					</ul>
+				</li>
+				<li>List item</li>
+				<li>List item</li>
+				<li>List item</li>
+			</ul>
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="four columns">
+			<h6>ul.no-bullet</h6>
+			<ul class="no-bullet">
+				<li>List item with a much longer description or more content.</li>
+				<li>List item</li>
+				<li>List item
+					<ul>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+					</ul>
+				</li>
+				<li>List item</li>
+			</ul>
+		</div>
+		<div class="four columns">
+			<h6>Ordered Lists</h6>
+			<ol>
+				<li>List Item 1</li>
+				<li>List Item 2
+					<ol>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+						<li>Nested List Item</li>
+					</ol>
+				</li>
+				<li>List Item 3</li>
+			</ol>
+		</div>
+		<div class="four columns">
+			<h6>Definition Lists</h6>
+			<dl>
+				<dt>Definition Title</dt>
+				<dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
+			</dl>
+		</div>
+	</div>
+</body>
+</html>

data/templates/project/manifest.rb

@@ -3,6 +3,9 @@ description 'Mai'
 # Sass Files
 stylesheet 'sass/master.sass', :to => 'master.sass', :media => "screen, projector, print"
 
+# HTML Files
+html 'index.html', :erb => true, :version => Mai::VERSION
+
 help %Q{
 
 Documentation for Mai is available at https://docs.muyo.pl/mai"

data/templates/project/sass/master.sass

@@ -1,2 +1,47 @@
-// Mai base import
-@import mai
+
+// Themes are "setting bundles", ie. they do not contain any classes on their own, but merely provide some starter
+// settings which can differ from Mai's defaults. As such, they should be the very first thing you import, so that you
+// can override a theme's variables if you wish to do so, and so the theme is able to modify Mai's default variables
+// as well.
+//
+// In this example, we are going to use the "Pinky" theme to change out default blueish highlights into violet tone.
+@import mai/themes/pinky
+
+// Override some of Mai's settings to provide an example. (@todo Move settings into a separate directory with all files
+// being commented-out clones of the up-to-date config dir.
+$m-body-line-height: 140%
+$m-body-font-size: 90%
+
+// Import Mai's configuration and utilities. Needed to ensure dependencies of the particular modules are met.
+// If you are sure you know what you're doing and import all required configs and utilities manually, you may do so.
+// However, it shouldn't be necessary as all variables and Mai-specifix mixins are prefixed, so collisions should be
+// a non-issue.
+@import mai
+
+// Import Mai's basic styles - includes normalization, sane defaults for most (if not all) elements and a sensible
+// typographical flow by default.
+@import mai/base
+
+// We are going to inline the print stylesheet to get rid of an additional HTTP request. You may use it in a separate
+// file, however, if you wish to do so. Remember to appropriately set the media types of your stylesheets in your
+// HTML code when you do so, though.
+@import mai/media/print
+
+// In this example, we are only going to use one module - the default grid. If you wish to import all available modules,
+// just do an `@import mai/modules` instead of the below.
+@import mai/modules/grid
+
+
+
+/* Your own stylesheet goes here.
+  ----------------------------------------------------------------------------------------------------------------------
+
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans)
+
+html, body
+  font-family: "Droid Sans", sans-serif
+
+h1
+  margin-top: $m-grid-gutter
+  font-weight: normal
+  color: #b4003b

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mai
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Muyo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-05 00:00:00.000000000 Z
+date: 2013-06-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -38,32 +38,34 @@ files:
 - lib/mai.rb
 - lib/mai/version.rb
 - mai.gemspec
-- sass/_config.sass
 - sass/_mai.sass
-- sass/_modules.sass
-- sass/_utils.sass
-- sass/config/_global.sass
-- sass/config/_grid.sass
-- sass/config/_media.sass
-- sass/config/_type.sass
-- sass/config/_ui.sass
-- sass/modules/_grid.sass
-- sass/modules/_helpers.sass
-- sass/modules/_media.sass
-- sass/modules/_type.sass
-- sass/modules/_ui.sass
-- sass/modules/grid/_base.sass
-- sass/modules/grid/_functions.sass
-- sass/modules/grid/_media.sass
-- sass/modules/grid/media/_base.sass
-- sass/modules/media/_print.sass
-- sass/modules/ui/_forms.sass
-- sass/modules/ui/_tables.sass
-- sass/utils/_context.sass
-- sass/utils/_global.sass
-- sass/utils/_media.sass
-- sass/utils/_rgba.sass
-- sass/utils/_ui.sass
+- sass/mai/_base.sass
+- sass/mai/_config.sass
+- sass/mai/_media.sass
+- sass/mai/_modules.sass
+- sass/mai/_utils.sass
+- sass/mai/base/_base.sass
+- sass/mai/base/_helpers.sass
+- sass/mai/config/_base.sass
+- sass/mai/config/_colors.sass
+- sass/mai/config/_global.sass
+- sass/mai/config/_grid.sass
+- sass/mai/config/_media.sass
+- sass/mai/media/_print.sass
+- sass/mai/modules/_grid.sass
+- sass/mai/modules/grid/_base.sass
+- sass/mai/modules/grid/_functions.sass
+- sass/mai/modules/grid/_media.sass
+- sass/mai/modules/grid/media/_base.sass
+- sass/mai/themes/_pinky.sass
+- sass/mai/themes/pinky/_colors.sass
+- sass/mai/utils/_context.sass
+- sass/mai/utils/_global.sass
+- sass/mai/utils/_media.sass
+- sass/mai/utils/_mobile.sass
+- sass/mai/utils/_rgba.sass
+- sass/mai/utils/_ui.sass
+- templates/project/index.html
 - templates/project/manifest.rb
 - templates/project/sass/master.sass
 homepage: https://github.com/muyo/mai