Beginner Foundation Zurb responsive grid layout

please note if your having a hard time reading this article Click here Hey happy to see you found your way on to this article, I will show you how to make you keep your website responsive on all devices and show you how to set up a basic file structure using the terminal. (Sorry about how the code is written in the article i have put a space after the left bracket < for some reason i have not got my head round it won't let me showcase raw HTML please give advice if you know the answer thank you)

PLEASE NOTE TAKE THE SPACE AFTER THE LEFT BRACKET < OUT

You can download the Foundation 5 framework at my GitHub Download now follow the Youtube tutorial on how to git clone them into your localhost

this is a full 12 columns and is defualt on medium devices and small

< div class ="row"> 
   < div class="large-12 columns> 
     < div class="panel"> 
 
< /div>
< /div>"
< /div> 

this is a full 12 columns by defualt and on medium devices is 6 columns

< div class ="row"> 
   < div class="large-12 medium-6 columns> 
     < div class="panel"> 
 
< /div>
< /div>"

   < div class="large-12 medium-6 columns> 
     < div class="panel"> 
 
< /div>
< /div>"
< /div> 

this is a full 12 columns by defualt and on medium devices is 6 columns and small-4 notice i added another colum and made the bottom be large-12 and medium-12 

< div class ="row"> 
   < div class="large-12 medium-6 small-4 columns> 
     < div class="panel"> 
 
< /div>
< /div>"

   < div class="large-12 medium-6 small-4 columns> 
     < div class="panel"> 
 
< /div>
< /div>"
< /div> 

   < div class="large-12 medium-12 small-4 columns> 
     < div class="panel"> 
 
< /div>
< /div>"
< /div> 



The footer.php 
you must add the foundation javascript files here is the code to do so sorry about the mess i need to master this steem blog lol

< script src="js/vendor/jquery.js">
< script src="js/foundation.min.js">
< script src="js/vendor/modernizr.js">
< script src="js/foundation/foundation.topbar.js">
< script src="js/foundation/foundation.orbit.js">
< script>
$(document).foundation();
< /script>



#Webgeekster

Topics