Toadstool/stipe concept attempt

1.txt

Trying to learn to work with toadstool/stipe grid and module concept. There are 2 concepts that I am trying to get right. I'm hoping to find out if I am doing this right, and if not, what I should be doing to follow this concept properly.

Demo link: http://bit.ly/KrXcGp

Premise: Starting with a single column mobile theme, and switching layout and module layout via media query for larger screens.

1. layout starts single column (no grid) on mobile, then adjusts when >768px

I was not able to use @extend %grid_8_4 within a media query, thus using 2 separate 'grids' in the media query.
**THIS Can't be right, so obviously I am missing a major concept of the grid**

2. Module (post)
I have many content types that will all include a header, entry-meta, entry-content/entry-summary, and an aside.

Using the stitch module as an example, I built this module with the intention of having everything 'stack' on top of each other when in mobile view.

Using a media query, the 'figure' is moved over to the left via negative margin.

**Is this the concept of stitch modules that you are promoting?**
****What could I do better, given the concept?

style.scss

// establish a 100% width block that floats center
.main_wrap {
	@extend %grid_full_center;

		.main_aside {
			background: orange;
			padding: em(10);
		}
	@include tablet-landscape-and-up(){
		// establish main aside within the main contnet block
		.main_aside {
			@include grid(4, $grid_padding_lr: 0, $grid_padding_tb: 0, $grid_border: 0);
			@include alpha;
			@include omega;
		}

		// establish main article within the main content block
		.main_content {
			@include grid(8, $grid_padding_lr: 0, $grid_padding_tb: 0, $grid_border: 0);
		}
	}
}
// establish a 100% width block that floats center
.site-footer {
	@extend %grid_full_center;
	background: blue;
	padding: em(10);
}




// css 'truncate' function [tags, category lists, etc]
@mixin one-line() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



// ====================================================================
// Post Archive View Module
// ====================================================================
@mixin post($margin-bottom: em(20), $padding: em(10) em(20)) {
	display: block;
  	padding: $padding;
  	overflow: hidden;
	background: yellow;

	&:not(.single):not(:last-of-type) {
			margin-bottom: $margin-bottom;
	}
	header h2{
		margin-bottom: 0;
	}
	.entry-meta {
		@include one-line;
	}
	.entry-summary, .entry-content {
		padding: em(10) 0;
	}
	aside figure {
		padding-top: em(10);
		text-align: center;
	}

}
.post {
	@include post();
	&:not(.single):not(:last-of-type) {
    	border-bottom: 1px solid $border-color;
	}
	@include tablet-landscape-and-up(){
			background:red;
			padding-left: 31.914%;
			padding-right: em(10);
			aside figure{
				float: left;
				margin-left: -47%;
				margin-top: em(-40);
				position: relative;
				padding: em(0) em(20) em(10);
				text-align: left;
				width: 34.375%;
				.by-author {
					display: block;
				}
			}
	}
}

y-index.php

<div class="main_wrap">

	<section class="main_content">

				<?php if ( have_posts() ) : ?>

					<?php while ( have_posts() ) : the_post(); ?>

						<?php get_template_part( 'templates/loops/content', get_post_format() ); ?>

					<?php endwhile; ?>

					<?php tumble_pagination($pages = '', $range = 2) ?>

					<?php else : ?>

						<?php get_template_part( 'templates/parts/no-content'); ?>

				<?php endif; ?>

	</section>

	<aside class="main_aside">
					<?php get_sidebar('primary'); ?>
	</aside>

</div>

z-article-loop.php

<article id="post-<?php the_ID(); ?>" <?php post_class( 'boxed' ); ?> role="main">

		<header class="entry-header">

			<?php if ( is_sticky() ) : ?>

				<hgroup>
					<h2 class="entry-title">
						<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tumble' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
					</h2>
					<h2 class="entry-format">
						<?php _e( 'Featured', 'tumble' ); ?>
					</h2>
				</hgroup>

			<?php else : ?>

				<hgroup>

					<div class="post-format-icon"></div>
					<h2 class="entry-title">
						<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tumble' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
					</h2>

				</hgroup>

			<?php endif; ?>
			
		</header>
		<aside>

			<?php if ( 'post' == get_post_type() ) : ?>

				<div class="entry-meta">
					<?php
						// defined in functions/template-functions.php
						tumble_posted_on();
					?>
				</div><!-- .entry-meta -->

			<?php endif; ?>

			<?php if ( get_post_meta($post->ID, '_format_video_embed', true) ) : ?>

        		<figure class="format-video">

					<?php echo get_post_meta($post->ID, '_format_video_embed', true); ?>
                	<figcaption><?php the_title(); ?></figcaption>

        		</figure>

 			<?php elseif (has_post_thumbnail()) :{ ?>

 				<?php
					$thumb = get_post_thumbnail_id();
					$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
					$image = aq_resize( $img_url, 600, 400, true ); //resize & crop the image
				?>

 				<figure class="post-thumb-featured">
					<?php if($image) : ?>
						<img src="<?php echo $image ?>"/>
					<?php endif; ?>
	         	</figure>

        	<?php } ?>

			<?php endif; ?>

		</aside><!-- .entry-header -->

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>

			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->

			<?php else : ?>

			<div class="entry-content">

				<?php the_excerpt( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'tumble' ) ); ?>
				<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'tumble' ) . '</span>', 'after' => '</div>' ) ); ?>

			</div><!-- .entry-content -->

		<?php endif; ?>

		<footer class="entry-meta">
			<?php $show_sep = false; ?>
			<?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
			<?php
				/* translators: used between list items, there is a space after the comma */
				$categories_list = get_the_category_list( __( ', ', 'tumble' ) );
				if ( $categories_list ):
			?>
			<span class="cat-links">
				<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'tumble' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
				$show_sep = true; ?>
			</span>
			<?php endif; // End if categories ?>
			<?php
				/* translators: used between list items, there is a space after the comma */
				$tags_list = get_the_tag_list( '', __( ', ', 'tumble' ) );
				if ( $tags_list ):
				if ( $show_sep ) : ?>
			<span class="sep"> | </span>
				<?php endif; // End if $show_sep ?>
			<span class="tag-links">
				<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'tumble' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
				$show_sep = true; ?>
			</span>
			<?php endif; // End if $tags_list ?>
			<?php endif; // End if 'post' == get_post_type() ?>

			<?php if ( comments_open() ) : ?>
			<?php if ( $show_sep ) : ?>
			<span class="sep"> | </span>
			<?php endif; // End if $show_sep ?>
			<span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'tumble' ) . '</span>', __( '<b>1</b> Reply', 'tumble' ), __( '<b>%</b> Replies', 'tumble' ) ); ?></span>
			<?php endif; // End if comments_open() ?>

			<?php edit_post_link( __( 'Edit', 'tumble' ), '<span class="edit-link">', '</span>' ); ?>
		</footer><!-- #entry-meta -->

</article><!-- #post-<?php the_ID(); ?> -->