Skip to content

Latest commit

 

History

History
82 lines (65 loc) · 2.57 KB

foundation.md

File metadata and controls

82 lines (65 loc) · 2.57 KB
Raw

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