1. Web Page Layout
Imran Rashid
CTO at ManiWeber Technologies

2. Outline Understanding the Box Model & Properties Understanding Floats
Clear Property
Relative Positioning
Absolute Positioning
Introduction to Bootstrap

3. Understanding the Box Model & Properties

4. Understanding the Box Model & Properties
Box Model has 5 Main Properties
Width
Height
Padding
Border
Margin

5. Understanding the Box Model & Properties

6. Understanding the Box Model & Properties

7. Understanding Floats

8. Understanding Floats

9. Understanding Floats

10. Understanding Floats
What if you delete some text in the middle of a paragraph?

11. Clear Property

12. Challenge

13. Relative Positioning

14. Relative Positioning
Static positioning is the default for every single page element
Relative type of positioning is probably the most confusing and misused
It really means is "relative to itself" but as a single property its nothing
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position
Other content will not be adjusted to fit into any gap left by the element

15. Absolute Positioning

16. Absolute Positioning
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed)
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling
Note: A "positioned" element is one whose position is anything except static

17. Introduction to Bootstrap

18. Introduction to Bootstrap
How to start
You should remember this boilerplate code:

19. Introduction to Bootstrap
Features
CSS resetting for cross browser compatibility
Grid scaffolding for design
Multi-screen support (responsive design)
Mobile first, like jQuery Mobile
And a really good looking UI framework
JavaScript Plugins
Dialogs
Tabs
Alerts
Tooltips
… and more

20. Introduction to Bootstrap
How to add Twitter Bootstrap
You should use a CDN (content delivery network) for loading resources

21. Introduction to Bootstrap
What are those lines?
We use a shared CDN because chances are that common files are most likely already cached in the user’s computer
The <link> tag loads the CSS - the actual bootstrap styling. This is obviously the most important
The <script> tag loads additional JavaScript capabilities of the Bootstrap framework
The <meta> tag is for smaller devices which have a viewport, and it disables zooming so that the responsive features of Bootstrap will kick in

22. Introduction to Bootstrap
The grid layout

23. Introduction to Bootstrap
How to write pages using a grid:

24. Introduction to Bootstrap
Bootstrap 3 features an always-responsive grid with a maximum size:
col-xs-[num] grids have no maximum size (fluid)
col-sm-[num] grids resize up to 750px
col-md-[num] grids resize up to 970px
col-lg-[num] grids resize up to 1170px
You should choose col-md or col-lg for desktop sites

25. Introduction to Bootstrap
You can also use two grid sizes for different screen sizes:

26. Challenge

27. Any ?