/ResponsiveDesign

Primary LanguageCSS

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.

  • 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)