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 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"*