The first and most important part of creating your own framework is developing a grid. Grids help us establish a consistent rhythm and create proper proportions throughout our design.
Visual communication is the most important aspect of any design and typography plays a critical role in that communication. The web presents the additional challenge of communicating across platforms making font size, weight, color, leading, and kerning important components to consider when designing a website. However, no differently than print, the difference between good typography and bad typography is work that looks professional versus work that looks amateur.
Outside of a basic grid and typography, most frameworks also include some basic styles for our common components like forms and buttons. Forms can be fairly complex, but setting up the styling for them doesn't have to be if you're using Sass.
The float property specifies whether or not an element should float; it can be used to wrap text around images. The clear property is used to control the behavior of floating elements. Elements after a floating element will flow around it. To avoid this, use the clear property. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution like a smartphone screen in contrast to a computer screen. It is a cornerstone technology of Responsive web design.