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

[dustinmorando]

git@github.com:dstncharles/responsiv_forms.git