@import breakpoint
@import breakpoint-slicer
@import compass 
@import ../framework/mixins/glob-fontstacks
@import ../framework/mixins/glob-fontsize
@import ../variables-base  
@import ../variables-style 
@import ../framework/functions/helper

@function fzsg($size)
	@if $body-typo-based == px
		@return $size + px
	@if $body-typo-based == rem
		@return rem($size)

/*! =================================================================================
	Styleguide for '<%= appname %>'                                 
	=================================================================================
	
	- BEHAVIOR ----------------------------------------------------------------------
	IE7 Compatible : #{$comp-ie7}
	IE8 Compatible : #{$comp-ie8} 

	Grid           : #{$activate-grid} 
	New Boxmodel   : #{$activate-box-sizing}
	Baseline       : #{$activate-baseline}

	Breakpoints    : #{$breakpoints} 

	- TYPOGRAPHY --------------------------------------------------------------------
	Font Sized based on  : #{$body-typo-based}
	
	Base Font Family : #{nth($font-style-text,1)}
	Head Font Family : #{$font-heading-family}

	Base Font Size   : #{fzsg($body-font-size)}
	Base Line Height : #{fzsg($body-line-height)}
	H1 Size          : #{fzsg(nth($font-h1-style,1))}
	H2 Size          : #{fzsg(nth($font-h2-style,1))}
	H3 Size          : #{fzsg(nth($font-h3-style,1))}
	H4 Size          : #{fzsg(nth($font-h4-style,1))}
	H5 Size          : #{fzsg(nth($font-h5-style,1))}
	H6 Size          : #{fzsg(nth($font-h6-style,1))}
	P Size           : #{fzsg(nth($font-p-style,1))}

	- LAYOUT ------------------------------------------------------------------------
	Site Position  : #{nth($site-position,1)}
	Max Site Width : #{nth($layout-fluid-behavior,1)}px
	Min Site Width : #{nth($layout-fluid-behavior,2)}px 
	Site End Width : #{$site-minimal-width}px

	- Grid Global ------------------------------------------------------------------
	Push&Pull : #{$grid-pushpull-option}
	Offset    : #{$grid-offset-option}

	- Main Grid --------------------------------------------------------------------
	Starts at  : #{nth($layout-fluid-behavior,1)}px
	Ends at    : #{nth($layout-fluid-behavior,2)}px 
	Colums     : #{nth($layout-base-style,1)}
	Gutter     : #{nth($layout-base-style,2)}px
	Site Space : #{nth($layout-base-style,3)}px

	- Small Grid -------------------------------------------------------------------
	Starts at  : #{nth($layout-second-grid,1)}px
	Ends at    : #{$bp-mobile}px 
	Colums     : #{nth($layout-second-grid,2)}
	Gutter     : #{nth($layout-second-grid,3)}px
	Site Space : #{nth($layout-second-grid,4)}px

	- Vertical Grid ---------------------------------------------------------------
	Height Classes  : #{nth($grid-height-generate,1)} classes
	Margin Classes  : #{nth($grid-height-generate,2)} classes
	Padding Classes : #{nth($grid-height-generate,3)} classes

	- Responsive Vertical Grid ----------------------------------------------------
	Height Classes  : #{nth($grid-res-height-generate,1)} classes
	Margin Classes  : #{nth($grid-res-height-generate,2)} classes
	Padding Classes : #{nth($grid-res-height-generate,3)} classes

	- Block Grid ------------------------------------------------------------------
	Blockgrids       : #{nth($grid-blockgrid,1)}
	Blockgrid Gutter : #{nth($grid-blockgrid,2)}px
	
	- Round Classes ---------------------------------------------------------------
	Round Normal : #{$round-normal} (px)
	Round Light  : #{$round-light} (px)
	Round Slight : #{$round-slight} (px)
	
	- Colors ----------------------------------------------------------------------
	Primary         : #{$c-primary}
	Secondary       : #{$c-secondary}
	Third           : #{$c-third}
	Fourth          : #{$c-fourth}
	Fifth           : #{$c-fifth}
	Sixth           : #{$c-sixth}

	Alert           : #{$c-alert}
	Success         : #{$c-success}
	Warning         : #{$c-warning}
	Highlight       : #{$c-highlight}

	Black           : #{$c-black}
	White           : #{$c-white}
	Darkgray        : #{$c-darkgray}
	Gray            : #{$c-gray}
	Lightgray       : #{$c-lightgray}

	Body Background : #{$c-body}

	Text Color      : #{$tc-text}
	Text Color Soft : #{$tc-text-soft}

	Heading         : #{$tc-heading}
	Heading Sub     : #{$tc-heading-sub}

	Blockquote      : #{$tc-blockquote}

	Caption         : #{$tc-caption}

	Label           : #{$tc-form-label}

	Form Input      : #{$tc-form-input}
	Form Placeholder: #{$tc-form-placeholder}

	Link            : #{nth($tc-link,1)}
	Link Hover      : #{nth($tc-link,2)}
	Link Active     : #{nth($tc-link,3)}
	
	- Sprite ----------------------------------------------------------------------
	Sprite Name   : #{$image-dir-sprite}
	Retina Sprite : #{$image-sprite-retina}

	- Iconfont --------------------------------------------------------------------
	Icon Font Name : #{$icon-font-name}

	---------------------------------------------------------------------------------