Read: 01 - SMACSS and Responsive Web Design Summary

Responsive Web Design “RWD”:

• Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop.
• Responsive vs. Adaptive vs. Mobile :
• Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change (A combination of the two is ideal, providing the perfect formula for functional websites).
• Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.
• flexible layouts: is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width .Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.
• The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element. target ÷ context = result
• The flexible layout approach alone isn’t enough. At times the width of a browser viewport may be so small that even scaling the the layout proportionally will create columns that are too small to effectively display content. Specifically, when the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event, media queries can be used to help build a better experience.
• Initializing Media Queries : there are a two different ways to use media queries:
• using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule.
• By linking to a separate style sheet from within the HTML document.
• Within responsive design the most commonly used features include min-width and max-width.
• The orientation media feature determines if a device is in the landscape or portrait orientation. The landscape mode is triggered when the display is wider than taller, and the portrait mode is triggered when the display is taller than wider. This media feature plays a large part with mobile devices.
• The aspect-ratio and device-aspect-ratio features specifies the width/height pixel ratio of the targeted rendering area or output device. The min and max prefixes are available to use with the different aspect ratio features, identifying a ratio above or below that of which is stated. The value for the aspect ratio feature consist of two positive integers separated by a forward slash. The first integer identifies the width in pixels while the second integer identifies the height in pixels.
• The resolution media feature specifies the resolution of the output device in pixel density, also known as dots per inch or DPI.
• Mobile First : One popular technique with using media queries. Its approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add styles as the viewport grows.
• To control how a website is scaled on a mobile device, and how users can continue to scale a website, use the minimum-scale, maximum-scale, initial-scale, and user-scalable properties.

About Floats:

• Float is a CSS positioning property.It can be used to create entire web layouts.
• There are four valid values for the float property. Left and Right float elements those directions respectively. None (the default) ensures the element will not float and Inherit which will assume the float value from that elements parent element.
• The clear property allows elements to specify where they should align in comparison to the floated elements.
• Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively. None is the default, which is typically unnecessary unless removing a clear value from a cascade. Inherit would be the fifth, but is strangely not supported in Internet Explorer.
• Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container.
• we introduce some floats to fix the relationship between a few elements inside the < div > element.

SMACSS Official Documentation:

• SMACSS is more style guide than rigid framework,a way to examine the design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.