diff --git a/index.html b/index.html new file mode 100644 index 0000000..272bbd9 --- /dev/null +++ b/index.html @@ -0,0 +1,390 @@ + + + + + + + Grid + + + + + + + + + + + + + + + + + + +
+
+
+ +

grid v1

+ +

A simple guide to responsive design.
Made by Adam Kaplan.

+
+ Intro +
+
+ +
+
+ RWD +

Why bother with responsive?

+

We want our websites to be useable on all devices by responding to + the user’s behavior, screen size and screen orientation.

+
+
+ +
+
+
+ +
+
+

A Fragmented World

+

As of 2013, there are thousands of different devices and screen sizes that browse the + internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to + design.

+
+
+ +
+
+
1
+

Add the Viewport Meta Tag

+

Place in the <head> of your HTML. This enables use of media queries for cross-device layouts. +

+ +
+
+ +
+
+ Box Model +
+
+ +
+
+

CSS Box Model

+

It's important to understand the basics, like how elements are generated and behave in the browser, before + diving into responsive web design. The CSS Box Model consists of four distinct parts.

+
+ +
+
+ content +

Content

+

The content of the box, where text and images appear.

+
+ +
+ padding +

Padding

+

Clears an area around the content.

+
+ +
+ border +

Border

+

A border that goes around the padding.

+
+ +
+ margin +

Margin

+

Clears an area around the border.

+
+
+
+
+ +
+
+
2
+

Use box-sizing: border-box

+

Place at the top of your CSS file. The * will target all elements on the page.

+
+ +
+
+ + +
+
+

Your Choice

+

What was once a bug + is now widely used CSS property. It basically means you can choose whether or not to include borders and padding in + the width of your content.

+
+ +
+
+ Without Box Model +

Without box-sizing: border-box

+

Margin, borders and padding are drawn outside the set width of your content.

+
+ +
+ With Box Model +

With box-sizing: border-box

+

Borders and padding are drawn inside the set width of your content. The margin is drawn outside.

+
+
+
+
+ +
+
+
3
+

Create a Container

+

A container holds all elements and controls the page's maximum width. Using a container will make designing for + responsive easier!

+
+ + +
+
+ +
+
+ Container +
+
+ +
+
+
4
+

Create a Column

+

A column is a class used for stacking content horizontally. The first margin is removed using the + pseudo-class first-child.

+
+ + +
+
+ +
+
+
+ .column +
+
+
+ +
+
+
5
+

Create Column Sizes

+

Add size classes to columns to create a reuseable grid system.

+
+ + +
+
+ +
+
+
+
+ .column .full +
+
+ +
+
+ .column .two-thirds +
+ +
+ .column .one-third +
+
+ +
+
+ .column .half +
+ +
+ .column .half +
+
+ +
+
+ .column .one-third +
+ +
+ .column .one-third +
+ +
+ .column .one-third +
+
+ +
+
+ .column .one-fourth +
+ +
+ .column .one-fourth +
+ +
+ .column .one-fourth +
+ +
+ .column .one-fourth +
+
+
+
+ +
+
+
6
+

Create Rows

+

Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise know as clearing + issues. Rows are cleared with either a clearfix or overflow: hidden. This clearfix was + created by Nicolas Gallager:

+
+ + + +
+
+ +
+
+
+
+ .column .half +
+ +
+ .column .half +
+
+ +
+
+ .column .one-third +
+ +
+ .column .one-third +
+ +
+ .column .one-third +
+
+
+
+ +
+
+
7
+

Add a Mobile Breakpoint

+

If the browser's screen size is within a set range, a media query + will replace the CSS the browser uses. This is the bread and butter of + responsive web design.

+
+ +
+
+ +
+
+
+
+
+ .column .half +
+ +
+ .column .half +
+
+ +
+
+ .column .one-third +
+ +
+ .column .one-third +
+ +
+ .column .one-third +
+
+
+
+
+ +
+
+

Practice Makes Perfect

+

By following these simple steps, you are on the path to responsive + web design mastery. Keep practicing and help make the web a better, + more useable place.

+
+
+ +
+
+
+

Further Reading

+
+ +
+ +
+

References

+
+ +
+
+ +
+ +