Journey Into Mobile - Level 4

Notes from Code School's Journey Into Mobile - Level 4 (Responsive Adventures)

• The Mobile First Approach
• Responsive Applied
• Advanced Media Queries

The mobile first approach:

prepares you for the explosive growth and new opportunities on the mobile internet, ... forces you to focus, ... enables you to innovate in ways you previously couldn't. -Luke Wroblewski (Mobile First, 5)

The mobile first approach forces you to focus on the most important things, like simplify the content, prioritize layout, and optimize user experience. In mobile, you don't have nearly as much screen real estate, the space you have is more valuable, forcing you to prioritize what is most important.

Is responsive design the same as adaptive?

• all responsive are adaptive
• not all adaptive designs are responsive

Responsive designs are basically fluid sites with a series of break points. Whereas adaptive design is selectively adapted for the context you are targeting.

Responsive designs provide continuity between contexts... Responsive designs are portable and accessible. -Ethan Marcotte

 Responsive Applied

In responsive design content determines the break points. In adaptive design, the height and width determine the break points, but in responsive design where the content breaks down is where the break points are.

Taking a look at our demo site from level 3, if we narrow our browser window, we'll see that at around 870px our header starts to get crowded. This will be our first breakpoint.

In this case, there is a new logo image and we will move all the location information below it.

/* <870px */
@media screen and (max-width: 870px) {
  
  /* Header */
  h1 {
    background: url(images/logo_l.png) no-repeat;
    height: 105px;
    margin: 0 auto;
    width: 400px;
  }
  .location {
    background-color: #26343e;
    float: none;
    min-height: 85px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
  }

Now at 768px, our menu items start to get too narrow and the text is hard to read. Also note that 768px is the width of an ipad, so while it's a good idea to make break points based on content, also keep in mind the widths of common mobile devices. To adjust for our mobile layout, we will stack the menu blocks one above another.

/* <768px */

@media screen and (min-width: 768px) {

  /* -- section -- */

  .box {

    padding: 10px;

    margin: 20px auto;

    width: inherit;

  }

  .beverage {

    float: none;

  }

  .cuisine {

    float: none;

  }

Next, at about 510px, our contact information starts to break below the location information:

    BUT, because we already have a media query at 480px (adapted for the iphone standard screen in level 3), we can just change the 480px media query to 510px. We are able to do this because we are using a fluid layout that scales easily.

/* <480px */
  @media screen and (max-width: 480px) {
}

becomes:

/* <510px */
  @media screen and (max-width: 510px) {
}

Advanced Media Query Options

Here are some advanced media query options from Responsive Web Design by Ethan Marcotte.

For example, instead of defining a screen size, you could use portrait and landscape modes.

/* Portrait */
@media screen and (orientation: portrait) {
  
  /* portrait styles */
}

/* Landscape */
@media screen and (orientation: landscape) {

 /* landscape styles */
}

Front End Formations: Level 4

Notes from Code School's Front End Formation: Level 4

CSS3

• border radius
• box shadow
• text shadow (not CSS3 but covered here)
• box sizing
• multiple backgrounds
• color
• opacity
• gradients

Border Radius

The border radius property allows us to apply rounded corners to borders.

grey box

An example of a regular box (and our box base):

.box {

  background: grey;

  height: 50px;

  width: 200px;

}

To apply rounded corners do:

.box {

  border-top-left-radius: 15px;

  border-top-right-radius: 15px;

  border-bottom-right-radius: 15px;

border radius 15px

  border-bottom-left-radius: 15px;

}

or you can use the shorthand if all the corners are the same:

.box {

  border-radius: 15px;

}

If you have different values for the various corners you can use the shorthand like this:

.box {

  border-radius: 4px 15px 12px 10px;

}

border-radius applied with each corner a different value

border-radius: <top left> <top right> <bottom right> <bottom left>

In addition to using pixel values you can use percentages to set the border-radius property. E.g.

.box {

  border-radius: 50%;

}

border-radius: 50%

A 50% border-radius gives our rectangle an oval shape, but if the original shape had an equal height and width (square), a border-radius of 50% would make it a circle.

Box Shadow

Allows us to apply a shadow to a given element.

.box {

  box-shadow: 1px 2px 2px #000;  /* <1px to the right> <2px down> <2px spread radius> <#000 color> */ 

}

box-shadow drop shadow

box-shadow: <inset> <offset-x> <offset-y> <blur radius> <spread radius> <color>;

Properties of Box Shadow

<inset> (optional) If it is not specified (which is the default), a drop shadow is created rather than an inset shadow. If you use the keyword inset then the box will have an inset shadow.

<offset-x> The offset-x value will move the shadow along the x-axis (left or right).

<offset-y> The offset-y value will move the shadow along the y-axis(up or down).

<blur-radius> (optional) The blur-radius alters the blur amount of the shadow, cause it to become bigger and ligher (with a larger value).

<spread-radius> (optional) The spread-radius causes the shadow to expand or shrink to adjust the size of the shadow. (if not specified will be the same size as the element)

<color> (optional) The color of the shadow itself.

What if you want to set the spread-radius, but not the blur-radius? Because blur-radius comes before spread-radius in the shorthand property order, you must specify the blur-radius as 0, the put in a spread-radius. e.g.

.box {

  box-shadow: 1px 2px 0 2px #000;

}

Blur-Radius Property vs. Spread-Radius Property

Blue-radius will appead to get lighter/fades as it gets larger and moves away from the element (gradient style). Spread-radius stays the same solid color as it gets larger, creating a sort of dark background.

blur-radius vs. spead-radius

Multiple Box-Shadows

You can specify multiple box-shadows on one element through a comma delimited list. The example below has a small black drop shadow and a blue inset shadow.

.box {

  box-shadow:

    1px 1px 2px #000,

    inset 1px 1px 2px blue;

}

multiple box-shadows, both drop-shadow and inset shadow on one element

You can also specify negative values:

.box {

  box-shadow: -1px -2px 2px #000;

}

This will move the shadow 1px left and 2px up.

box-shadow using negative values

Text-Shadow* 

The text-shadow property is very similar to box-shadow, but it applies the shadow to text. *(not CSS3 but still important)

<h1>I have a shadow!</h1>

h1 {
  text-shadow: 1px 2px 2px #000;
}

text-shadow: <offset-x> <offset-y> <blur-radius> <color> (blur and color are optional)

Box Sizing

The box sizing property is used to change the default CSS box model, which is used to calculate widths and heights of given elements.

Box Model Refresher

- The CSS box model references the design and layout of given HTML elements.

- Each element is a "box" which that consists of margins, borders, padding, and the content of the element. 

- The "box model" refers to how those properties are calculated in conjunction with one another in order to set the element's dimensions. 

The content of the box is where the actual content, the text and images, are located. 

The padding clears the area around the content.

The border goes around both the padding and the content.

The margin clears the area around the border.

CSS3 Box Model

To calculate the width of a box:

.box {

  border: 2px solid black;

  margin: 20px;

  padding: 10px;

  width: 300px;

}

300px content

10px padding(both left and right sides)

2px border(both left and right sides)

300 + 20 + 4 = 324px (total width of box)

The margin is not part of the calculated total of the box because it only affects the area outside the box.

Calculate box model, content + padding + border

The box-sizing property is used to change the default CSS box model, which is used to calculate given widths and heights of elements.

Box-Sizing Elements

• content-box
• padding-box
• border-box

Content Box

Content-box is the default value. The width and height are measured by including only the content, but not the border, margin, or padding. (As seen in the example above).

Padding-Box

The width and height include the padding, but do not include the border or margin. 

Example 1:

.box {

  box-sizing: padding-box;

  border: 2px solid black;

  margin: 20px;

  width: 300px;

}

padding-box includes the padding in the width property

In this example, if the padding is still 10px, then the actual content area will be 280px (300px-20px). To calculate the area your box will take up in the design,  do 300px(content & padding) + 4px(border) = 304px.

Border-Box

The width and height include the padding and border, but not the margin.

.box {

  box-sizing: border-box;

  margin: 20px;

  width: 300px;

}

Now the actual content area  is 276px because 300px - 20px(padding) - 4px(border) leaves only 276px for content.

Border-Box includes padding and border in the width property.

CSS Cross Country Course - Level 4

Notes from Codeschool CSS Cross Country Course - Level 4

D.R.Y. Don't Repeat Yourself

The fundamental way to clean up your code is to be DRY. This will save time in maintaining and declaring your styles.

For example, suppose you want to include a font property in a number of text related elements.

<!-- index.html -->
<body>
  <div class="container">
    <h1>Some Title</h1>
    <p>Some interesting text.</p>
    <a class="sale" href="/sale">Sale</a>
  </div>
</body>

/* styles.css */
h1 {
  font-family: Arial, sans-serif;
}

p {
  font-family: Arial, sans-serif;
}

.sale {
  font-family: Arial, sans-serif;
}

This is not very DRY, you repeat yourself 3 times! Instead do:

body {
  font-family: Arial, sans-serif;
}

This will set your base font family for the whole document. If you don't want to do that, and only want those styles for this container, you could do:

.container {
  font-family: Arial, sans-serif;
}

Keep it DRY with a Comma Separated List of Selectors

If you have a set of elements with the same properties that don't fall inside the same parent container, you can still declare them in a DRY way.

e.g.
Not DRY:
/* styles.css */
p {
  font-size: 12px;
}

.ski_lift {
  font-size: 12px;
}

h6 {
  font-size: 12px;
}

DRY:
p, .ski_lift, h6 {
  font-size: 12px;
}


Selector Abstraction
e.g.
Not DRY:
/* styles.css */
.submit {
  border: 1px solid #000;
  cursor: pointer;
  text-transform: uppercase;
}

.next_button {
  border: 1px solid #000;
  cursor: pointer;
  text-transform: uppercase;
}

<!-- index.html -->
<input type="submit" class="submit" />
<a href="next_page.html" class="next_button">Next</a>

You can DRY this up by abstracting your CSS declarations into one class, and then apply to both instances in the HTML:

/* styles.css */
.button {
  border: 1px solid #000;
  cursor: pointer;
  text-transform: uppercase;
}

<!-- index.html -->
<input type="submit" class="button" />
<a href="next_page.html" class="button">Next</a>

Sharing Styles

What happens when your two buttons are only mostly the same? You can create a 'base' button, in this case we'll call it .button, then create the variation after it. Here we'll call the variation .submit. Order is important here, because .submit comes after .button on the stylessheet, via the cascade order, the background color for .submit will override the background of .button. Now to use it in the HTML, just add class button and class submit to your input tag.

/* styles.css */
.button {
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
  text-transform: uppercase;
}

.submit {
  background: #fff;
}

<!-- index.html -->
<input type="submit" class="button submit" />
<a href="next_page.html" class="button">Next</a>

Property Shorthands

Certain properties have build-in shorthand commands to help keep your code clean and concise.

e.g. 

Not DRY:

.ski_poles {

  margin-top: 15px;

  margin-botton: 0;

  margin-right: 10px;

  margin-left: 20px;

}

Can be rewritten as (DRY):

.ski_poles {

  margin: 15px 10px 0 20px;  /* top right bottom left */

}

This shorthand can be used for margin and padding. The order is a clockwise from the top: top, right, bottom, left.

Common CSS Shorthand Properties

font: 16px/18px bold italic sans-serif;

/* size/line-height weight style family */

background: #000 url(image.jpg) no-repeat

/* color image repeat x-pos y-pos */

list-style: disc inside none;

/* style position image */

margin or padding: 0 10px 0 10px;

/* top right bottom left */

margin or padding: 0 10px 0;

/* top right&left bottom */

margin or padding: 0 10px;

/* top&bottom right&left */

border: 3px solid #ccc;

/* width style color */

Display Types

The display property in CSS affects how elements display together on a page. 

Display options:

display: none / block / inline / inline-block

Block Elements

- block elements stretch the full width of their container

- block elements behave as though there is a line break before and after the element

- the full box model can be manipulated on block elements

block element is blue bar surrounded by light-blue

Tags that are block-level by default:

<div>, <p>, <ul>, <ol>, <li>, and <h1> through <h6>

Inline Elements

- Inline elements are typically found within block level elements

- Inline elements only take up the space of the content inside (not the full width of the parent container)

- Inline elements do not generate a line break before and after the element

the inline element is the blue box with light blue on the sides

Tags that are inline by default:

<span>, <a>, <em>, <img>, and <strong>

Inline-Block

- Inline-block is not a default display type, but one that can be applied via CSS.

- Inline-block elements have the same flow as an inline element, but the display properties of a block-level element

- Inline-block elements only stretch to the width of their content, but behave like block level elements in that you can manipulate the full box model on them. 

the inline-block element stays inline but has block level properties

Horizontal Centering

Depending on the display type of the element, there are different ways of centering it.

Centering a Block-level Element

The best way to center a block-level element is to declare the width on the element, then do margin: auto. The width must be less than the parent container. This will horizontally center the block-level element regardless of its width and regardless of the size of the monitor.

Centering Inline and Inline-Block Elements

To center either an inline element or an inline-block element, apply text-align: center. This will horizontally center it inside its block-level parent.

Git Real - Level 4

Notes from Code School's Git Real Course - Level 4

Collaboration Basics

Here is a scenario in which two people are working on the same files.
For example, Jane clones the repository to her local machine. She runs:

Jane $ git clone https://github/codeschool/git-real.git

She adds two files
Jane $ git add --all

She commits her two files
Jane $ git commit -m "add two files"

And she pushes them back up to the remote repository
Jane $ git push

Great! All is good, no conflicts!

But wait, at the same time Gregg also clones the remote repository to his local machine.

Gregg $ git clone https://github/codeschool/git-real.git

Gregg also makes changes to a file (README.txt), and does an add and commit in one step.

Gregg $ git commit -am "update readme"

Now, if Gregg tries to push his updates to the remote repository, his push will be rejected!
This is because Gregg's local timeline HEAD is behind Jane's.

To solve this issue, Gregg must first do:
$ git pull (to pull the most recent version of the remote repository)

then run:
$ git push (to add his changes to the remote repository)
Success!

But what exactly is happening here? This is where we look into the mechanics under the hood.

Understanding Git Pull

$ git pull
1. This will fetch(or sync) our local repository with the remote one.
(This step is the same thing as running the $ git fetch command). Although we are fetching the remote version of the repository, it doesn't actually update our local master. Instead, the pull command actually creates a new branch on your local timeline called 'origin/master'.

pulling from remote

2. Next thing the pull command will do for you is to take the new 'origin/master' branch (the one it just created) and merge it with your local master (this is the same action as if you ran $ git merge origin/master - but you don't need to because git pull does it all!). Once this is complete, it will delete the 'origin/master' branch.

3. Next it will create a new merge commit with a message that describes the merge with the remote repository. Save this from the VI editor, and you will get the success message saying that git performed a recursive merge. (Note: this part is a little ambiguous, but let's roll with it.)

If you take a look at the log, it will say there were two branches, and now there is 1.

All that with one $ git pull command, amazing! Now when Gregg runs a $ git push command, his push will be successful because he pulled down Jane's changes, merged with his own. Now he can push to remote.

A Note About Merge Commits: 

Not everyone is a fan of them. Some people think they pollute the repository and log history. If you have a lot of collaborators, you might have 10 commits, 3 to 4 of which are merge commits. It can start to get sloppy. The Git Real course will get into a way to handle this in later levels.

Merge Conflicts

Merge conflicts happen when you have two people working on the same code at the same time, in the same file. For example, Gregg updates the README.txt, but Jane updates the README.txt at the same time with different information. Jane finishes her work first, so she commits her changes and pushes them to the remote repository. Next, Gregg finishes his work, and runs a $ git pull to make sure he has the most current version of the repository. BUT, git outputs that there is a merge conflict.

Gregg runs $ git status to see the details of the conflict. The status output will show that both Gregg and Jane modified README.txt.

This conflict is within the file and so must be manually fixed. When Gregg goes into the README file, he will see his changes, as well as Jane's changes written there, plus some git markup. Gregg must remove the git markup and change the text in the file to be correct (we're assuming Gregg chooses his own text over Jane's because he's an egomaniac).

Now Gregg can run:
$ git commit -a
Leaving off a commit message because the one git provides is pretty darn good already. The message will include the file that had the conflict, and that the conflict has been resolved.
Gregg runs:
$ git push
and everything is resolved.


About this blog: This blog is an attempt to summarize my learnings as I learn them. Expect inaccuracies, incompleteness and inconsistencies.