Responsive column layout

[jacobthemyth]

Responsive columns

Description

Create a simple responsive column layout

Objectives

Learning Objectives

After completing this assignment, you should...

• Understand how to use a grid framework to create a responsive layout
• Write SCSS that conforms to a style guide

  Performance Objectives

After completing this assignment, you be able to effectively use

• SCSS
• Bourbon
• Neat
• scss-lint

  Details

  Deliverables

• A repo containing at least:
  • index.html
  • main.scss

    Requirements

See Additional Resources for images of the layouts.

• It should have a desktop layout for when the browser is greater than 840px wide.
• It should have a tablet layout when the browser is between 840px and 500px
• It should have a mobile layout when the browser is less than 500px.
• The elements should become smaller as the browser shrinks (see video gif)
• Use the orange color found in the image resources rather than the blue color in the screenshots.

  Additional Resources

  Reading

• http://sass-guidelin.es/#introduction
• https://github.com/necolas/idiomatic-css
• http://cssguidelin.es/#css-selectors
• http://cssguidelin.es/#specificity
• http://sass-guidelin.es/#syntax--formatting

  Screenshots

• Desktop
• Table
• Mobile

  Icons

• Icons

[ATMartin]

https://github.com/ATMartin/TIY-HW-06-NeatResponsive.git

[ATMartin]

The instructions said to use orange like the icons, but the icons are blue, so I stuck with. I have sipped the orange color & converted the images, though, so maybe tomorrow I'll try to make a a:active field to change colors on the page. Anyway. All done for now. Thanks!

[jacobthemyth]

@ATMartin I completely forgot to let you know that I changed the images to blue and that you could just use the blue ones, I hope you didn't spend too much time on that. I'm sorry about that.