Responsive Design Patterns

About

This repository will introduce you to the most common CSS Design Patterns with the working examples. We are covering four majorly used design patterns.

//demo changes

• Mostly Fluid
• Column Drop
• Layout Shifter

You can also see the presentation for the quick review Responsive Web Design.

How to learn from this repository ?

• Practice Material/

  • Mostly Fluid
  • Column-Drop
  • Layout-Shifter
  • Solutions

  All of these contain a html file ( already coded ) and to practice a partially complete CSS file. If you are familiar with FlexBox design you can complete the files.

Submission

I will be happy to review your submission and to provide the good practices to be followed when learning Flex layouts. To submit your work

• Fork and Clone this repository
• Make a folder by your name
• Make all the changes of these files inside your folder.
• Make a Pull Request providing your folder.

Resources to learn Design Patterns

-  [CSS tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 
-  [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) 
-  [Google Developers Guide](https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns)