Your SlideShare is downloading. ×
  • Like
Grid System UI Layout | Qafeer Labs Crash Course
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Grid System UI Layout | Qafeer Labs Crash Course

  • 305 views
Published

Grid System UI Layout is a CSS framework that allow you to implement your website design into an easy, fast and accurate way. …

Grid System UI Layout is a CSS framework that allow you to implement your website design into an easy, fast and accurate way.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
305
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • What is DIV stand for?

Transcript

  • 1. New Technique in Web Layout Implementation Grid System Layout
  • 2. Grid System Layout
  • 3. For Integrated Web Solutions CEO & Founder at Ubrand +5 Years Web Engineering Pre-Master in Computer Engineering Developed +100 websites Interests - Web Standards - UI/UX Development - Project Management - Game Development Mohammad Abuzaid Mabuzd
  • 4. Grid System Layout < Part I > Introduction </Part I> - Table Layout Technique - DIV Layout - DIV vs Tables <Part II> The Grid System </Part II> - What is Grid System - 960.gs tools - Grid System Structure <Part III> It is show time </Part III> - Demo - Workshop - Questions
  • 5. Grid System Layout 1 Introduction
  • 6. Grid System Layout Graphical Web design ( Drawing the website ) Slicing The design ( PSD to HTML ) Implement the layout ( Writing HTML & CSS code )
  • 7. Grid System Layout Implement the layout ( Writing HTML & CSS code )
  • 8. Grid System Layout Table Layout
  • 9. Grid System Layout Table Layout <table id="Layout"> <tr> <td id="Header"> </td> </tr> <tr> <td> <table> <tr> <td id="Nav"> </td> <td id="Main"> </td> </tr> </table> </td> </tr> <tr> <td id="Footer"> </td> </tr> </table> 22 Line of code 401 bytes
  • 10. Grid System Layout DIV Layout
  • 11. Grid System Layout DIV Layout <div id="Header"> </div> <div id="Nav"> </div> <div id="Main"> </div> <div id="Footer"> </div> 8 Line of code 109 bytes
  • 12. Grid System Layout DIVTable 822Number of lines 109401File Size
  • 13. Grid System Layout Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
  • 14. Grid System Layout
  • 15. 2 Grid System
  • 16. Grid System Layout Grid System <div id="Header“ class=“grid_12”> </div> <div id="Nav“ class=“grid_3”> </div> <div id="Main“ class=“grid_9”> </div> <div id="Footer“ class=“grid_12”> </div>
  • 17. Design Framework or CSS Framework
  • 18. Grid System Layout Benefits of using a CSS framework - Compatibility with different devices - Easy to read & understand - Reduces development time by providing pre-coded HTML/CSS - Better communication between Designer & Developer
  • 19. Grid System Layout • Design Tools • CSS Files www.960.gs
  • 20. Grid System Layout • Container • Grid • Alpha & omega • Push & Pull • Clear
  • 21. 3 It is show time
  • 22. Grid System Layout For Integrated Web Solutions Mohammad Abuzaid Mabuzd Thank you 