Week2 floats

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}

.gitignore

@@ -0,0 +1,4 @@
+/bower_components/*
+/.sass-cache/*
+*.DS_Store
+/stylesheets/*

README.md

@@ -0,0 +1,46 @@
+# MKS Front-End Cohort 1 Final Projects
+
+## Your mission, should you choose to accept it...
+
+1. Fork this repo! This will make a copy of it in your own GitHub account. By default you can't edit _this_ repo because you don't have access, but by forking it, you'll have control. Then you can make changes and send me a pull request to add your changes to my project.
+2. `git clone` your newly forked repo into your projects folder. Remember, cloning a repo makes a folder for it, so you don't need to create one first!
+3. `cd` into the `projectlist` directory that has been created.
+4. Confirm you are on the `master` branch by running `git status`. We don't want to make changes against master in case we screw something up, so...
+5. Make a new git branch and check it out: `git checkout -b add-my-project`. 'add-my-project' is the name of my new branch, and `checkout -b` tells git to make a new branch AND go into it.
+6. `git status` should tell you you are now on branch 'add-my-project'.
+7. Follow the install commands below so you can use [bower.io](Bower) to install Foundation, & run Sass!
+8. Add yourself to the project list in `index.html` by duplicating the sample div and adding your content.
+16. Make your project name in `index.html` link to your project page.
+9. `git add --all` to add those changes
+10. `git commit -m "adding MYNAME to project list`
+11. `git push`. It may ask you to set an upstream branch, which means that you have a branch locally but not on github.com. So run the command it asks for!
+12. Now you can go to your repo on github.com and see the branch. You can also compare changes against master.
+12. Make a new file in `/projects` folder called `project-[MYPROJECT].html` where [MYPROJECT] is a short name for your actual final project idea*.
+13. Git add and commit!
+14. Copy the HTML in `projects/project-sample.html` into your new project page and add your own info!
+15. Git add and commit!
+16. Make a new variable in `custom.scss` that is the main color for your project.
+17. Then add an ID and the readable mixin to make your project page have your custom background color and always have readable text.
+17. Git add and commit!
+18. `git push` all your final changes up to github.com.
+19. Now we want to compare your changes to master and merge them back in. GitHub has a handy-dandy Pull Request page that lets us easily see if there are conflicts and what changes we made.
+20. Go to your repo—there should be a yellow banner saying you recently pushed a branch. Click there to compare them. If not, go to your branch in the dropdown and then hit the green Compare button next to it to generate a Pull Request.
+21. Most likely you won't have any conflicts, because you are just making changes against your own branch. Yay! Use the page to merge your changes to your master branch.
+22. NOW we want to generate a pull request against the original repo. This time we'll definitely have merge conflicts! Yikes!
+
+*yes, we know you may not have settled on an idea yet, that's OK.
+
+
+## To Install
+
+Check to see if you have Node installed: `node --version`
+
+If you do not: `brew install node`
+
+Now install Zurb Foundation using Bower: `bower install foundation`
+
+Bower is a package manager, so it will keep Foundation up to date for you!
+
+Run the following command to make Sass watch for changes to your stylesheet: `sass --watch scss/app.scss:stylesheets/app.css`
+
+This says, "Sass, watch the file `scss/app.scss` to see if there are any changes to it. If there are, compile it to regular css at the file `stylesheets/app.css`. Yay!"

bower.json

@@ -0,0 +1,8 @@
+{
+  "name": "foundation-compass-app",
+  "version": "0.0.1",
+  "private": "true",
+  "dependencies": {
+    "foundation": "zurb/bower-foundation"
+  }
+}

config.rb

@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+add_import_path "bower_components/foundation/scss"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

example-02.css

@@ -15,13 +15,17 @@
 .sidebar {
 	float: left;
 	width: 250px;
+	height: 300px;
 }
 
 .main_content {
 	float: left;
+	width: 734px;
+	height: 300px;
 	/* hint! */
 }
 
 .footer {
+	clear: both;
 	/* hint! */
 }

example-03.css

@@ -15,14 +15,21 @@
 
 .sidebar {
 	/* hint! */
+	float: right;
+	width: 250px;
+	height: 300px;
 }
 
 .main_content {
 	/* hint! */
+	float: left;
+	width: 734px;
+	height: 300px;
 }
 
 .footer {
 	/* hint! */
+	clear: both;
 }
 
 /*

example-04.css

@@ -12,21 +12,37 @@
 
 
 .header {}
-/* hint! you have to contain the floated children elements. */
 
+.header:after{
+	display: block;
+	content: "";
+	visibility: hidden;
+	height: 0;
+	clear: both;
+}
+/* hint! you have to contain the floated children elements. */
+
 .logo {
 	/* hint! */
+	float: left;
 }
 
 .navigation {
 	/* hint! */
+	float: right;
 }
 
 .sidebar {
+	float: left;
+	width: 250px;
 }
 
 .main_content {
+	float: left;
+	width: 734px;
+	height: 300px;
 }
 
 .footer {
+	clear: both;
 }

example-05.css

@@ -14,20 +14,46 @@
 .header {}
 /* hint! what do you have to add here? */
 
-.logo {}
+.header:after{
+	display:block;
+	content:"";
+	visibility: hidden;
+	height: 0;
+	clear: both;
+}
 
-.navigation {}
+.logo {
+	float: left;
+}
 
-.sidebar {}
+.navigation {
+	float: right;
+}
 
-.main_content {}
+.sidebar {
+	float: left;
+	height: 115px;
+}
+
+.main_content {
+	overflow: auto;
+}
 /* hint! you have to contain the floated children elements. */
 
 .sub_content {
 	/* hint! */
+	float: right;
+	width: 810px;
+	padding: 20px;
 }
 .sub_content_2 {
 	/* hint! */
+	float: right;
+	clear: right;
+	width: 810px;
+	padding: 20px;
 }
 
-.footer {}
+.footer {
+	clear: both;
+}

example-06.css

@@ -6,15 +6,20 @@
 /* Example 06 */
 
 .container {
-	width: 1024px; /* what happens to the widget boxes when you change this width? */
+	width: 80%; /* what happens to the widget boxes when you change this width? */
+	height: 80%;
 	margin: 0 auto;
 }
 
 
-.main_content {}
+.main_content {
+}
 /* hint! what do you need to add here? */
 
 .widget {
+		float: right;
+		width: 10%; /* what happens to the widget boxes when you change this width? */
+	height: 10%;
 	/* how do you make the widgets float next to each other? */
 	/* what happens when you change float left to float right? why? */
 }

fonts/fonts.css

@@ -0,0 +1,43 @@
+@import url("//hello.myfonts.net/count/2a065d");
+
+
+@font-face {font-family: 'PlutoMedium';src: url('2A065D_0_0.eot');src: url('2A065D_0_0.eot?#iefix') format('embedded-opentype'),url('2A065D_0_0.woff') format('woff'),url('2A065D_0_0.ttf') format('truetype');}
+
+
+@font-face {
+    font-family: 'PlutoSansExtraLight';
+    src: url('plutosans_exlight.eot');
+    src: url('plutosans_exlight.eot?#iefix') format('embedded-opentype'),
+         url('plutosans_exlight.woff') format('woff'),
+         url('plutosans_exlight.ttf') format('truetype'),
+         url('plutosans_exlight.svg#PlutoSansExtraLight') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'PlutoSansRegular';
+    src: url('plutosans_regular.eot');
+    src: url('plutosans_regular.eot?#iefix') format('embedded-opentype'),
+         url('plutosans_regular.woff') format('woff'),
+         url('plutosans_regular.ttf') format('truetype'),
+         url('plutosans_regular.svg#PlutoSansRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'PlutoSansBold';
+    src: url('plutosans_bold.eot');
+    src: url('plutosans_bold.eot?#iefix') format('embedded-opentype'),
+         url('plutosans_bold.woff') format('woff'),
+         url('plutosans_bold.ttf') format('truetype'),
+         url('plutosans_bold.svg#PlutoSansBold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}