Structuring Your HTML Grids...

• Container (holds a set of data aka 1 or more rows )
• Rows has one or more columns
• Columns (12 Units and/or 12 Columns on Each Row)
• Note above images is a div container with one row and three columns; Note the entire one page is often a single container.

Lightweight CSS Grid Systems (page 497)

• Skeleton simple light weight used in examples
• Simple Grid - github lightweight
• Pure.css - Yahoo CSS Framework
• w3.css - W3 Framework

Heavyweight CSS/JavaScript frameworks, include JavaScript code replacing jQueryUI.

• Foundation geared for Web Applications
• twitter Bootstrap most popular mobile first RWD framework - wappalzer but learn Skeleton first.

All fluid grid systems above are RWD, A more advance method is display:flex, which is covered in next chapter.
Note these systems expect the same sized content. You may have to add CSS to set heights. As of Spring/2019 none of these system recognize high resolution aka retina displays.

Using the Skeleton Grid System (github last update 2014) - flex RWD frameworks (not popular yet)

• RWD Grid Systems
• Collapses Columns window width less than 550
• http://getskeleton.com uses normalize.css
• Load Files in skeleton folder (usually by version)
• They have sample index.html file (open save as testing.html)
  1. Loads normalize.css, skeleton.css and Loads Google Raleway WOFF font
     Raleway is sans-serif header font
  2. Add div container page may have single container, containers hold rows
  3. Add div row inside cotainer
  4. Add 12 unit grid columns to each row (columns need to add up to twelve)
     Can have just a a single row with no columns
     
  5. Add content inside or div columns
  6. Need to format content on own, skeleton moves the skeleton
     place your custom css styles as the third css style sheet
     

Creating and Naming Columns - columnNames0.html

• Note a row is row - columnNames1.html

Creating Full Width Sections

div.container is never full wdith of browser window you have two options...

1. Set background color/image of body tag
2. Can place div="container" inside another div block
3. Can use ID inside of the class="row image" set image class properties
   Example columnNames2.html
4. Use css box-shadow: x_ offset y_offset blur [spread] color
5. Use css background-sizing: x width y-width [cover | conains ] property

Styling Buttons page 506 - buttons.html

• Skeleton is mainly a Grid System
• Has styling for tag <button> or class .button you also have .button.primaryButton
• Also include form element styling

Skeleton Mobile First

• initial design is for Mobile phones
• add media queries when additional width is available (more spacing, columns, etc)
• Typical Width Media Queries...
  • @meida ( min-width: 400px ) { .... } Rule only applies if screen has width of at least 400px
  • @media( min-width: 550px) { ... } Rules for phablet all widths 550px or larger
  • @media( min-width: 750px) { .. } larger than tablet
  • @media( min-width: 1000px) { .. } desktop
  • @media( min-width: 1200px) { } HD
• Use Chromes device tools, DW live view or Web Developer for testing

Tutorial Page 509 Adding a Grid

1. Open the file 16/index.html, save outside of data folder in folder 16
2. Add before </head> - also copy over the three css files to new folder
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/skeleton.css">
   <link rel="stylesheet" href="css/custom.css">
3. Below comment <!-- top section --> add.
   <div class="container">
   </div>
4. Create two rows inside <div class="container" >
   <div class="row">
   </div>
   <div class="row">
   </div>
   </div>
5. In first rwo add 2 units
   <div class="four columns">
   <p class="logo">My Company</p>
   </div>
   <div class="eight columns nav">
   </div>
6. Open the file 01-nav.html add code to nav
   <div class="eight columns nav">
   <a href="#">Home</a>
   <a href="#">Our Clients</a>
   <a href="#">About Us</a>
   <a href="#">Careers</a>
   </div>
7. Add class="button" attrbute to each link
   <a class="button" href="#">Home</a>
   <a class="button"href="#">Our Clients</a>
   <a class="button" href="#">About Us</a>
   <a class="button" href="#">Careers</a>
8. Add class="button-primary" to first tag
   <a class="button button-primary" href="#">Home</a>
9. Open 02-action.html copy data to second row
   <h1>We do great things</h1>
   <h2>Donec pulvinar ullamcorper metus</h2>
   <a href="#" class="button button-primary">Learn More</a>
10. Add class="row action" to second row, will format .action later on
    <div class="row action">
11. Save index.html in new folder and preview
    
    
12. Open 03-info.html Copy content below <!-- info section -->
13. Make first div class="container"
14. Make next two children div class="row"
15. Aadd class="four columns" to each div inside second row (3 columns)
    <div class="row">
    <div class="four columns">
    <p>Mei te possit instructior…</p>
16. Open 04-footer.html Copy the HTML paste content belwo <!-- footer -->
    
    
    
    
17. save index.hmlt and preview the file

Adding Style

1. Open related file custom.css
2. after /* Mobile first queries */ add...
   /* applies to ALL widths */
   .container {
   background-color: pink;
   }
3. Preview index.html all three containers are now pink
4. Add new div to header at <!-- top section --> add
   <div class="section header">
   before <div class="container">
5. Before <!-- info section --> add close </div>
6. Add customer .header image
   copy imgs frolder from data/16 to working folder add css code to custom.css
   .header {
   padding: 50px 0 70px 0;
   background-image: url(../imgs/header.jpg);
   background-size: cover;
   }
7. Just below .header section add...
   .logo {
   font-weight: 600;
   color: rgb(255, 209, 143);
   }
8. Add three more styles after .logo style
   .nav {
   text-align: right;
   }
   .button {
   background-color: rgba(255,255,255,.5);
   }
   .button:hover {
   background-color: rgba(255,255,255,.3);
   }
   
9. Add three more styles
   .action {
   text-align: center;
   padding-top: 75px;
   }
   .action h1 {
   margin: 0;
   }
   .action h2 {
   margin: 0 0 20px 0;
   }
10. NIB - make .header .container transparent ,
    .header .container {
    background-color: transparent;
    }
11. Save and preview index.html
    

The Mobile Design page 518