Bottons

Fresh usa varios estilos de botones y links, para usarlos basta con usar class="btn", para más estilos y tamaños agrega las clases correspondientes que se muestran en los siguientes ejemplos.

Default


  <button class="btn">Botton</button>
  <button class="btn" disabled>Disabled</button>

Simple


  <button class="btn simple">Botton</button>
  <button class="btn simple" disabled>Disabled</button>

Colors

Para asignar distintos colores a los botones y links colocar las clases grey green yellow orange red o purple en class="btn"

Ejemplo: class="btn green"


  <button class="btn grey">Grey</button>
  <button class="btn green">Green</button>
  <button class="btn yellow">Yellow</button>
  <button class="btn orange">Orange</button>
  <button class="btn red">Red</button>
  <button class="btn purple">Purple</button>

  <!-- Default -->
  <button class="btn">Blue</button>

  <a href="#!" class="btn simple" >Simple</a>
  <a href="#!" class="btn grey">Grey</a>
  <a href="#!" class="btn green">Green</a>
  <a href="#!" class="btn yellow">Yellow</a>
  <a href="#!" class="btn orange">Orange</a>
  <a href="#!" class="btn red">Red</a>
  <a href="#!" class="btn purple">Purple</a>
  <a href="#!" class="btn">Link</a>

  <!-- Disabled  -->
  <a href="#!" class="btn disabled">Disabled</a>

Fluid

Para que el boton o link tome todo el ancho del contenedor, asignar la clase fluid

Ejemplo: class="btn fluid"

Link

  <!-- Botton  -->
  <button class="btn fluid">Botton</button>

  <!-- Link  -->
  <a href="#!" class="btn fluid">Link</a>

Icons

Para alinear los iconos a la izquierda o a la derecha usar las clases: left o right en el icono.

Para usar solo el icono en el boton, sin texto, colocar class="btn icon"


  <button class="btn">
    <i class="icon-class left"></i>
    Botton
  </button>

  <button class="btn" disabled>
    <i class="icon-class left"></i>
    Disabled
  </button>

  <button class="btn">
    <i class="icon-class right"></i>
    Botton
  </button>

  <!-- Icon  -->
  <button class="btn icon"><i class="icon-class"></i></button>

Size

Para cambiar el tamaño un poco mas grande a los botones o links, usar class="btn L"


  <button class="btn">
    <i class="icon-class left"></i>
    Botton
  </button>

  <button class="btn L">
    <i class="icon-class left"></i>
    Botton
  </button>

  <button class="btn L" disabled>
    <i class="icon-class left"></i>
    Botton
  </button>

Orbed

Para un boton circular, usar class="btn orbed"


  <button class="btn orbed">
    <i class="icon-class"></i>
  </button>

  <button class="btn orbed L">
    <i class="icon-class"></i>
  </button>

  <!-- Disabled -->
  <button class="btn orbed L" disabled>
    <i class="icon-class"></i>
  </button>

Fixed

El ejemplo del siguiente código se encuentra en el lado inferior derecho del DOM y es un boton fijo. Para usarlo es necesario usar la clases fixed

Ejemplo: class="btn fixed"


  <a class="btn fixed">
    <i class="icon-class"></i>
  </a>

Loader

Circle

El tamaño por defecto del loader circular es de 38x38px, pero existen dos tamaños adicionales, para agregarlos coloca las clases S o L en class="loader_circle"

Ejemplo: class="loader_circle L"

Tambien colocando las clases de colores green yellow orange red purple o grey puedes cambiar su estilo. Por defecto el color es azul y no lleva clase.

Ejemplo: class="loader_circle L green"


  <!-- Default size and color green-->
  <div class="loader_circle green">
    <div class="loader quart"></div>
  </div>

  <!-- Size S -->
  <div class="loader_circle S grey">
    <div class="loader quart"></div>
  </div>

  <!-- Size L -->
  <div class="loader_circle L">
    <div class="loader quart"></div>
  </div>

Infinite preloader

Para agregar distintos colores a la barra de loader coloca las clases green yellow orange red purple o grey en class="infinite"

Ejemplo: class="infinite green"


  <div class="infinite">
    <div class="preloader"></div>
  </div>

  <!-- Colors example-->
  <div class="infinite green">
    <div class="preloader"></div>
  </div>

Determinate preloader

Para el preloader determinado, sólo debe mover el porcentaje de la propiedad width en el preloader como se muestra en el siguiente ejemplo.


  <div class="determinate">
    <div class="preloader" style="width: 30%"></div>
  </div>

  <!-- Colors example-->
  <div class="determinate green">
    <div class="preloader" style="width: 30%"></div>
  </div>

Form

Inputs


  <div class="row">
    <form>
      <div class="col_6">
        <div class="input_group">
          <input type="text" id="" value="Text value">
          <label>Text</label>
        </div>
      </div>
      <div class="col_6">
        <div class="input_group">
          <input type="password" id="">
          <label>Password</label>
        </div>
      </div>
      <div class="col_6">
        <div class="input_group">
          <input type="text" id="" placeholder="Placeholder"><i class="icon-class"></i>
          <label>Icon</label>
        </div>
      </div>
      <div class="col_6">
        <div class="input_group">
          <input type="text" id="" placeholder="Placeholder" disabled>
          <label>Disabled</label>
        </div>
      </div>
      <div class="col_6">
        <div class="input_group">
          <input type="number" id="" placeholder="- -"><i class="icon-class"></i>
          <label>Number</label>
        </div>
      </div>
      <div class="col_6">
        <div class="input_group">
          <input type="date" id="" placeholder="Placeholder"><i class="icon-class"></i>
          <label>Date</label>
        </div>
      </div>
    </form>
  </div>

Validations

Para la validación visual de los inputs basta con agregar las clases valid o invalid en el input

Ejemplo: <input class="valid"> o <input class="invalid">


  <div class="input_group">
    <input class="invalid" type="text" id="" value="Text value">
    <label>Invalid</label>
  </div>

  <div class="input_group">
    <input class="valid" type="text" id="" value="Text value">
    <label>Valid</label>
  </div>

Select

Para la validación visual de los select basta con agregar las clases valid o invalid en la etiqueta select

Ejemplo: <select class="valid"> o <select class="invalid">


  <!-- Valid select -->
  <div class="input_group">
    <select class="valid">
      <option value="" disabled>Select</option>
      <option value="1" selected>Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Select valid</label>
  </div>

  <!-- Invalid select -->
  <div class="input_group">
    <select disabled>
      <option value="" disabled selected>Select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Select disabled</label>
  </div>

Texarea


   <div class="input_group">
     <textarea></textarea>
     <label>Label</label>
   </div>

Los textareas se expanden o se reducen automaticamente con el texto que se escribe en ellos, esta opción se inicia por defecto, pero si añade dinamismo a su web deberá volver a inicializarlo con la sigiente linea:


  $( document ).ready(function() {

    $("textarea").flexible();

  });

Checkboxs

Por defecto los checkbox tienen margenes, si desea eliminarlo usar class="margin_none"


  <div class="checkbox_group">
    <label>
      <input type="checkbox"> Option 1
    </label>
  </div>

  <!-- Disabled -->
  <div class="checkbox_group">
    <label>
      <input type="checkbox" disabled> Disabled
    </label>
  </div>

Radio

Por defecto los radio tienen margenes, si desea eliminarlo usar class="margin_none"


  <div class="radio_group">
    <label>
      <input type="radio" name="options"> Option 1
    </label>
  </div>

  <!-- Disabled -->
  <div class="radio_group">
    <label>
      <input type="radio" name="options" disabled> Disabled
    </label>
  </div>

Components

Login / Register

Register


  <!--Login -->
  <div class="container_login white shadow_1">
    <div class="row">
      <div class="col_12 padding_bottom">
        <h2 class="text_400">Login</h2>
      </div>
      <div class="col_12">
        <div class="input_group">
          <input type="text" id="" name="username">
          <label>Username</label>
        </div>
      </div>
      <div class="col_12">
        <div class="input_group">
          <input type="password" id="" name="password">
          <label>Password</label>
        </div>
      </div>
      <div class="col_12">
        <div class="checkbox_group">
          <label>
            <input type="checkbox" checked> Remember me
          </label>
        </div>
      </div>
      <div class="col_12 margin_top">
        <button class="btn fluid" type="submit">Submit</button>
      </div>
    </div>
  </div>

  <!--Register -->
  <div class="container_register white shadow_1">
    <div class="row">
      <div class="col_12 padding_bottom">
        <h2 class="text_400">Register</h2>
      </div>
      <div class="col_6 p_right_15">
        <div class="input_group">
          <input type="text" id="" name="name_1">
          <label>First name</label>
        </div>
      </div>
      <div class="col_6">
        <div class="input_group">
          <input type="text" id="" name="name_2">
          <label>Last name</label>
        </div>
      </div>
      <div class="col_12">
        <div class="input_group">
          <input type="email" id="" name="email">
          <label>E-mail</label>
        </div>
      </div>
      <div class="col_12">
        <div class="input_group">
          <input type="text" id="" name="username">
          <label>Username</label>
        </div>
      </div>
      <div class="col_12">
        <div class="input_group">
          <input type="password" id="" name="password">
          <label>Password</label>
        </div>
      </div>
      <div class="col_12">
        <div class="checkbox_group">
          <label>
            <input type="checkbox"> I accept the terms and conditions
          </label>
        </div>
      </div>
      <div class="col_12 margin_top">
        <button class="btn fluid" type="submit">Register</button>
      </div>
    </div>
  </div>

NavBar



  <!--Nav fixed top -->
  <div class="navFixed">
    <nav class="nav shadow_1 white">
      <!--Content nav -->
    </nav>
  </div>

  <!--Nav basic -->
  <nav class="nav shadow_1 white">
    <div class="col_3 laptop_5 appName"><span><a href="/" title="Homepage">AppName</a></span></div>
    <div class="col_9 row_right laptop-2">
      <div class="col_12 tablet_hide">
        <ul>
          <li><a class="active" href="#!">Link</a></li>
          <li class="submenu">
            <a href="#!">Link<i class="icon-class"></i></a>
            <ul>
              <li><a href="#!">Link</a></li>
              <li><a href="#!">Link</a></li>
              <li><a href="#!">Link</a></li>
              <li><a href="#!">Link</a></li>
              <li><a href="#!">Link</a></li>
            </ul>
          </li>
          <li class="submenu">
            <a href="#!">Link<i class="icon-class"></i></a>
            <ul>
              <li><a href="#!">Link</a></li>
              <li><a href="#!">Link</a></li>
              <li><a href="#!">Link</a></li>
            </ul>
          </li>
          <li><a href="#!">Link</a></li>
          <li><a href="#!">Link</a></li>
        </ul>
      </div>
      <div class="col_12 hide tablet_block"><a class="btn simple icon"><i class="icon-class"></i></a></div>
    </div>
  </nav>

Pagination

Para el componente de paginador existen dos estilos, el estilo por defecto y el redondeado, además, se pueden editar sus colores colocando green yellow orange red purple o grey en class="pagination"

Ejemplo: class="pagination green"

Default


  <!--Colors-->
  <ul class="pagination green">
    <!--Content pagination-->
  </ul>

  <ul class="pagination">
    <li><a class="disabled"><i class="icon-arrow_left"></i></a></li>
    <li><a class="active" href="#!">1</a></li>
    <li><a href="#!">2</a></li>
    <li><a href="#!">3</a></li>
    <li><a href="#!">4</a></li>
    <li><a>...</a></li>
    <li><a href="#!"><i class="icon-arrow_right"></i></a></li>
  </ul>

Orbed


  <ul class="pagination orbed">
    <li><a class="disabled"><i class="icon-arrow_left"></i></a></li>
    <li><a class="active" href="#!">1</a></li>
    <li><a href="#!">2</a></li>
    <li><a href="#!">3</a></li>
    <li><a href="#!">4</a></li>
    <li><a>...</a></li>
    <li><a href="#!"><i class="icon-arrow_right"></i></a></li>
  </ul>

Footer

El ejemplo de footer se encuentra al final de la página.

Por defecto el color del footer es grey, para agregarle otros colores usar las clases: blue green yellow orange red o purple


  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col_12"><span class="appName">App Name</span>
          <div class="row">
            <div class="col_4 tablet_12">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="col_4 tablet_12"><span class="text_uppercase">About us</span>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="col_4 tablet_12"><span class="text_uppercase">Lorem</span>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
            <div class="col_12">
              <ul>
                <li><a href="#!">Link</a></li>
                <li><a href="#!">Link</a></li>
                <li><a href="#!">Link </a></li>
                <li><a href="#!">Link</a></li>
                <li><a href="#!">Link</a></li>
                <li><a href="#!">Link</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>