Editor of Choice
Let's install GitHub, and log in
Clone your team's repo to your computer
Make a change to your code and commit it.
Click the "master" branch icon and create a new branch.
Call it "gh-pages"
MAGIC!!!!! (you can even work right out of gh-pages)
Fork to your own, create gh-pages branch
Fork your own version of the repo
sync it
View it: username.github.io/repo-name
Goto Github.com
Find your repo
Initiate Pull Request
You can branch instead of fork if you are testing locally.
Can be helpful, but not when we get into Jekyll.
Merge Conflicts
<<<<<<< Head:my-commit
Line 3: Hello World!
=======
Line 3: Hello Mom!
>>>>>>> 4h42k2b2dh36df8:my-commit
<<<<<<< Head:my-commit
Line 3: Hello World!
=======
Line 3: Hello Mom!
>>>>>>> 4h42k2b2dh36df8:my-commit
Github.com > click issues
Use issues as a forum for discussion.
Develop as many tasks that you can think of to implement those sketches into code.
(at least 10)
Look over each task and assign each one to a specific person
Layout?
Design?
Interaction?
etc
You just created your milestones for your mid-term
...and assign them.
In issues list, create your milestones
closes #15
@esteinborn does this look right?
Use Github issues to discuss project grading criteria
As a team decide on 5 grading criteria that you feel will equal a finished midterm.
We'll discuss next week and finalize
"You are your biggest supporter"
Assign yourself to issues (and complete them), it will affect your grade.
Your team needs to be working toward one set of goals. Each of you should pull up your project proposal, pitch them to the group and choose either the best one, or the best parts of 2 or more.
Note:Things to look for:
Your team needs to be working toward one set of goals. Each of you should pull up your project Style Tile, pitch them to the group and choose either the best one, or the best parts of 2 or more.
Note:Things to look for:
What did you come up with?
Rank Top 5
Write Top 3
If tied, write 4th then 5th
IP on the screen.
We'll be using SASS exclusively now.
nav ul .first {}
nav {
ul {
.first {}
}
}
font: {
family: Arial;
size: 20px;
weight: bold;
}
Can be used on any hyphenated attributes.
a { & {..code..} }
★
a { @parent {..code..} }
a { @ref {..code..} }
a {} @prev {..code..}
a {
color:red; }
&:hover {
color: blue; }
.list {}
.list .nav {}
.list .nav li {}
★
.list .nav li a {}
.list .nav li a span {}
Which of these is a valid variable in SASS?
$mq: min-width: 30em;
$mq: 30em;
★
$mq: 1.5;
★
$mq: webkit-min-device-pixel-ratio;
★
@import variables;
import variables;
@import "variables";
★
@import "_variables.scss";
★
import: variables;
Files starting with an "_" are called "partials" they are not compiled themselves, but are referenced from within other sass files.
@charset "UTF-8";
@import "variables";
@import "mixins";
@import "layout/scaffolding";
@import "layout/iefixes";
@import "vendor/jqueryui";
@import "components/missing-person";
@import "components/overlay";
@import "layout/print";
Given the follow code snippet, how many variables should you create?
.main {
width: 5em; height: 5em;
box-sizing: border-box;
color: red;
content: "Hello World!";}
.secondary {
width: 5em; padding: 5em;
box-sizing: border-box;
color: red;
content: "Hello World!";}
Given the follow code snippet, create an extend.
.main {
width: 5em; height: 5em;
box-sizing: border-box;
color: red;
content: "Hello World!";}
.secondary {
width: 5em; padding: 5em;
box-sizing: border-box;
color: green;
content: "Hello Buddy!";}
Answer
.main {
width: 5em; height: 5em;
box-sizing: border-box;
color: red;
content: "Hello World!";}
.secondary {
@extend .main;
color: green;}
What is the expected CSS output of this extend?
.error {
border: 1px;
background-color: red; }
.error.intrusion {
background: orange; }
.seriousError {
@extend .error;
border-width: 3px; }
Wrong Answer...
.error {
border: 1px;
background-color: red; }
.error.intrusion {
background: orange; }
.seriousError {
border: 1px;
background-color: red;
border-width: 3px; }
Answer
.error, .seriousError {
border: 1px;
background-color: red; }
.error.intrusion, .seriousError.intrusion {
background: orange; }
.seriousError {
border-width: 3px; }
@extend works by inserting the extending selector (e.g. .seriousError) anywhere in the stylesheet that the extended selector (.e.g .error) appears.
What color is this P tag in CSS?
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
GREEN
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
How do you reference a mixin?
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
How would you call this to make the color blue and width 1em?
@mixin cool-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include cool-border(blue, 1em); }
Which of the following makes a color darker?
darken();
★
darker();
dark();
makeDark();
Which of the following makes a color lighter?
lighten();
★
lighter();
light();
makeLight();
How do you properly initialize a darken function?
darken(#FFF, 20);
★
darken(20, #FFF);
darken(#FFF, 20%);
★
darken(FFF, 20);
How do you properly initialize a complementary color function?
complement(#bada55);
★
complement(#bada55, 20%);
complement(#bada55, 20);
★
#bada55 * complement();
Which of the following is the correct Media Query Syntax?
@media screen and (min-width: 40em) {}
★
@media not handheld, (max-width: 40em) {}
★
@media (min-device-pixel-ratio: 2.0) {}
★
@media print {}
★
@media screen and (orientation: portrait) {}
★
Screen width must be at least 40em
AND Device must be in Landscape mode
@media (min-width: 40em) and (orientation: landscape) {}
Be careful with orientation. Desktops are "landscape" so are all old (and possibly new) blackberry browsers...
Screen width must be no more than 40em
OR screen height must at least 50em
@media (max-width: 40em), (min-height: 50em) {}
Not handheld devices
@media not handheld {}
Sorry... not really possible, because...
This is what you will do 70% of your work on, with, around, because of, in spite of, or because someone thought it didn't matter and you needed to prove them wrong.
So very, very wrong.
mobile = 100%, after 50em, 1/3 width
HTML:
.grid{I'm a Grid!}*3
SCSS:
.grid {background-color: lightblue;
padding: 1%;
margin: 0;}
box-sizing: border-box;
FTW!
Learn it. Love it. Use it.
Luckily Foundation solves a lot of our issues.
Foundation Off-CanvasWhich of the following is a best practice for laying out form fields?
How would you handle this on mobile?
How would you handle this on mobile?
Read Chapter 5 of RWD book
Sublime Text 2 Super course (compatible with 3 for the most part)