Buttony

Styl buttonów może być użyty do znaczników <a>, <button>, <input type="submit">. Poniżej przykład użycia stylu buttona.

  <button class="btn btn-on-white">Click</button>

Style buttonów

Style domyślnych buttonów ograniczają się do podanych niżej przykładów:

Button Modifier Class
btn
btn-on-white
btn-on-(red, blue, cream)

Buttony specjalne

Styl dla buttonu specjalnego, na granatowym tle:

    <!-- example background -->
    <div class="example-blue">
    <button class="btn-special">Archiwum kampanii</button>
  </div>

Button z ikonką

Styl dla buttonu z ikonką:

Podziel się artykułem 
    <span class="btn btn-on-white btn-with-icon btn-share"><span>Podziel się artykułem</span><span class="sprite-ico-rarrow"></span></span>

Rozmiary buttonów

Są 4 rozmiary buttonów: small, medium, small-long, medium-long.

Button Modifier Class
btn-small
btn-medium
btn-small btn-long
btn-small btn-long

Inputy

Rodzaje inputów

Styl dla normalnych inputów. Ważne: dla IE8 i innych przeglądarek nieobsługujących inputy HTML5 użyj klasy .input do ostylowania.

Input Modifier Class
input selector or input
::placeholder or placeholder

Walidacja formularzy

Styl dla normalnych inputów. Ważne: dla IE8 i innych przeglądarek nieobsługujących inputy HTML5 użyj klasy .input do ostylowania.

wpisana nazwa jest niepoprawna
nazwa może być już zajęta 
    <!-- Validation: true -->
  <form class="val-form val-true">
  <div class="input-wrap">
  <input type="text" class="input" placeholder="Lorem ipsum dolor sit amet">
  <span class="val-msg"></span>
  <button class="input-clear"></button>
  </div>
  </form>

    <!-- Validation: false -->
  <form class="val-form val-false">
  <div class="input-wrap">
  <input type="text" class="input" placeholder="Lorem ipsum dolor sit amet">
  <span class="val-msg">wpisana nazwa jest niepoprawna</span>
  <button class="input-clear"></button>
  </div>
  </form>

    <!-- Validation: alert -->
  <form class="val-form val-alert">
  <div class="input-wrap">
  <input type="text" class="input" placeholder="Lorem ipsum dolor sit amet">
  <span class="val-msg">nazwa może być już zajęta</span>
  <button class="input-clear"></button>
  </div>
  </form>

Wyszukiwarka

Styl dla pola wyszukiwarki

  <div class="input-search input-with-icon">
  <input type="search" placeholder="Jak mogę pomóc"/>
  <span class="input-search-icon"></span>
  <button class="input-clear"></button>
  </div>

Newsletter

Styl dla pola newslettera

  <div class="input-newsletter input-with-icon">
  <input type="email" placeholder="Ksiądz biskup"/>
  <span class="input-email-icon"></span>
  <button class="input-clear"></button>
  </div>

Select dropdown

Styl dla dropdowna z opcjami

  <select class="select-dropdown">
        <option value="Nullam">Nullam magna diam</option>
        <option value="Cras">Cras nonummy auctor metus</option>
  </select>

Checkboxy i radiobuttony

Input Modifier Class
input[type=checkbox]
input[type=radiobutton]

Checkboxy i radiobuttony z opisami

Input Modifier Class
check-label
check-label