Susy Grid - Revision history

Bacchas: /* Using susy Pad function */

2016-08-14T20:41:19Z

Using susy Pad function

← Older revision		Revision as of 20:41, 14 August 2016
Line 156:		Line 156:
	@include pad(3,1);		@include pad(3,1);
	This will offset it 3 columns form the left and 1 column from the right		This will offset it 3 columns form the left and 1 column from the right
	---		----

	==[[#Responsive Design using Breakpoint\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Responsive Design using Breakpoint\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 20:40, 14 August 2016

2016-08-14T20:40:59Z

← Older revision		Revision as of 20:40, 14 August 2016
Line 156:		Line 156:
	@include pad(3,1);		@include pad(3,1);
	This will offset it 3 columns form the left and 1 column from the right		This will offset it 3 columns form the left and 1 column from the right
	--		---
	==[[#Responsive Design using Breakpoint\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Responsive Design using Breakpoint\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 20:40, 14 August 2016

2016-08-14T20:40:33Z

← Older revision		Revision as of 20:40, 14 August 2016
Line 152:		Line 152:

	</pre>		</pre>
			== Using susy Pad function ==
			The pad function will offset your column x left by x right
			@include pad(3,1);
			This will offset it 3 columns form the left and 1 column from the right
			--
	==[[#Responsive Design using Breakpoint\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Responsive Design using Breakpoint\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 20:38, 14 August 2016

2016-08-14T20:38:08Z

← Older revision		Revision as of 20:38, 14 August 2016
Line 72:		Line 72:
	$wide: 1200px;		$wide: 1200px;

	.navbar {		.navbar {
	@include container;		@include container;
	.brand{		.brand{
	@include span(4);		@include span(4);
	float: left ;		float: left ;
	font-weight: $bold;		font-weight: $bold;
	font-family: $headFont;		font-family: $headFont;
			text-align: center ;
			text-transform: uppercase ;
			background: $navBrandBg;
			a{
			color: $navForeground;
			text-decoration: none ;
	text-align: center ;		text-align: center ;
	~~text-transform: uppercase ;~~		display: inline-block ;
	~~background: $navBrandBg;~~		padding: 10px;
	a{		font-size: 1.5em ;
	~~color: $navForeground;~~
	~~text-decoration: none ;~~		@include breakpoint(max-width $small){
	~~text-align: center ;~~		font-size: 1.2em ;
	display: inline-block ;		span{
	padding: 10px;		display: none ;
	font-size: 1.5em ;

	@include breakpoint(max-width $small){
	font-size: 1.2em ;
	span{
	display: none ;
	}
	}		}
	} // a		}
	} //brand		} // a
	ul {		} //brand
	@include span(8 at 4 of 12);		ul {
	li{		@include span(8 at 4 of 12);
	float: left ;		li{
	a{		float: left ;
	color: $navForeground;		a{
	font: $mainFont;		color: $navForeground;
	font-size: 1em;		font: $mainFont;
	display: inline-block;		font-size: 1em;
	padding: 10px 10px 10px 45px;		display: inline-block;
	text-decoration: none ;		padding: 10px 10px 10px 45px;
	// icon styles		text-decoration: none ;
	~~-webkit-background-size: 35px;~~		// icon styles
	~~-o-~~background-size: 35px;
	~~background-size: 35px;~~		background-size: 35px;
	background-repeat: no-repeat ;		background-repeat: no-repeat ;
	background-position: 2px;		background-position: 2px;
	&.info {background-image: url(../../images/icons/info.png);}		&.info {background-image: url(../../images/icons/info.png);}
	&.rooms {background-image: url(../../images/icons/rooms.png);}		&.rooms {background-image: url(../../images/icons/rooms.png);}
	&.dining {background-image: url(../../images/icons/dining.png);}		&.dining {background-image: url(../../images/icons/dining.png);}
	&.events {background-image: url(../../images/icons/events.png);}		&.events {background-image: url(../../images/icons/events.png);}
	&.attractions {background-image: url(../../images/icons/attractions.png);}		&.attractions {background-image: url(../../images/icons/attractions.png);}
	&:hover {		&:hover {
	background-color: $navHover;		background-color: $navHover;
	color: $blue;		color: $blue;
	} // hover		} // hover
	@include breakpoint(0 $small){		@include breakpoint(0 $small){
	padding: 10px 18px;		padding: 10px 18px;
	&::after{		&::after{
	content:'\000a0';		content:'\000a0';
	display: block ;		display: block ;
	}		}
	span{		span{
	display: none ;		display: none ;
	} // sapn		} // sapn
	}//breakpoint		}//breakpoint
	@include breakpoint($small $medium){		@include breakpoint($small $medium){
	padding: 10px ;		padding: 10px ;
	&.icon {		&.icon {
	background-image: none ;		background-image: none ;
	}// breakpoing		}// breakpoing
	}		}

	} // a		} // a
	}// li		}// li
	}		}
	} // navbar		} // navbar
	} // nav		} // nav
	</pre>		</pre>

Bacchas at 20:34, 14 August 2016

2016-08-14T20:34:03Z

← Older revision		Revision as of 20:34, 14 August 2016
Line 67:		Line 67:

	<pre>		<pre>
	$small: ~~500px~~;		$narrrow: 400px;
	$~~large~~: 1200px;		$small: 650px;
			$medium: 960px;
	breakpoint($small)		$wide: 1200px;
	{
	~~main~~ { @include span(8);		.navbar {
	}		@include container;
			.brand{
	~~aside~~ {		@include span(4);
	~~@include span~~(~~4 at 9~~);		float: left ;
	}		font-weight: $bold;
			font-family: $headFont;
	@include breakpoint($~~large~~){		text-align: center ;
	~~@include layout(24)~~;		text-transform: uppercase ;
			background: $navBrandBg;
	~~main~~ {		a{
	@include ~~span~~(21);		color: $navForeground;
	~~.col1, .col2,~~ .~~col3~~ {		text-decoration: none ;
	~~@include span(8)~~;		text-align: center ;
	}		display: inline-block ;
	}		padding: 10px;
			font-size: 1.5em ;

			@include breakpoint(max-width $small){
			font-size: 1.2em ;
			span{
			display: none ;
			}
			}
			} // a
			} //brand
			ul {
			@include span(8 at 4 of 12);
			li{
			float: left ;
			a{
			color: $navForeground;
			font: $mainFont;
			font-size: 1em;
			display: inline-block;
			padding: 10px 10px 10px 45px;
			text-decoration: none ;
			// icon styles
			-webkit-background-size: 35px;
			-o-background-size: 35px;
			background-size: 35px;
			background-repeat: no-repeat ;
			background-position: 2px;
			&.info {background-image: url(../../images/icons/info.png);}
			&.rooms {background-image: url(../../images/icons/rooms.png);}
			&.dining {background-image: url(../../images/icons/dining.png);}
			&.events {background-image: url(../../images/icons/events.png);}
			&.attractions {background-image: url(../../images/icons/attractions.png);}
			&:hover {
			background-color: $navHover;
			color: $blue;
			} // hover
			@include breakpoint(0 $small){
			padding: 10px 18px;
			&::after{
			content:'\000a0';
			display: block ;
			}
			span{
			display: none ;
			} // sapn
			}//breakpoint
			@include breakpoint($small $medium){
			padding: 10px ;
			&.icon {
			background-image: none ;
			}// breakpoing
			}

	~~aside {~~		} // a
	~~@include span(3 at 21);~~		}// li
	}		}
			} // navbar
			} // nav
	</pre>		</pre>
	== Breakpoint mixin ==		== Breakpoint mixin ==

Bacchas at 16:48, 12 August 2016

2016-08-12T16:48:53Z

@@ Line 1: / Line 1: @@
 == Grid Global Setting (Maps) _grid.scss ==
 <pre>
@@ Line 54: / Line 63: @@
 </pre>
 == To use breakpoint, wrap your code into a breakpoint function ==
@@ Line 99: / Line 100: @@
 </pre>
-[[#Grid Global Setting (Maps)|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]
+==[[#Responsive Design using Breakpoint|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Bacchas: /* Responsive Design using Breakpoint */

2016-08-12T12:41:32Z

Responsive Design using Breakpoint

← Older revision		Revision as of 12:41, 12 August 2016
Line 59:		Line 59:
	Breakpoint needs to be installed		Breakpoint needs to be installed
	gem install breakpoint		gem install breakpoint
	@ require 'breakpoint'; // in the config.rb file		require 'breakpoint' // in the config.rb file

	</pre>		</pre>

Bacchas: /* Grid Global Setting (Maps) */

2016-08-12T12:40:29Z

Grid Global Setting (Maps)

← Older revision		Revision as of 12:40, 12 August 2016
Line 1:		Line 1:
	== Grid Global Setting (Maps) ==		== Grid Global Setting (Maps) _grid.scss ==
	<pre>		<pre>
	// Requirements		// Requirements
Line 44:		Line 44:

	</pre>		</pre>

	== Shorthand syntax for layout maps ==		== Shorthand syntax for layout maps ==

Bacchas at 15:53, 9 August 2016

2016-08-09T15:53:42Z

← Older revision		Revision as of 15:53, 9 August 2016
Line 98:		Line 98:

	</pre>		</pre>
			[[#Grid Global Setting (Maps)\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]

Bacchas at 21:16, 5 August 2016

2016-08-05T21:16:52Z

← Older revision		Revision as of 21:16, 5 August 2016
Line 1:		Line 1:
			== Grid Global Setting (Maps) ==
			<pre>
			// Requirements
			// ============
			@import "compass";
			@import "susy";


			$susy: (
			flow: ltr, // ltr \| rtl
			output: float, // float \| isolate
			math: fluid, // fluid \| static (requires column-width)
			column-width: false, // false \| value
			container:700px, // length or % \| auto
			container-position: center, // left \| center \| right \| <length> [*2] (grid padding)
			last-flow: to,
			columns: 12,
			gutters: 1/4,
			gutter-position: after, // before \| after \| split \| inside \| inside-static (requires column-width)
			global-box-sizing: border-box, // content-box \| border-box (affects inside/inside-static)
			debug: (
			image: show,
			color: rgba(#656, .25),
			output: background,
			toggle: top right,
			),
			use-custom: (
			background-image: true,
			background-options: false,
			box-sizing: true,
			clearfix: false,
			rem: true,
			)
			);
			// you can defing a second grid for different scaling
			$widelayout: (
			columns: 24,
			gutters: 1/4,
			math: fluid,
			output: float,
			gutter-position: inside,

			);

			</pre>
			== Shorthand syntax for layout maps ==

			<pre>
			@include layout(24 1/4 fluid float inside);
			// 960 grid
			@include layout(12(60px 10px) split static);
			// you need to set your @include container(960px);
			</pre>

	== Responsive Design using Breakpoint ==		== Responsive Design using Breakpoint ==