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

Ú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-link tag-primary">#</p>
<p class="tag-link tag-secondary">#</p>
<p class="tag-link tag-warning">#</p>
<p class="tag-link tag-info">#</p>
<p class="tag-link tag-danger">#</p>
<p class="tag-link 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-link tag-primary-outline">#</p>
<p class="tag-link tag-secondary-outline">#</p>
<p class="tag-link tag-warning-outline">#</p>
<p class="tag-link tag-info-outline">#</p>
<p class="tag-link tag-danger-outline">#</p>
<p class="tag-link tag-success-outline">#</p>

# Tables

Starter Starter plus Starter premium
Farebné varianty Farebné varianty alebo
Firemná identita		 Farebné varianty alebo
Firemná identita
Hosting Hosting Hosting + Doména
24 hodinová podpora 24 hodinová podpora 24 hodinová podpora
<table class="table-primary">
 <tr>...</tr>
</table>
Starter Starter plus Starter premium
Farebné varianty Farebné varianty alebo
Firemná identita		 Farebné varianty alebo
Firemná identita
Hosting Hosting Hosting + Doména
24 hodinová podpora 24 hodinová podpora 24 hodinová podpora
<table class="table-primary table-odd">
 <tr>...</tr>
</table>
Starter Starter plus Starter premium
Farebné varianty Farebné varianty alebo
Firemná identita		 Farebné varianty alebo
Firemná identita
Hosting Hosting Hosting + Doména
24 hodinová podpora 24 hodinová podpora 24 hodinová podpora
<table class="table-primary--light table-hover">
 <tr>...</tr>
</table>
Starter Starter plus Starter premium
Farebné varianty Farebné varianty alebo
Firemná identita		 Farebné varianty alebo
Firemná identita
Hosting Hosting Hosting + Doména
24 hodinová podpora 24 hodinová podpora 24 hodinová podpora
<table class="table-primary--light table-odd">
 <tr>...</tr>
</table>
Starter Starter plus Starter premium
Farebné varianty Farebné varianty alebo
Firemná identita		 Farebné varianty alebo
Firemná identita
Hosting Hosting Hosting + Doména
24 hodinová podpora 24 hodinová podpora 24 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-success">
 <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>

© Copyright 2018 - 2024 Agency like / Webdesign od ramino.sk

Načítam ...