Foundation Hello World 

Foundation Hello World 


Click on RUN button to see the output

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 ClassesHide ClassesOrientation ClassesTouch 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 typeSyntax
Tiny buttonclass="button tiny"
Small buttonclass="button small"
Default buttonclass="button"
Large buttonclass="button large"
Alert buttonclass="button alert"
Disabled buttonclass="button disabled"
Expanded buttonclass="button expand"
Rounded buttonclass="button round"
Success buttonclass="button success"
Secondary buttonclass="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"*