Style guide

Style guide je štartovací bod, vždy začni s prípravou základných prvkov. Neskôr ich budeš v projekte využívať. Style guide, môže slúžiť aj ako ukážka pre klienta.

Farebná paleta Nadpisy Tlačítka Labels Tabulky Alerts Ikony Štíky

# Farebná paleta

Základná

Sekundárna

Info

Úspech

Chyba

Upozornenie

# Typografia

Nadpis h1

Používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.

Nadpis h2

Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.

Nadpis h3

Je dávno známe, že ak je zrozumiteľný obsah stránky, na ktorej rozloženie sa čitateľ díva, jeho pozornosť je rozptýlená.

Nadpis h4

Je fakt, že má viacmenej normálne rozloženie písmen, takže oproti použitiu 'Sem príde text, sem príde text' sa obsah vypĺňanej oblasti na stránke viac podobá na skutočný text.

Nadpis h5

Editorov webových stránok už používajú Lorem Ipsum ako predvolený výplňový text a keď dáte na internete vyhľadávať 'lorem ipsum', objavíte mnoho webových stránok v rannom štádiu ich vzniku.

Ukážka zoznamu
  • Starter šablóna je určená pre štart nového projektu
  • Je vhodná pre:
    • Blogy
    • Firemné stránky
    • Osobné prezentácie
  • Ponúka viacero farebných variant
  • K tomu hosting a dómenu zadarmo

#Labels

Základný label

Sekundárny label

Upozorňovací label

Informačný label

Chybový label

Správny label

<p class="label label-primary"></p>
<p class="label label-secondary"></p>
<p class="label label-warning"></p>
<p class="label label-info"></p>
<p class="label label-danger"></p>
<p class="label label-success"></p>

#Štítky

#Základný štítok

#Sekundárny štítok

#Upozorňovací štítok

#Informačný štítok

#Chybový štítok

#Správny štítok

<p class="tag tag-primary">#</p>
<p class="tag tag-secondary">#</p>
<p class="tag tag-warning">#</p>
<p class="tag tag-info">#</p>
<p class="tag tag-danger">#</p>
<p class="tag tag-success">#</p>

Outline

#Základný štítok

#Sekundárny štítok

#Upozorňovací štítok

#Informačný štítok

#Chybový štítok

#Správny štítok

<p class="tag tag-primary-outline">#</p>
<p class="tag tag-secondary-outline">#</p>
<p class="tag tag-warning-outline">#</p>
<p class="tag tag-info-outline">#</p>
<p class="tag tag-danger-outline">#</p>
<p class="tag tag-success-outline">#</p>

# Tables

StarterStarter plusStarter premium
Farebné variantyFarebné varianty alebo
Firemná identita
Farebné varianty alebo
Firemná identita
HostingHostingHosting + Doména
24 hodinová podpora24 hodinová podpora24 hodinová podpora
<table class="table-primary">
 <tr>...</tr>
</table>
StarterStarter plusStarter premium
Farebné variantyFarebné varianty alebo
Firemná identita
Farebné varianty alebo
Firemná identita
HostingHostingHosting + Doména
24 hodinová podpora24 hodinová podpora24 hodinová podpora
<table class="table-primary table-odd">
 <tr>...</tr>
</table>
StarterStarter plusStarter premium
Farebné variantyFarebné varianty alebo
Firemná identita
Farebné varianty alebo
Firemná identita
HostingHostingHosting + Doména
24 hodinová podpora24 hodinová podpora24 hodinová podpora
<table class="table-primary--light table-hover">
 <tr>...</tr>
</table>
StarterStarter plusStarter premium
Farebné variantyFarebné varianty alebo
Firemná identita
Farebné varianty alebo
Firemná identita
HostingHostingHosting + Doména
24 hodinová podpora24 hodinová podpora24 hodinová podpora
<table class="table-primary--light table-odd">
 <tr>...</tr>
</table>
StarterStarter plusStarter premium
Farebné variantyFarebné varianty alebo
Firemná identita
Farebné varianty alebo
Firemná identita
HostingHostingHosting + Doména
24 hodinová podpora24 hodinová podpora24 hodinová podpora
<table class="table-secondary">
 <tr>...</tr>
</table>

# Alerts

Error

<div class="alert alert-danger">
 <p>...</p>
</div>

Warning

<div class="alert alert-warning">
 <p>...</p>
</div>

Information

<div class="alert alert-info">
 <p>...</p>
</div>

Success

<div class="alert alert-ok">
 <p>...</p>
</div>

Success small

<div class="alert alert-ok alert-small">
 <p>...</p>
</div>

#Icons

<p class="icon icon-social icon-facebook"></p>
<p class="icon icon-social icon-instagram"></p>
<p class="icon icon-social icon-twitter"></p>