Copy over relevant assets into a ./Layouts
directory.
Make this file to ignore installable components.
.gitignore
1. Finish "Out of this World" markup. | |
2. Styles | |
Create a directory called /stylesheets | |
In your /stylesheets directory, create a stylesheet called styles.css | |
In your index.html, link to your styles.css. | |
Style the layout (do not touch the markup[HTML]). | |
<h1>Fastenate</h1> | |
<ul> | |
<li>Study the EASYMODE Layouts provided. Be sure you are viewing them at Actual Size.</li> | |
<li>Start up a server for your project.</li> | |
<li>Write the Markup for the layout in index.html. unformatted_text.txt has been provided for you so you don't have to type it in.</li> | |
<li>Create an external stylesheet in the styles directory. Link to the stylesheet in your index.html</li> | |
<li>Add a CSS Reset and CSS Clearfix to your styles.</li> | |
<li>Import the Google fonts used in the layout: | |
<br /><b>Oswald Regular, Lato Regular</b></li> |
// d. Media Query Ranges | |
// - - - - - - - - - - - - - - - - - - - - - - - - - | |
$small-range: (0em, 40em); | |
$medium-range: (40.063em, 64em); | |
$large-range: (64.063em, 90em); | |
$xlarge-range: (90.063em, 120em); | |
$xxlarge-range: (120.063em, 99999999em); | |
$screen: "only screen"; |
@import "http://fonts.googleapis.com/css?family=Lato:400,700.css"; | |
@import "partials/settings"; | |
@import "../public/bower_components/foundation/scss/foundation.scss"; | |
$break-small: 480px; | |
$break-medium:768px; | |
$flappy-dark-grey:#2B2D33; | |
$flappy-blue:#00CCCC; | |
body{ | |
background-color:$flappy-dark-grey; |
// Your markup may be different. The following styles only apply for this markup snippet: | |
// <header id="page_header"> | |
// <div class="row"> | |
// <div class="large-6 medium-3 small-12 columns"> | |
// <div class="title"> | |
// <h1> | |
// <span class="flappy">flappy</span> | |
// <span class="app">app</span> | |
// </h1> |
// Requires a custom media query $medium-down | |
// Uses the following markup: | |
// <nav class="top-bar" data-topbar role="navigation"> | |
// <ul class="title-area"> | |
// <li class="name"> | |
// <a href="#" class="clearfix"> | |
// <div class="logo_image"></div> | |
// <h1> | |
// <span id="flappy">Flappy</span> |
Closure | |
a closure is the local variables for a function - kept alive after the function has returned | |
a closure is a stack-frame which is not deallocated when the function returns | |
// scope | |
function outer_scope() { |
//callbacks | |
var counter = 0; | |
var english = ["zero","one","two","three"]; | |
function increase( cb ){ | |
counter = counter + 1; | |
var counter_in_english = english[counter]; | |