button

Button complete

▼

<button type="button" class="btn modifikator" aria-label="">Nazev buttonu</button>

Modifikatory basic:
btn-primary
btn-secondary
btn-link
btn-danger

Modifikatory small:
btn-sm btn-primary
btn-sm btn-secondary
btn-sm btn-link
btn-sm btn-danger

Modifikatory block:
btn-block btn-primary
btn-block btn-secondary
btn-block btn-link
btn-block btn-danger

input-a-label

Input A Label inprogress

▼

form-group

poznamka k inputu

form-group form-group__warning

poznamka k inputu

form-group form-group__error

poznamka k inputu

<div class="form-group {modifikator}">
  <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Label <span class="required"> </span> </label>
  <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Patternlab Input" class="form-control " value="">
  <p class="form-text">poznámka k inputu</p>
</div>

Modifikátory
form-group__warning
form-group__error

Šířka inputu se řeší pomocí gridu

card-variant

Card Variant complete

▼

Card body - se stínem

Základní dlaždice obalená stínem, vhodná k použití na světlé pozadí.

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--shadow w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - beze stínu

Základní dlaždice beze stínu, vhodná například na tmavé pozadí.

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - border na stranách

Základní dlaždice s rámečkem po stranách, vhodé pro středové odělení borderem. Dávat na středovou dlaždici, dvě po stranách musí být bez borderu: .card > .card--boderd__sides < .card

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--border__sides w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - border

Základní dlaždice obalená borderem. Vhodé pro vyznačení důležíté dlaždice

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--border w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - purple border

Základní dlaždice obalená fialovým borderem, vhodné pro vyznačení důležité dlaždice, u které chceme, aby si jí uživatel povšimnul jako první.

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--border__purple w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - šedé pozadí

Základní dlaždice s šedým pozadím, vhodené na bílé a velmi světlé podklady.

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--bg__gray w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - průhledné pozadí

Základní dlaždice s průhledným pozadím, vhodná k využití na místech kde by defaultní bílé pozadí kazilo vzhled designu.

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--transparent w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - průhledné pozadí se stínem

Základní dlaždice s průhledným pozadím, vhodná k využití na místech kde by defaultní bílé pozadí kazilo vzhled designu avšak potřebujeme její obsah viditelně oddělit od zbytku obsahu.

<div class="row">
  <div class="col-lg-... d-flex align-items-stretch">
    <div class="card card--transparent card--shadow w-100">
      <div class="card-body">

      </div>
    </div>
  </div>
</div>

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

grid

Grid inprogress

▼

Grid

Máme 12 sloupců. Všechny .col musí být v .row,
součet sloupců v jednom řádku je maximálně 12. Pokud součet bude více jak 12, tak sloupce zaplují
na další řádek a zarovnají se na levo.

Řádek na šířku 100%

.col-lg-12

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">

</div>
</div>

dva sloupce / rozdělení stránky na dvě poloviny

.col-lg-6

.col-lg-6

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-12 col-12">

  </div>
  <div class="col-lg-6 col-md-6 col-sm-12 col-12">

  </div>
</div>

dva sloupce / rozdělení stránky na třetiny

.col-lg-4

.col-lg-4

.col-lg-4

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-12">

  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-12">

  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-12">

  </div>
</div>

Login inprogress

Přihlášení

ID

Heslo

  <main role="main" class="tom-bg d-flex">
    <div class="container align-self-center">
      <div class="row justify-content-center">
        <div class="col-lg-5">
          <div class="card">
            <div class="card-body">
              <h1 class="h1 pb-2">Přihlášení</h1>

                <div class="form-group ">
                  <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">ID <span class="required"> </span> </label>
                  <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Placeholder" class="form-control " value="">
                </div>

                <div class="form-group ">
                  <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Heslo <span class="required"> </span> </label>
                  <input type="password" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Heslo" class="form-control " value="">
                </div>

              <div class="text-center">
                <button type="button" class="btn btn-primary" aria-label="">Přihlásit</button>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

Základní grid a look pro Login page napříč aplikacemi.