Section 2: Responsive Prototype

#Markup - Content First!

• Change <title> to UX Cadet
• <header>

header.main
	h1: img#logo(src="img/ux_cadet_logo.svg", alt="UX Cadet")

• Add video placeholder

section#main
	#video
		img(src="img/vimeo_placeholder.svg", alt="video placeholder")
	footer
		h2 Champion the users
		p Sharpen your user experience skills, stretch your experience, and collaborate with other industry professionals

• Add side sign up/sign in forms

aside#signin
	.request-invite
		header
			h2 Good things are happening.
			p Stay in the loop.
		form#request-invite-form
			.email-input: input(type="email", placeholder="email")
			.submit: input(type="submit", value="Request an invite")
	hr
	.signin
		p Have an invitation?
		form#signin-form
			.text-input: input(type="text", placeholder="username or email")
			.password-input: input(type="password", placeholder="password")
			.submit: input(type="submit", value="Sign In")

• Add footer

footer
	nav.social: ul
		li: a(href="#") Twitter
		li: a(href="#") Github
		li: a(href="#") Behance
	nav.site-links: ul
		li: a.contact(href="#") Contact
		li: a.contact(href="#") Terms
	.copyright © 2013 UX Cadet.
	.location Made with ♥ in Austin at SXSW

#Edge Web Fonts

• In index.jade add js

script(src="http://use.edgefonts.net/lato:n4,n7.js")

• In main.styl add font to body

body
	font-family 'lato' sans-serif
	background #333

#With Style

• In index.jade, take width and height out, and add id

h1: img#logo(src="img/ux_cadet_logo.svg", alt="UX Cadet")

in main.styl

• In main.styl style header

header.main
	padding 20px 0
	text-align center

• In main.styl style #logo

#logo
	width 110px
	height 100px

• In index.jade, wrap header and #content in .site_bg
• In main.styl, fix selector - .site_bg > header
• add gradient

.site_bg
	background-color #283751
	background-image -webkit-linear-gradient(top, rgb(40, 55, 81), rgb(91, 133, 169))
	background-image -moz-linear-gradient(top, rgb(40, 55, 81), rgb(91, 133, 169))
	background-image -ms-linear-gradient(top, rgb(40, 55, 81), rgb(91, 133, 169))
	background-image linear-gradient(top, rgb(40, 55, 81), rgb(91, 133, 169))
	position relative
	padding-bottom 40px
	&:after
		content ''
		position absolute
		bottom 0
		width 100%
		height 30px
		background url('../img/ground_bg.svg') no-repeat bottom center

• add ground

	&:after
		content ''
		position absolute
		bottom 0
		width 100%
		height 30px
		background url('../img/ground_bg.svg') no-repeat bottom center

• style content

#content
	width 100%
	max-width 520px
	position relative
	margin 0 auto

• Responsify the placeholder

#video img
	width 100%
	height auto

• style #main

#main, #signin
	background #CCC
	box-shadow 0 2px 2px rgba(0,0,0,0.25)	

• style h2 and p in #content

	h2
		text-shadow 0 1px 0 rgba(255,255,255,1)
		font-weight bold
		font-size 21px
		margin-bottom 10px
	p
		text-shadow 0 1px 0 rgba(255,255,255,0.7)

• style #main footer

#main footer
	margin-bottom 20px
	padding 15px 14px 20px

• style #signin

#signin 
	padding 15px
	position relative

• style hr in #signin

	hr
		position relative
		margin 15px -5px
		height 1px
		background #999
		top 0
		left 0
		box-shadow 0 1px 0 #e6e6e6

• style form in #signin

	form
		padding 10px 0

• style inputs

.email-input input, .text-input input, .password-input input
	border 1px solid #999
	border-radius 3px
	padding 8px 6px
	box-shadow inset 0 1px 1px rgba(0,0,0,0.15)
	width 100%
	box-sizing border-box
.submit input
	background #242e47
	border none
	border-radius 3px
	color #FFF
	width 100%
	text-align center
	padding 10px 0
	text-shadow 0 1px 0 #000

• style body > footer

body > footer
	text-align center
	font-size 12px
	color #666
	padding 10px 0
	li
		display inline-block
		border-left 1px solid #666
		margin 5px 0 5px -2px
		padding 0 8px
		&:first-child
			border-left none
			margin 5px 0
	a
		color #C49457
		text-decoration none
		&:hover
			text-decoration underline
	nav.site-links
		margin-bottom 10px
	.copyright, & .location
		font-size 10px

#Media Queries!

• style logo

@media only screen and (min-width: 420px)
	#logo
		width 165px
		height 150px

• layout the forms horizontally

@media only screen and (min-width: 420px) and (max-width: 740px)
	#signin
		padding 0
		h2
			font-size 18px
		.request-invite, & .signin
			width 49%
			padding 15px
			box-sizing border-box
		.request-invite
			float left
		.signin
			float right
		hr
			position absolute
			margin 0
			left 50%
			top 5%
			height 90%
			width 1px
			box-shadow 1px 0 0 #e6e6e6

• In index.jade add .site inside .site_bg

.site_bg
	.site
		header.main

• In main.styl layout the aside next to the video

@media only screen and (min-width: 740px)
	#logo
		width 220px
		height 200px
	.site
		width 700px
		margin 0 auto
		position relative
	#content
		margin 0
		max-width 100%
		h2
			margin-bottom 6px
	#main
		width 520px
		float left
		footer
			padding-bottom 0
	#signin
		width 160px
		height 290px
		float right
		box-sizing border-box
		padding 10px
		hr
			margin 0 -5px 12px
	.email-input input, .text-input input, .password-input input
		padding 6px 4px
	.submit input
		padding 6px 0

• Add additional bg

	.site_bg
		padding-bottom 230px
		&:after
			background url('../img/ground_bg.svg') no-repeat bottom center
		&:before
			content ''
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			background url('../img/home_bg.svg') no-repeat bottom center
			background-size cover