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.
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.
| 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" |
| 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" |
Basic form input with label:
Collapsed form with button:
Error States: