WEB DEVELOpment immersivebuilding page layouts

2

• Box Model• Scaling• Positioning Boxes• Box Aesthetics• HTML 5 Semantic Tags• CSS Resets

Topics

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

3

• Padding (spacing inside an element)• Margin (spacing outside an element)• Border (colors, styles)

Box Model

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

4

W3C Box Model

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

5

IE Box Model

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

6

IE Box Model FIX SOLUTIONS

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

• CSS 1 & 2 hacks• Box in a box method• CSS 3 box-sizing property

7

CSS 1 & 2 Hacks (Don’t Do this!)

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

div {    width: 100px;  }div {    \width: 140px;    w\idth: 100px;}

8

BOX IN A BOX METHOD (100% support)

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

div { width: 100px; padding:0; margin:0; }

.i { padding: 1em; }

<div> <div class="i"> Text </div></div>

9

CSS 3 Box-sizing property (90.2% support)

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

div { box-sizing:border-box;}

/* IE model = border-box W3C model = content-box */

10

CSS 3 Box-sizing support

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

11

Scaling elements

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

• Static (px)• Fluid (%)• Responsive (min, max)• Auto

12

Content OVERFLOW

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

13

• Static (default)• Floating

Positioning (part 1)

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

14

Floating

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

15

Clearing

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

16

Clearing

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

clear:both;

17

Floating

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

18

• Background (color, images)• Box Shadow• Borders • Border Radius• Opacity

Box aesthetics

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

19

Background Properties

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

background-color:background-image:background-position:background-repeat:background-scroll:background-size:background:

20

Box SHADOW

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

21

Border styles

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

22

Border radius

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

23

opacity

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

24

• Header• Footer• Nav• Aside• Section• Article

HTML 5 Semantic layout tags

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

• Hgroup• Figure• Figcaption

25

Div layout

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

26

Html5 sematic tag layout

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

27

CSS RESETS

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

28

Popular CSS RESETS

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

• Meyers• Toucan• YUI• “poor-man’s”

29

Poor man’s reset

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

html, body { padding: 0; margin: 0; }html { font-size: 1em; }body { font-size: 100%; }a img, a:link img, a:visited img { border: 0; }

30 GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE