index.html

styles.css

script.js

 <!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
     
    <div class="row">
    <div class="columns">
      <h2>Hello, world!</h2>
  
      <p><button id="hi" class="button primary" data-toggle="form-callout">Say Hi !</button></p>
  
      <div class="row" id="alert-div" style="display:none;">
        <div class="secondary callout is-hidden" id="form-callout" data-toggler="is-hidden">
            <p>Hello there!</p>
        </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
   </body>
</html>

Foundation online editor

Write, Run & Share Foundation code online using OneCompiler's Foundation online editor for free. It's one of the robust, feature-rich online editor for Foundation. Getting started with the OneCompiler's Foundation online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Foundation' and start writing code to learn and test online instantly.

About Foundation

Foundation is a responsive framework for front-end web development. It helps developers to develop websites faster and also easy to use. You can use built-in classes which are available hence you don't need to develop elements from scratch.

Syntax help

Grid

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

Visibility classes

Show Classes	Hide Classes	Orientation Classes	Touch detection classes
class="show-for-small-only"	class="hide-for-small-only"	class="show-for-landscape"	class="show-for-touch"
class="show-for-medium-up"	class="hide-for-medium-up"	class="show-for-portrait"	class="hide-for-touch"
class="show-for-medium-only"	class="hide-for-medium-only"
class="show-for-large-down"	class="hide-for-large-down"
class="show-for-large"	class="hide-for-large"
class="show-for-large-up"	class="hide-for-large-up"
class="show-for-xlarge"	class="hide-for-xlarge"
class="show-for-xxlarge"	class="hide-for-xxlarge"

Buttons

Button type	Syntax
Tiny button	class="button tiny"
Small button	class="button small"
Default button	class="button"
Large button	class="button large"
Alert button	class="button alert"
Disabled button	class="button disabled"
Expanded button	class="button expand"
Rounded button	class="button round"
Success button	class="button success"
Secondary button	class="button secondary"

Forms

Basic form input with label:

div class="small-3 columns"
label for="right-label" class="right inline"
div class="small-9 columns
input type="text" id="right-label" placeholder="Inline Input"

Collapsed form with button:

div class="row collapse"
div class="small-10 columns"
input type="text" placeholder="Provide input"
div class="small-2 columns"
a href="#" class="button postfix"

Error States:

label class="error"
input type="text" class="error"
small class="error"

Pagination useful classes

ul class="pagination"
li class="arrow unavailable"
li class="current"
li class="unavailable"
li class="arrow"*