Grid System UI Layout | Qafeer Labs Crash Course

828 views

Published on

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
828
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
75
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • What is DIV stand for?
  • Grid System UI Layout | Qafeer Labs Crash Course

    1. 1. New Technique in Web Layout Implementation Grid System Layout
    2. 2. Grid System Layout
    3. 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. 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. 5. Grid System Layout 1 Introduction
    6. 6. Grid System Layout Graphical Web design ( Drawing the website ) Slicing The design ( PSD to HTML ) Implement the layout ( Writing HTML & CSS code )
    7. 7. Grid System Layout Implement the layout ( Writing HTML & CSS code )
    8. 8. Grid System Layout Table Layout
    9. 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. 10. Grid System Layout DIV Layout
    11. 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. 12. Grid System Layout DIVTable 822Number of lines 109401File Size
    13. 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. 14. Grid System Layout
    15. 15. 2 Grid System
    16. 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. 17. Design Framework or CSS Framework
    18. 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. 19. Grid System Layout • Design Tools • CSS Files www.960.gs
    20. 20. Grid System Layout • Container • Grid • Alpha & omega • Push & Pull • Clear
    21. 21. 3 It is show time
    22. 22. Grid System Layout For Integrated Web Solutions Mohammad Abuzaid Mabuzd Thank you 

    ×